error: index.js: Cannot find module 'babel-plugin-r' React Native

Question

What I have Done to cause the Error: I have a freshly installed Bare React Native Project . I wanted to use Drawer Navigation and had to install React Native Reanimated 2.3.0-alpha.2 .

what I have already tried to resolve the error

• I have installed fresh bare react native project
• Cleared Metro Cache
• Tried to use Reanimated 2.0.0
• I have Followed all the steps from https://www.reanimated2.com/docs/next/installation.

Error

BUNDLE ./index.js

error: index.js: Cannot find module 'babel-plugin-r' Require stack:

• D:\Work\React Native\React Native with Node\healthapp\node_modules@babel\core\lib\config\files\plugins.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules@babel\core\lib\config\files\index.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules@babel\core\lib\index.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules\metro-transform-worker\src\index.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules\metro\src\DeltaBundler\Worker.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules\metro\node_modules\jest-worker\build\workers\processChild.js

Chaucerian

Did you figure it out? I'm having a similar problem with beta.2, but with module 'babel-plugin-typescript' – Profant

Answer 1

I hope you resolved this issue already. But just in case or someone else needs it in my case it was due to the Ellipsis(...) I left when I copied the this portion of code from the instructions:

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

https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

Prepossession

Answer 2

This is a babel related issue.

Make sure to install

"@babel/core": "^7.12.9",

"@babel/runtime": "^7.16.0",

"@babel/plugin-transform-runtime": "^7.16.0",

or whatever the latest version is.

In your babel.config.js file, add the following:

plugins: [
            [
                '@babel/plugin-transform-runtime',
                {
                    absoluteRuntime: false,
                    corejs: false,
                    helpers: true,
                    regenerator: true,
                    version: '7.0.0-beta.0',
                },
            ],
            'react-native-reanimated/plugin',
        ],

If you have other plugins, make sure reanimated plugin is the last one. For other measures, delete node modules and clear you cache. More here: https://babeljs.io/docs/en/babel-plugin-transform-runtime

Lothar