i am upgrading react native version 0.75.2 T0 0.76.5 But i am gtting issue unable to run project / I am using javaScript

[harisheligarf]

Description

37 |
38 | type Registry<TEventToArgsMap: {...}> = {

39 | [K in keyof TEventToArgsMap]: Set<Registration<TEventToArgsMap[K]>>,
| ^
40 | };
41 |
42 | /**
BUNDLE ./index.js

ERROR SyntaxError: /Users/harishpalsande/Desktop/projects/native/imeuswe-mobile-native/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 | /**
BUNDLE ./index.js

ERROR SyntaxError: /Users/harishpalsande/Desktop/projects/native/imeuswe-mobile-native/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 to reproduce

upgrading react native version 0.75.2 T0 0.76.5

React Native Version

0.76.5

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 15.1.1
  CPU: (8) arm64 Apple M3
  Memory: 120.39 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.17.0
    path: ~/.nvm/versions/node/v20.17.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v20.17.0/bin/npm
  Watchman:
    version: 2024.11.18.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12483815
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.0
    wanted: 0.76.42
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

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

 ERROR  SyntaxError: /Users/harishpalsande/Desktop/projects/native/imeuswe-mobile-native/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 | /**
 BUNDLE  ./index.js 

 ERROR  SyntaxError: /Users/harishpalsande/Desktop/projects/native/imeuswe-mobile-native/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 | /**

Reproducer

d

Screenshots and Videos

No response

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[react-native-bot]

Note

Not a bug report: This issue looks like a question. We are using GitHub issues exclusively to track bugs in React Native. GitHub may not be the ideal place to ask a question, but you can try asking over on Stack Overflow, or on Reactiflux.

[Basil-Code]

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

[arelstone]

Even with the suggestion from @Basil-Code I face this problem

[wildseansy]

@arelstone - I feel you, I have been struggling with the same issue after upgrading to expo 52. I'm using expo with an nx monorepo. Changing to 'module:@react-native/babel-preset' didn't fix it (albeit anti-pattern anyhow for an expo project)

What's weird, is I created a separate project (using npx create-nx-workspace@latest --preset=expo --appName=nx-expo-example), which used all of the same major dependencies, (expo, react native, babel-preset-expo, @expo/metro-config, @expo/metro-runtime...etc) it works. I'm trying to identify the delta between the two projects that causes this issue.

My working package.json

{
  "name": "@nx-expo-example/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "dependencies": {
    "@expo/metro-config": "~0.19.4",
    "@expo/metro-runtime": "~4.0.0",
    "@react-native-firebase/app": "^21.6.2",
    "expo": "~52.0.11",
    "expo-splash-screen": "~0.29.13",
    "expo-status-bar": "~2.0.0",
    "react": "~18.3.1",
    "react-dom": "~18.3.1",
    "react-native": "0.76.6",
    "react-native-svg": "~15.8.0",
    "react-native-svg-transformer": "~1.5.0",
    "react-native-web": "~0.19.13",
    "expo-build-properties": "~0.13.2",
    "expo-dev-client": "~5.0.9"
  },
  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@expo/cli": "~0.21.8",
    "@nx/devkit": "20.3.1",
    "@nx/eslint": "20.3.1",
    "@nx/eslint-plugin": "20.3.1",
    "@nx/expo": "20.3.1",
    "@nx/jest": "20.3.1",
    "@nx/js": "20.3.1",
    "@nx/playwright": "20.3.1",
    "@nx/workspace": "20.3.1",
    "@playwright/test": "^1.36.0",
    "@swc-node/register": "~1.9.1",
    "@swc/core": "~1.5.7",
    "@swc/helpers": "~0.5.11",
    "@testing-library/jest-native": "~5.4.3",
    "@testing-library/react-native": "~12.9.0",
    "@types/jest": "^29.5.12",
    "@types/node": "18.16.9",
    "@types/react": "~18.3.12",
    "babel-jest": "^29.7.0",
    "babel-preset-expo": "~12.0.1",
    "eslint": "^9.8.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "2.31.0",
    "eslint-plugin-jsx-a11y": "6.10.1",
    "eslint-plugin-playwright": "^1.6.2",
    "eslint-plugin-react": "7.35.0",
    "eslint-plugin-react-hooks": "5.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-expo": "~52.0.2",
    "nx": "20.3.1",
    "prettier": "^2.6.2",
    "react-test-renderer": "~18.3.1",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "tslib": "^2.3.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.13.0"
  }
}

.babelrc.js

module.exports = (api) => {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
  };
};

[wildseansy]

In my case, it ended up being related to my monorepo, there was a stale set of node_modules in my react native app directory from trying to run prebuild on the app prior. This stale set of node_modules wasn't being used when I generated native builds (it was using the monorepo node_modules which is intended), but it was being used when I started my app server, resulting in a mismatch between expo versions running between the two. Once I cleared that stale node_modules directory, I cleared up this error.

If you run into this because of expo, look at the runtime version in your expo devtools. If it doesn't match what you expect, that is the root cause, a mismatch between native & js libraries.

@arelstone - I feel you, I have been struggling with the same issue after upgrading to expo 52. I'm using expo with an nx monorepo. Changing to 'module:@react-native/babel-preset' didn't fix it (albeit anti-pattern anyhow for an expo project)

What's weird, is I created a separate project (using npx create-nx-workspace@latest --preset=expo --appName=nx-expo-example), which used all of the same major dependencies, (expo, react native, babel-preset-expo, @expo/metro-config, @expo/metro-runtime...etc) it works. I'm trying to identify the delta between the two projects that causes this issue.

My working package.json

.babelrc.js

module.exports = (api) => {
api.cache(true);
return {
presets: ["babel-preset-expo"],
};
};