Simple react-spring component not working in gatsby - Element type is invalid: expected a string or a class/function but got: undefined

Question

Trying out react-spring, using a simple tutorial. However, it's not working for me. Here's my code:

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

and here's the error

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 .

I'm using react-spring in gatsby's default starter, and am simply importing my Box component like so:

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

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

export default IndexPage

Answer 1

The changelog says that in version 9.0 they changed how to import things and import { Spring, useSpring } from 'react-spring' should work and should be used.

I found on their GitHub issues the solution that worked for me.

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

In my case that was a submodule in monorepo so I had to jump up two directories to reach that library: '^react-spring$': '<rootDir>/../../node_modules/react-spring/web.cjs'