[Fix] Error: Requiring Module "node_modulesreact-native-reanimatedsrcAnimated.js" 2023

The Error “Error: Requiring module “node_modules\react-native-reanimated\src\Animated.js””, is an error that is invoked when you are working on react native and are trying to use createDrawerNavigator.

Given below is the snippet of the error you might get:

Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

I would like to share with you the steps I took to fix the “Error: Requiring module “node_modules\react-native-reanimated\src\Animated.js””

Why “Error: Requiring module “node_modules\react-native-reanimated\src\Animated.js”” Error is Seen?

The error, “Error: Requiring module “node_modules\react-native-reanimated\src\Animated.js”” is seen because, you might have not completed the react-native-reanimated setup. React-native-reanimated/plugin must be added to the babel.config.js file.

The detailed solution to fix the error “Error: Requiring module “node_modules\react-native-reanimated\src\Animated.js””, is given below:

How to fix “Error: Requiring module “node_modules\react-native-reanimated\src\Animated.js”” Error?

To fix the error, React-native-reanimated/plugin must be added to the babel.config.js file. If you are using expo, you will have to follow the right installation command and then add the Babel plugin to babel.config.js.

To fix the error, “Error: Requiring module “node_modules\react-native-reanimated\src\Animated.js””, you will have to follow one the steps mentioned below:

The first step is to complete the react-native-reanimated setup. React-native-reanimated/plugin must be added to the babel.config.js file.

The final code in your babel.config.js should look something like the below mentioned:

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

If you haven’t previously, you should finish the setup for Android as well as what is described here.

Info: After adding the react-native-reanimated/plugin to your project you may encounter a false-positive “Reanimated 2 failed to create a worklet” error. In most cases, this can be fixed by cleaning the application’s cache. Depending on your workflow or favourite package manager that could be done by:

yarn start --reset-cache
npm start -- --reset-cache
expo start -c

If you are using expo first runt the code mentioned below:

expo install react-native-reanimated

You need also refer to these additional installation instructions if you’re installing this in a bare React Native application.

You must always add the Babel plugin to babel.config.js like below mentioned, after the installation is finished:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Restart your development server and clean the bundler cache after adding the Babel plugin, by running the following code: expo start --clear.

This should fix the error “Error: Requiring module “node_modules\react-native-reanimated\src\Animated.js””.

Conclusion

To fix the error “Error: Requiring module “node_modules\react-native-reanimated\src\Animated.js””, you will have to add the React-native-reanimated/plugin must be added to the babel.config.js file.

If you are using expo you will have to follow the right installation command and then add the Babel plugin to babel.config.js