React-native-reanimated: Reanimated2: exception in useAnimatedStyle

[farwayer]

Description

Exception inside useAnimatedStyle function while trying to call Object.values on updater._closure:

 TypeError: Cannot convert undefined value to object

Screenshots

Package versions

• Platform: Android (not tested on iOS)
• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.5
• Hermes: 0.5.2-rc1
• Babel config:

module.exports = {
  plugins: [
    ['@babel/plugin-proposal-decorators', {legacy: true}],
    '@babel/plugin-proposal-export-namespace-from',
    ['babel-plugin-module-resolver', {root: 'src'}],
    'react-native-reanimated/plugin',
  ],
  presets: ['module:metro-react-native-babel-preset'],
}

[karol-bisztyga]

Hey, thanks for reporting, could you please provide a code snippet which causes the error?

[farwayer]

Nothing special, just calling useAnimatedStyle:

useAnimationStyle(() => ({
  transform: [...],
}))

Look like it is more environment issue.

[terrysahaidak]

Did you try to run metro with reset cache?

[farwayer]

Thanks! Look like the problem really was with metro cache.

[terrysahaidak]

@karol-bisztyga @jakub-gonet worth adding this specific case where it throws on "something._clousure of undefined" to throubleshooting section in the docs

[jakub-gonet]

it's only connected with cache or something else as well?

[terrysahaidak]

I saw this like 5 times already. All the fixes were cache.

[NateAGeek]

I know web support is still technically in a different release, but I am experiencing this in V2 with TypeScript...

[terrysahaidak]

What exactly?

[NateAGeek]

Sorry for the lack of details. However, I'm using React Native Web and attempting to use Reanimated 2. It appears with my current configuration I am getting the following errors.

```×
TypeError: Cannot convert undefined or null to object
useAnimatedStyle
node_modules/react-native-reanimated/src/reanimated2/Hooks.js:270
267 | export function useAnimatedStyle(updater, dependencies) {
268 | const viewTag = useSharedValue(-1);
269 | const initRef = useRef(null);

270 | const inputs = Object.values(updater._closure);
271 | const viewRef = useRef(null);
272 |
273 | // build dependencies

src/components/MenuDrawer/MenuSection/MenuItem/index.tsx:28
25 | const variantProps = useRestyle([menuVariants], restyleProps);
26 | const offset = useSharedValue(0);
27 |

28 | const animatedStyles = useAnimatedStyle(() => {
29 | return {
30 | transform: [{ translateX: offset.value * 255 }],
31 | };
```

I'm not sure if this is due to some configuration on my end. However, it does seem similar to the error above.

[jakub-gonet]

@NateAGeek, did you install the babel plugin in your project?

[NateAGeek]

Darn, I am sorry if I am wasting time. However, I did indee forget to add the react-native-reanimated/plugin to my babel config.

module.exports = {
  plugins: [
    '@babel/plugin-proposal-class-properties',
    ["module-resolver", {
      "alias": {
        "^react-native$": "react-native-web"
      }
    }],
    'react-native-reanimated/plugin',
  ],
  presets: [
    //"module:metro-react-native-babel-preset",
    "babel-preset-gatsby",
  ]
};

The added '@babel/plugin-proposal-class-properties' did not resolve the current issue I am facing.

The project's Babel config is invalid: Unexpected token =

 ERROR

/app/client/node_modules/react-native-reanimated/plugin.js:108
  trie = [{}, false];
       ^

SyntaxError: Unexpected token =
    at new Script (vm.js:83:7)
    at NativeCompileCache._moduleCompile (/app/client/node_modules/v8-compile-cache/v8-compile-cache.js:226:18)
    at Module._compile (/app/client/node_modules/v8-compile-cache/v8-compile-cache.js:172:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (/app/client/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at requireModule (/app/client/node_modules/@expo/webpack-config/node_modules/@babel/core/lib/config/files/plugins.js:165:12)
    at loadPlugin (/app/client/node_modules/@expo/webpack-config/node_modules/@babel/core/lib/config/files/plugins.js:68:17)
    at createDescriptor (/app/client/node_modules/@expo/webpack-config/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/app/client/node_modules/@expo/webpack-config/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/app/client/node_modules/@expo/webpack-config/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/app/client/node_modules/@expo/webpack-config/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)

If this error is starting to differ heavily from the bug above, then I can create a new issue.

[NateAGeek]

I was able to resolve the babel issues by changing my babel.config.js to .babelrc.json as follows:

{
  "presets": [
    "babel-preset-gatsby"
  ],
  "plugins": [
    "react-native-reanimated/plugin"
  ]
}

I think this might have been a bit of a project specific case. However, I am starting to have issues with storybook(where I will open a ticket on their end). But I got a spring example to work on web!

[SounakB]

I am having the same issue as @NateAGeek

The project's Babel config is invalid: Unexpected token =

/node_modules/react-native-reanimated/plugin.js:108
trie = [{}, false];
^

[terrysahaidak]

I am having the same issue as @NateAGeek

The project's Babel config is invalid: Unexpected token =

/node_modules/react-native-reanimated/plugin.js:108
trie = [{}, false];
^

Please, upgrade your node version to be 12

[SounakB]

I am having the same issue as @NateAGeek
The project's Babel config is invalid: Unexpected token =
/node_modules/react-native-reanimated/plugin.js:108
trie = [{}, false];
^

Please, upgrade your node version to be 12

Using node version 14 fixed this.

[ahmadsiddiq-lang]

yarn start --reset-cache

run this code, it worked for me

refrens: https://docs.swmansion.com/react-native-reanimated/docs/next/troubleshooting/

[bharat-tiwari]

this is not fixed/closed yet, I too getting the same issue

yarn start --reset-cache didn't help me

const AnimatedBar: () => React$Node = () => {
    const barWidth = useSharedValue(30);
    const barAnimatedStyle = useAnimatedStyle(() => {
        return {
            width: withTiming(barWidth.value, {
                duration: 500,
            }),
        };
    });

    const setBarWidth = () => {
        barWidth.value = 300;
    }

    return (
        <React.Fragment>
            <View>
                <IconButton
                    icon="menu-left"
                    color="#aaaaaa"
                    size={50}
                    onPress={() => setBarWidth()}
                />
            </View>
            <Animated.View style={[styles.bottomBar, barAnimatedStyle]}>
                <Text>BottomBar</Text>
            </Animated.View>
        </React.Fragment>
    );
}

bable.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
  ],
};

Versions:

"react-native": "0.63.4",
"react-native-reanimated": "2.0.0-alpha.6",

App runs fine if I comment the useAnimatedStyle call

[bharat-tiwari]

ok, after uninstalling/reinstalling , resetting yarn cache, watchman watch-del-all, etc couple of times, its working good now on iOS after I did cd ios && pod install

On Android I am getting Hermes specific issues -
ERROR ReferenceError: Property '_eventTimestamp' doesn't exist, js engine: hermes
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication), js engine: hermes

haven't found any fix for this yet, I'll update here once I get to resolve this android hermes issue

the latest version I have is "react-native-reanimated": "^2.0.0-alpha.9.2"

[bharat-tiwari]

got it working for Android as well now with the below change to android/app/build.gradle

project.ext.react = [
    entryFile: "index.js", // Added this as given [here](https://reactnative.dev/docs/hermes)
    enableHermes: true,  // clean and rebuild if changing // <- this anyway is mentioned in the reanimated2 Installation guide
]
...
...
...
def enableHermes = project.ext.react.get("enableHermes", true); // <- changed 2nd param from false to true

after this, cd android && ./gradlew clean (or cd android && sudo ./gradlew clean)

removed app from android, yarn run android again, and this time no hermes errors
animation is working good now on android as well