[9.0.0-beta.34] destructuring in useTransition does not work in build

[tim-soft]

🐛 Bug Report

@react-spring/web and react-spring builds are behaving strangely and giving errors where they didn't previously

When importing @react-spring/web from codesandbox, I see this error
$csb__animated.extendAnimated is not a function

Switching to react-spring I see this error from useTransition
Cannot destructure property 'ref' of 'props' as it is null.

To Reproduce

Basic useSpring/useTransition usage with 9.0.0-beta.34

Link to repro (highly encouraged)

Basic useTransition show/hide @react-spring/web 9.0.0-beta.34
https://codesandbox.io/s/quiet-cloud-sill4?file=/src/App.js

Basic useTransition show/hide react-spring 9.0.0-beta.34
https://codesandbox.io/s/blazing-fast-w529r?file=/src/App.js

I've noticed this has completely broken my library react-spring-lightbox
https://codesandbox.io/s/react-spring-lightbox-mosaic-71hts?fontsize=14&module=/src/ImageGallery/index.js&file=/src/ImageGallery/index.js

Environment

• @react-spring/web v9.0.0-beta.34
• react v16.13.1

[aleclarson]

Do these examples work locally? I have a feeling that CodeSandbox is compiling the ESM bundle with an incompatible Babel config, because I've seen a similar issue in another library of mine.

[tim-soft]

I cannot get the basic useTransition examples to work locally in a vanilla create-react-app install, even when importing the cjs version specifically

import { useTransition, animated } from "@react-spring/web/index.cjs";

const [toggle, set] = useState(false);
const transitions = useTransition(toggle, null, {
    from: { position: "absolute", opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
});

animated.ts:15 Uncaught TypeError: animated$1.extendAnimated is not a function at Object../node_modules/@react-spring/web/index.cjs.js (animated.ts:15)

Taking a look in my node_modules after installing "@react-spring/web": "9.0.0-beta.34",
yarn list @react-spring/*

├─ @react-spring/animated@9.0.0-rc.3
├─ @react-spring/core@9.0.0-rc.3
├─ @react-spring/shared@9.0.0-rc.3
└─ @react-spring/web@9.0.0-beta.34

So somehow I am getting 9.0.0-rc3 stuff from installing beta.34

EDIT 2:
I think the problem is in @react-spring/web/package.json

"dependencies": {
    "@babel/runtime": "^7.3.1",
    "@react-spring/animated": "^9.0.0-beta.33",
    "@react-spring/core": "^9.0.0-beta.33",
    "@react-spring/shared": "^9.0.0-beta.33"
  },

"@react-spring/animated": "^9.0.0-beta.33" is resolving to @react-spring/animated@9.0.0-rc.3 etc because of the ^, which blowing up beta.34 based projects

[aleclarson]

Sorry, I guess beta.34 is busted now. Too bad, because that was the last v9 without breaking changes to the useTransition hook. Is using rc.3 not viable for you?

edit: I suppose I could release beta.35 as a mirror of beta.34 without the caret ranges in its dependencies. Would you prefer that?

[tim-soft]

@aleclarson not until you fix some of my bugs 😉

In the meantime I published a version of @react-spring/web with fixed dependencies on animate/core/shared
https://github.com/tim-soft/react-spring-lightbox/blob/master/package.json#L106

edit: a new beta with fixed deps would be pretty helpful for other folks in my position

[slackday]

I have the same error using @react-spring/web@9.0.0-rc.3. I looked in @react-spring/web/package.json and it has dependencies

  "dependencies": {
    "@babel/runtime": "^7.3.1",
    "@react-spring/animated": "9.0.0-rc.3",
    "@react-spring/core": "9.0.0-rc.3",
    "@react-spring/shared": "9.0.0-rc.3"
  },

Sorry for hijacking the thread but I have another simple question that I fail to find the answer to looking at the docs. I don't understand the difference between useSpring and useTransition. I want to create a simple animation on component mount.

  const [style, animate] = useTransition(isMounted, null, {
    config: { duration: 500 },
    from: {
      opacity: 0,
      translateX: '100%',
    },
    enter: {
      opacity: 1,
      translateX: '0',
    },
    leave: {
      opacity: 0,
      translateX: '100%',
    },
  });

  const [style, animate] = useSpring(() => ({
    config: { duration: 500 },
    from: {
      opacity: 0,
      translateX: '100%',
    },
    enter: {
      opacity: 1,
      translateX: '0',
    },
    leave: {
      opacity: 0,
      translateX: '100%',
    },
  }));

What would the difference between these be?

My problem is component is mounted with styles opacity: 0; transform: translateX(100%); but no animation is taking place.

edit

If I use useSpring with "from" and "to" it works for animating in the component. But I also want to reverse the animation before component unmounts. "enter" and "leave" are only available in useTransition ?

[aleclarson]

@slackday This thread is about 9.0.0-beta.34, so it's not really possible for 9.0.0-rc.3 to "have the same error".

"enter" and "leave" are only available in useTransition ?

Right. Your problem seems to be a duplicate of #1035.

[kennycrosby]

Getting the same error here with ^9.0.0-rc.3, using the example pulled right from the docs. Any advice?

[Yzrsah]

@tim-soft
The API for useTransition changed in V9 but it's not documented on react-spring.io.
If you make these changes, it will resolve the issue.

• Remove the key selector from useTransitions(), as it's now automatic:
  const transitions = useTransition(toggle, null, {
  to
  const transitions = useTransition(toggle, {

• Call transitions instead of mapping it:
  transitions.map(({ item, key, props }) => ...)
  to
  transitions((props, item, key) => ...)

@joshuaellis The issue is just a documentation issue.

[joshuaellis]

Awesome, i'll close this, if anyone would like to update the documentation that would be amazingly helpful ⭐