Compile error: Unknown option: .pre with react-native-reanimated/plugin

[ablause]

Description

Since I installed react-native-reanimated, my application won't start. I tried several versions of react-native or Babel, but nothing works.

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.

Expected behavior

When I add the react-native-reanimated/plugin plugin in the babel.config.js file, my application doesn't want to run anymore.

Actual behavior & steps to reproduce

1. Run: npx react-native init MyApp --template @ui-kitten/template-ts.
2. Run: npm install react-native-reanimated.
3. Add babel plugin to babel.config.js.
4. Change enableHermes to true.
5. Change MainApplication.java.
6. Run: react-native run-android or with --reset-cache.

Snack or minimal code example

babel.config.js

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

index.js

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './src/App';

AppRegistry.registerComponent(appName, () => App);

App.tsx (I already tried to remove all routes and imports)

...
import 'react-native-gesture-handler';

export default (): React.ReactFragment => {
  return (
    <>
      <IconRegistry icons={EvaIconsPack} />
      <ApplicationProvider {...eva}>
        <NavigationContainer>
          <RootStack.Navigator screenOptions={screenOptions}>
            <RootStack.Screen name="Home" component={HomeScreen} />
            <RootStack.Screen name="Editor" component={EditorScreen} />
          </RootStack.Navigator>
        </NavigationContainer>
      </ApplicationProvider>
    </>
  );
};

Package versions

• React Native: 0.66.3
• React Native Reanimated: 2.3.0-beta.4
• NodeJS: 16.8.0
• Xcode: None
• Java & Gradle: Java 8 & Gradle 6.8

Affected platforms

• [x] Android
• [ ] iOS
• [ ] Web

[github-actions[bot]]

Issue validator

The issue is valid!

[ablause]

I'm sorry, I made a mistake in the babel.config.js file...

[zabojad]

@ablause What was your mistake? I'm observing the same issue at my end...

[ablause]

I put react-native-reanimated/plugin in "presets", instead in "plugins". Check if you haven't done the same.

[zabojad]

mmm. Found it. It should have been this below in babel config file:

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

[Lueton]

I put react-native-reanimated/plugin in "presets", instead in "plugins". Check if you haven't done the same.

im glad you made this mistake, same here 😄

[Tchaikovsky1114]

I'm sorry, I made a mistake in the babel.config.js file...

you are forewalker thx a lot

[umardev500]

same with me i put it on it too haha... and don't forget to run yarn android again

I put react-native-reanimated/plugin in "presets", instead in "plugins". Check if you haven't done the same.

[edugrip]

made the same mistake while using ['react-native-worklets-core/plugin'], (put it in presets). And the case could be for any other plugin as well.