Compilation error with react-native-reanimated and babel

Question

I would like to add react-native-reanimated to my project, I followed the installation guide and at the time of adding the plugin for Babel I receive an error from it when launching the application :

error: index.js: [BABEL] W:\folders\project\index.js: Unknown option: .pre. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

I am using an Android device, and therefore I have enabled Hermes and created the method in MainApplication. How can I solve this problem? Do I have to publish an issue on GitHub?

babel.config.js

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

Dependencies

"react": "17.0.1",
"react-native": "0.64.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "2.3.0-beta.1",
"metro-react-native-babel-preset": "^0.64.0",

Solution tried:

• Run react-native start --reset-cache.
• Delete node_modules and reinstall.
• Changing the library version.

Springwood

Answer 1

I had the same issue and then realized that it should be in plugins, not presets. Simply move 'react-native-reanimated/plugin' into plugins:

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

Idocrase

for me i had written plugin instead of plugins 🙃 – Admissive

life saver, thanks @Idocrase – Coffeepot