react-spring not working with NextJS

Created on 14 Oct 2020 · 3Comments · Source: pmndrs/react-spring

🐛 Bug Report

Component does not render content

To Reproduce

I'm trying to reproduce this example, however it does not seem to render the content with NextJS.

Codesandbox with react-spring v9

Environment

react-spring v89.x.x
react v16.8.x (or react-native v0.58.x)

SSR potential bug v9

Source

mkhoussid

👍4

Most helpful comment

Similar story for me.
"next": "9.5.5", "react-spring": "9.0.0-rc.3"
In development simple animation works fine but silently fails in production build.
8.0.27 works everywhere.

In my case component is not rendered on the server so it is not related to SSR I think.

const props = useSpring({
      from: {
        top: 25
      },
      to: {
        top:0,
      },
      config: config.wobbly,
    });

<animated.div style={props}>....</animated.div>

wanjas on 23 Oct 2020

👍3

All 3 comments

Similar story for me.
"next": "9.5.5", "react-spring": "9.0.0-rc.3"
In development simple animation works fine but silently fails in production build.
8.0.27 works everywhere.

In my case component is not rendered on the server so it is not related to SSR I think.

const props = useSpring({
      from: {
        top: 25
      },
      to: {
        top:0,
      },
      config: config.wobbly,
    });

<animated.div style={props}>....</animated.div>

wanjas on 23 Oct 2020

👍3

I'm having issues as well. Works fine locally using next dev, but fails to render when I run a dev build with next build. Nothing outputted in the console, just no animation in the browser.

Using these deps:

"next": "10.0.1",
"react": "17.0.1",
"react-spring": "^9.0.0-rc.3" 
(or  "react-spring": "^8.0.27")

Resolved my issue—looks like the initial values for a spring were getting set to NaN. In dev mode, the live refresh would mask this, but things ended up breaking silently in prod mode.

Try adding onFrame: (props) => (console.log(props)) to log the values of your animation. Odds are something's buggy in there

I think this is more evidence that #666 is a good proposal