React Native: SyntaxError in node_module -> EventEmitter.js: Unexpected Token, Expected "]"

Question

I'm upgrading my React Native project to a newer version. What I’ve done for this:

1. Created a new React Native project using the latest version.
2. Installed all the required packages that were in the old project to test for compatibility. None of the packages caused crashes in the new project.
3. Imported my actual project code into the new folder.

When I try to run the project, I get the error in the node_modules folder:

 ERROR  SyntaxError: [ROOT_FOLDER]/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js: 
Unexpected token, expected "]" (39:5)

  37 |
  38 | type Registry<TEventToArgsMap: {...}> = {
> 39 |   [K in keyof TEventToArgsMap]: Set<Registration<TEventToArgsMap[K]>>,
     |      ^
  40 | };
  41 |
  42 | /**

Steps Tried:

• Cleaned the project cache
• Reinstall the all packages
• Build android project via Android Studio

Search on the internet, found simailar issue but not related to mine. https://github.com/puppeteer/puppeteer/issues/10509

Answer 1

In my case, the issue was with @react-native/babel-preset, which was not added inside the devDependencies. I added it to the devDependencies with version 0.76.1, and it worked for me.

"devDependencies": {
       "@react-native/babel-preset": "^0.76.1",
 }

Reference: carloscuesta/react-native-error-boundary#897.

Answer 2

I managed to fix this issue by replacing presets: ['module:metro-react-native-babel-preset'], with presets: ['module:@react-native/babel-preset'], in both babel.config.js & .babelrc