3

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
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
  • According to the docs it should be `import {Spring} from 'react-spring/renderprops'` ? – Felix Kling Jun 08 '19 at 10:00
  • this fixed it ... is this fairly new? the tutorial I have been using (any many others I had a look at) hadn't updated this. thanks a lot! If you submit this, I'll accept it as the answer :) – R. Kohlisch Jun 08 '19 at 10:04
  • The changelog says that in version 9.0 they changed how to import things. https://react-spring.io/changelog and `import { Spring, useSpring } from 'react-spring'` should work. I'm facing the same issue like you and I want to use a new to import that Spring module, but it doesn't work :( – NieMaszNic Apr 28 '21 at 07:48

1 Answers1

0

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'

NieMaszNic
  • 597
  • 4
  • 21