React-spring: Nextjs 9 & react-spring 9: useSpring opposite values in prod/dev-mode

[secretlifeof]

🐛 Bug Report

We are using Nextjs 9 & React-spring 9-beta.34. De problem we are experiencing while using useSpring is that transform reacts differently depending on Nextjs build mode prod vs dev. Visibility behaves correctly, maybe because it is a Boolean value. So in development it is correct. Probably related to #778.

To be more clear. When projectDetailVisibility == true:
In production = 'translate3d(0, 0vh, 0)'
In development = 'translate3d(0, 100vh, 0)'

const styleProps = useSpring({
    to: async (next) => {
         await next({
        visibility: projectDetailVisibility ? 'visible' : 'hidden'
    });
    await next({ transform: projectDetailVisibility ? 'translate3d(0, 100vh, 0)' : 'translate3d(0, 0vh, 0)' });
    },
    from: { visibility: 'visible', transform: 'translate3d(0, 100vh, 0)' }
});

To Reproduce

If it is important to build a codeSandbox, please ask me :)

Expected behavior

I expect useSpring to behave the same in production and development.

In React-spring v8.0.27 it works correctly.

Environment

• react-spring v9.0.0-beta.34
• react v16.9.0
• next v9.0.6-canary.0 (Have tried different builds)

[aleclarson]

Please provide a CodeSandbox or git repo. Thanks! 👍

[secretlifeof]

Yes sure!

Codesandbox:
https://codesandbox.io/embed/github/secretlifeof/react-overlay-images-react-spring-bug/tree/master/?fontsize=14

Github repo:
https://github.com/secretlifeof/react-overlay-images-react-spring-bug

In the codesandbox everything seems to work. To view the false behaviour please:

clone GitHub repo
yarn
yarn build
yarn start

[XeeD]

After trying out v9 of react-spring we are suffering the same issue. Most of the animations work just fine, but for some simple useSpring based animation are running in the opposite direction when we enable the production mode.

Or app is not based on Next.js but on Create React App (generated a couple of weeks ago).

const InlineLabel = ({
  fieldIsFocused,
  fieldHasValue,
  children,
}) => {
  const labelProps = useSpring({
    transform:
      fieldIsFocused || fieldHasValue
        ? 'scale(0.8) translate3d(0px, -12px, 0px)'
        : 'scale(1) translate3d(0px, 0px, 0px)',
  });

  return (
    <animated.label
      hasError={fieldHasError}
      style={labelProps}
    >
      {children}
    </animated.label>
  );
};

If it helps I can try to put the whole example into a repo.

[lettertwo]

FWIW, I've seen this same thing in a production Gatsby build using [email protected] alongside styled-components. I haven't figured out why this happens in production (or whether styled-components is a necessary complication), but i've managed to reproduce the bug reliably with a relatively simple CRA setup:

https://codesandbox.io/s/zealous-visvesvaraya-iw6qj

(NOTE: The issue only seems to manifest in production builds, so the codesandbox preview should appear to work as intended!)

To see the bug, view that same example built for production:

https://csb-iw6qj.netlify.com/

The bug looks sort of like the animation executes oppositely of what is intended, or like it is animating the previous state change when the next state change occurs.

NOTE: upgrading [email protected] resolves the issue in this repro, so for anyone seeing similar behavior on 9.0.0-beta.34, give the canary a shot.

[aleclarson]

@lettertwo That's not the latest canary version. LMK if 9.0.0-canary.808.12.11b2708 works or not.

[lettertwo]

@aleclarson whoops, i grabbed the first one in the list yarn showed me! I switched to 9.0.0-canary.808.12.11b2708 and can confirm it works.

I would love to know what the underlying issue was, if you have insight and care to share!

[samselikoff]

I also hit this with my Gatsby app. I tried the latest canary (9.0.0-canary.808.12.11b2708) but I ran into a bug.

I have

const overlayTransitions = useTransition(isOpen, null, {
  ref: springRef,
  config: {
    mass: 1,
    tension: 200,
    friction: 20,
    clamp: true,
  },
  from: { alpha: 0, blur: 0 },
  leave: { alpha: 0, blur: 0 },
  enter: { alpha: 0.3, blur: 25 },
})

and got an error, I think due to the null second argument.

[edwardyh80]

I could confirm this problem from CRA as well. Any fix?

[aleclarson]

@samselikoff The v9 canary has a new API for useTransition. See here.

@edwardyh80 Please try the latest canary.

[aleclarson]

Closing this according to reports of it being fixed by the canary.

If you see this issue, please try with the latest version (9.0.0-rc.2 currently, #985).