[bug]: Animation did not run when using useSpring in next 14 Dev Mode.

[AburizalAN]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

I am using react-spring to animate elements in my next 14 project. But when I run my app in development mode using next dev, the animation didn't start. this case only occurs in development mode not in production. when i try to run it in production, the animation run smoothly

To Reproduce

"use client"

import { useSpring, animated } from '@react-spring/web'

export default function MyComponent() {
  const springs = useSpring({
    from: { x: 0 },
    to: { x: 100 },
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
        ...springs,
      }}
    />
  )
}

Expected Behaviour

Animation running smoothly on development mode next dev and production mode

Link to repo

-

[joshuaellis]

I think this is quite similar to #2146 and it's a nextjs thing with server components implementation. I'd redirect you to that issue instead.