javascript - 简单的 react-spring 组件在 gatsby 中不起作用 - 元素类型无效 : expected a string or a class/function but got: undefined

Question

使用简单教程试用 react-spring。但是，它对我不起作用。这是我的代码:

import React, { Component } from "react"
import { Spring } from "react-spring"
export default class Box extends Component {
  render() {
    return (
      <Spring
        from={{ opacity: 0, marginTop: -1000 }}
        to={{ opacity: 1, marginTop: 0 }}
      >
        {props => (
          <div style={props}>
            <p>Welcome to your new Gatsby site.</p>
            <p>Now go build something great.</p>
          </div>
        )}
      </Spring>
    )
  }
}

这里是错误

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Box.

我在 gatsby 的默认启动器中使用 react-spring，并且只是像这样导入我的 Box 组件:

import React from "react"
import Layout from "../components/layout"
import Box from "../components/box"

const IndexPage = () => (
  <Layout>
    <Box />
  </Layout>
)

export default IndexPage

Answer 1

变更日志说，在 9.0 版中，他们将如何更改为 import things和 import { Spring, useSpring } from 'react-spring'应该工作并且应该使用。

I found on their GitHub issues对我有用的解决方案。

放: '^react-spring$': '<rootDir>/node_modules/react-spring/web.cjs',在 jest.config.js

在我的例子中，这是 monorepo 中的一个子模块，所以我必须跳到两个目录才能到达那个库: '^react-spring$': '<rootDir>/../../node_modules/react-spring/web.cjs'