簡單的 react-spring 組件在 gatsby 中不起作用 - 元素類型無效：預期為字符串或類/函數但得到：未定義

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>
    )
  }
}

這是錯誤

元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）但得到：未定義。 您可能忘記從定義組件的文件中導出組件，或者您可能混淆了默認導入和命名導入。

檢查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 { Spring, useSpring } from 'react-spring'應該可以工作並且應該使用。

我在他們的 GitHub 問題上找到了對我有用的解決方案。

把： '^react-spring$': '<rootDir>/node_modules/react-spring/web.cjs', in jest.config.js

在我的例子中，這是 monorepo 中的一個子模塊，所以我必須跳上兩個目錄才能到達該庫： '^react-spring$': '<rootDir>/../../node_modules/react-spring/web.cjs'