react-spring 9.0.0-beta.1 (also in 8.0.19): createAnimatedStyle is not a function when importing from react-spring/universal

[flsilva]

🐛 Bug Report

I'm trying to use react-spring in a react-native-web app, so I'm importing stuff from react-spring/universal, but I'm getting the following error:

Uncaught TypeError: createAnimatedStyle is not a function

The error happens on web, iOS and Android. If I change my code to import from just react-spring for web, or react-spring/native for react-native, everything works as expected.

To Reproduce

Steps to reproduce the behavior:

Just try to implement a simple useSpring importing it and animated from react-spring/universal.

Expected behavior

Everything should work as expected, i.e., no runtime errors.

Link to repro

I've created a GitHub repository to reproduce the bug. Please take a look at it and read instructions and more details on its README file:

https://github.com/flsilva/react-spring-universal-issue

Environment

• react 16.8.6
• react-native 0.59.4
• react-native-web 0.11.2
• react-spring 9.0.0-beta.1

But the issue can also be seen using react-spring 8.0.19.

Thank you for your time and work.

[aleclarson]

Have you tried react-spring/native with react-native-web?

Note: When using react-spring/universal, some globals must be injected manually.

import { Globals } from 'react-spring/universal'

// These two globals must be injected.
Globals.assign({
  applyAnimatedValues(instance, props) {}
  createStringInterpolator(config) {}
})

Also, please try with the newest beta 👍

[aleclarson]

This should be fixed in v9.0.0-beta.4

[flsilva]

@aleclarson yeah I've been using react-spring/native with react-native-web and it works for iOS, Android and web, which brings me to a question: what's the difference them between native and universal exports? In other words, could we make them one?

I didn't know we have to inject those globals when using universal, is it documented?

The createAnimatedStyle bug is fixed, but now I'm getting a different error. I tried using exactly the code you wrote above to inject globals, but got the following runtime error on web:

Failed prop type: Invalid prop `opacity` of type `object` supplied to `View`, expected `number`.
Bad object: {
  "opacity": {
    "children": [],
    "animatedStyles": {},
    "value": 0,
    "startPosition": 0,
    "lastPosition": 0,
    "done": true
  },
  ...

I should probably implement those two globals somehow? I can't find anything in the docs related to that. Anyway, I'm using react-spring/native as you mentioned, and it's working great.

BTW, using TypeScript I get the following error when I import Globals as:

import { Globals } from 'react-spring/universal';

Module '"PROJECT_ROOT/node_modules/react-spring/universal"' has no exported member 'Globals'.ts(2305)

I'm testing using latest v9.0.0-beta.5.