Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple "NodePath has been removed so is read-only." errors #41929

Closed
wojtekmaj opened this issue Dec 13, 2023 · 28 comments
Closed

Multiple "NodePath has been removed so is read-only." errors #41929

wojtekmaj opened this issue Dec 13, 2023 · 28 comments
Assignees
Labels
Resolution: Fixed A PR that fixes this issue has been merged. Type: Upgrade Issue Issues reported from upgrade issue form

Comments

@wojtekmaj
Copy link

wojtekmaj commented Dec 13, 2023

Old Version

0.72.7

New Version

0.73.0

Description

Upon starting the app (in dev mode), it starts bundling the modules, and then crashes with one of the following errors:

error: node_modules/react-native/Libraries/Components/RefreshControl/AndroidSwipeRefreshLayoutNativeComponent.js: /app-native/node_modules/react-native/Libraries/Components/RefreshControl/AndroidSwipeRefreshLayoutNativeComponent.js: NodePath has been removed so is read-only.

error: node_modules/react-native/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js: /app-native/node_modules/react-native/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js: NodePath has been removed so is read-only.

error: node_modules/react-native/Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js: /app-native/node_modules/react-native/Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js: NodePath has been removed so is read-only.

error: node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent.js: /app-native/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent.js: NodePath has been removed so is read-only.

Steps to reproduce

  1. Run the updated app on iOS simulator
  2. See crash

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.2
  CPU: (8) arm64 Apple M2
  Memory: 293.70 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.9.0
    path: /private/var/folders/3y/swkjq1x101b76mzjgt4pm2d80000gp/T/xfs-2ea589c9/node
  Yarn:
    version: 4.0.2
    path: /private/var/folders/3y/swkjq1x101b76mzjgt4pm2d80000gp/T/xfs-2ea589c9/yarn
  npm:
    version: 10.1.0
    path: /usr/local/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.0.1/15A507
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.0
    wanted: ^0.73.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

node_modules/react-native/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js: /app-native/node_modules/react-native/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js: NodePath has been removed so is read-only.

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0
node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent.js: /app-native/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent.js: NodePath has been removed so is read-only.

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

Reproducer

I have no idea how to reproduce that on other apps :( The errors seem to be coming from everywhere, there are no error stacks, I don't know what to add to break it.

Screenshots and Videos

No response

@wojtekmaj wojtekmaj added Needs: Triage 🔍 Type: Upgrade Issue Issues reported from upgrade issue form labels Dec 13, 2023
@github-actions github-actions bot added Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Dec 13, 2023
Copy link

⚠️ Missing Reproducible Example
ℹ️ 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/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

@wojtekmaj
Copy link
Author

I looked into @babel/traverse source code (appeared to be the source of this error) and added console.trace() before the error in question is thrown. This is what I got:

Trace
    at NodePath._assertUnremoved (/app-native/node_modules/@babel/traverse/lib/path/removal.js:61:13)
    at NodePath.insertAfter (/app-native/node_modules/@babel/traverse/lib/path/modification.js:101:8)
    at NodePath.replaceWithMultiple (/app-native/node_modules/@babel/traverse/lib/path/replacement.js:57:22)
    at PluginPass.exit (/app-native/node_modules/@react-native/babel-plugin-codegen/index.js:162:32)
    at newFn (/app-native/node_modules/@babel/traverse/lib/visitors.js:160:14)
    at NodePath._call (/app-native/node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (/app-native/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/app-native/node_modules/@babel/traverse/lib/path/context.js:90:8)
    at TraversalContext.visitQueue (/app-native/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/app-native/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/app-native/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/app-native/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at traverse (/app-native/node_modules/@babel/traverse/lib/index.js:52:34)
    at transformFile (/app-native/node_modules/@babel/core/lib/transformation/index.js:82:31)
    at transformFile.next (<anonymous>)
    at run (/app-native/node_modules/@babel/core/lib/transformation/index.js:24:12)
    at run.next (<anonymous>)
    at /app-native/node_modules/@babel/core/lib/transform-ast.js:23:33
    at Generator.next (<anonymous>)
    at evaluateSync (/app-native/node_modules/gensync/index.js:251:28)
    at sync (/app-native/node_modules/gensync/index.js:89:14)
    at stopHiding - secret - don't use this - v1 (/app-native/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at transformFromAstSync (/app-native/node_modules/@babel/core/lib/transform-ast.js:43:83)
    at Object.transform (/app-native/node_modules/@react-native/metro-babel-transformer/src/index.js:227:7)
    at module.exports.transform (/app-native/node_modules/react-native-svg-transformer/index.js:51:30)
    at transformJSWithBabel (/app-native/node_modules/metro-transform-worker/src/index.js:329:45)
    at Object.transform (/app-native/node_modules/metro-transform-worker/src/index.js:456:18)
    at transformFile (/app-native/node_modules/metro/src/DeltaBundler/Worker.flow.js:73:36)
    at Object.transform (/app-native/node_modules/metro/src/DeltaBundler/Worker.flow.js:48:10)
    at execFunction (/app-native/node_modules/jest-worker/build/workers/processChild.js:149:17)
    at execHelper (/app-native/node_modules/jest-worker/build/workers/processChild.js:137:5)
    at execMethod (/app-native/node_modules/jest-worker/build/workers/processChild.js:140:5)
    at process.messageListener (/app-native/node_modules/jest-worker/build/workers/processChild.js:44:7)
    at process.emit (node:events:514:28)
    at emit (node:internal/child_process:951:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:83:21)

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Dec 18, 2023
@wojtekmaj
Copy link
Author

Not sure if this is harmful in any way, but found out that installing RN right now causes two copies of @react-native/codegen to be installed: 0.73.2 (via ^0.73.2) and 0.74.0 (via *).

@Titozzz
Copy link
Collaborator

Titozzz commented Dec 18, 2023

That would be bad. Who depends on *?

@wojtekmaj
Copy link
Author

wojtekmaj commented Dec 18, 2023

The whole tree of YOLO version resolution:

@react-native/codegen@npm:*
  is required by: @react-native/babel-plugin-codegen@npm:*
    is required by: @react-native/babel-preset@npm:*
      is required by: @react-native/metro-babel-transformer@npm:^0.73.12

All of the * above are resolved to 0.74.0 at the moment of writing.

@wojtekmaj
Copy link
Author

I can confirm it's a dependency issue indeed!

Adding the following Yarn resolutions:

    "@react-native/babel-preset@*": "npm:@react-native/babel-preset@^0.73.18",
    "@react-native/babel-plugin-codegen@*": "npm:@react-native/babel-plugin-codegen@^0.73.0",
    "@react-native/codegen@*": "npm:@react-native/codegen@^0.73.2",

fixed the issue for me. 🥳

@cortinico
Copy link
Contributor

Not sure if this is harmful in any way, but found out that installing RN right now causes two copies of @react-native/codegen to be installed: 0.73.2 (via ^0.73.2) and 0.74.0 (via *).

Yes, this is bad.

Specifically we should get rid of this:

"@react-native/codegen": "*"

@cortinico cortinico added the Help Wanted :octocat: Issues ideal for external contributors. label Dec 27, 2023
@cortinico
Copy link
Contributor

This is a nice cleanup if someone wants to help us do it. Specifically we'll have to cleanup the following * dependencies and replace them with the 0.74.0 version:

babel-plugin-codegen/package.json
28:    "@react-native/codegen": "*"

eslint-plugin-specs/package.json
34:    "@react-native/codegen": "*",

react-native-babel-preset/package.json
57:    "@react-native/babel-plugin-codegen": "*",

react-native-babel-transformer/package.json
19:    "@react-native/babel-preset": "*",

virtualized-lists/package.json
30:    "react-native": "*"

react-native-codegen-typescript-test/package.json
22:    "@react-native/codegen": "*"

rn-tester/package.json
32:    "react-native": "*"

@wojtekmaj
Copy link
Author

0.74.0? Not 0.73.x?

@lunaleaps
Copy link
Contributor

lunaleaps commented Dec 27, 2023

We need to update the versions on main to point to 0.74.x. The ones on the 0.73 branch need to point to latest 0.73. I'll put up a PR

#42081 for main

facebook-github-bot pushed a commit that referenced this issue Dec 28, 2023
Summary:
See #41929 for an issue on multiple monorepo packages being installed. The reason is that `*` resolves to whatever is tagged `latest` on npm.

We still need to fix the fact that our monorepo publish script will update the latest tag everytime we publish. For now, we should remove these from `main` and we will also update this in the 0.73 release branch.

I've left the two peer dependencies on `react-native` to keep at `*`.
```
virtualized-lists/package.json
30:    "react-native": "*"

rn-tester/package.json
32:    "react-native": "*"
```

As a peer-dependency this won't be a problem in terms of installing a second `react-native`. I thought about updating these to `nightly`, but that would install multiple nightly react-natives as the tag will be updated with each nightly release. I think for now this is fine and something we can revisit.

Things left to do
[ ] Fix monorepo publish script to not update `--latest`
[ ] Remove ^ dependencies on monorepo packages: #41958
[ ] Re-evaluate how we bump and align monorepo packages when we cut a release branch. I forget if we manually update this when we cut or if there is a script. We may want to change the script and have `main` dependencies point to some fake version like `1000.0.0` and only update these on nightly publishes. Regardless, this will need some discussion.

## Changelog:

[GENERAL] [CHANGED] - Be explicit about what monorepo versions we are using

Pull Request resolved: #42081

Test Plan: N/A

Reviewed By: cortinico, cipolleschi

Differential Revision: D52435234

Pulled By: lunaleaps

fbshipit-source-id: 67da029d2b637e3997c12c21fe2a9ab9bc344399
@cortinico
Copy link
Contributor

@wojtekmaj 0.73.2 was released which removes the * dependency which was causing a duplicate codegen. Could you try again and check if the issue is resolved?

@wojtekmaj
Copy link
Author

wojtekmaj commented Jan 9, 2024

Yep, I can confirm that removing the previously added workaround:

Adding the following Yarn resolutions:

    "@react-native/babel-preset@*": "npm:@react-native/babel-preset@^0.73.18",
    "@react-native/babel-plugin-codegen@*": "npm:@react-native/babel-plugin-codegen@^0.73.0",
    "@react-native/codegen@*": "npm:@react-native/codegen@^0.73.2",

fixed the issue for me. 🥳

and removing references to these packages from lockfile, and reinstalling the repo, results in correct versions of these packages installed: 0.73.19, 0.73.2 and 0.73.2 respectively. There are no copies of @react-native/babel-plugin-codegen @0.74.x in my dependency tree either.

Thanks!

@cortinico cortinico added Resolution: Fixed A PR that fixes this issue has been merged. and removed Help Wanted :octocat: Issues ideal for external contributors. Needs: Triage 🔍 Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Needs: Attention Issues where the author has responded to feedback. labels Jan 9, 2024
Othinn pushed a commit to Othinn/react-native that referenced this issue Jan 9, 2024
Summary:
See facebook#41929 for an issue on multiple monorepo packages being installed. The reason is that `*` resolves to whatever is tagged `latest` on npm.

We still need to fix the fact that our monorepo publish script will update the latest tag everytime we publish. For now, we should remove these from `main` and we will also update this in the 0.73 release branch.

I've left the two peer dependencies on `react-native` to keep at `*`.
```
virtualized-lists/package.json
30:    "react-native": "*"

rn-tester/package.json
32:    "react-native": "*"
```

As a peer-dependency this won't be a problem in terms of installing a second `react-native`. I thought about updating these to `nightly`, but that would install multiple nightly react-natives as the tag will be updated with each nightly release. I think for now this is fine and something we can revisit.

Things left to do
[ ] Fix monorepo publish script to not update `--latest`
[ ] Remove ^ dependencies on monorepo packages: facebook#41958
[ ] Re-evaluate how we bump and align monorepo packages when we cut a release branch. I forget if we manually update this when we cut or if there is a script. We may want to change the script and have `main` dependencies point to some fake version like `1000.0.0` and only update these on nightly publishes. Regardless, this will need some discussion.

## Changelog:

[GENERAL] [CHANGED] - Be explicit about what monorepo versions we are using

Pull Request resolved: facebook#42081

Test Plan: N/A

Reviewed By: cortinico, cipolleschi

Differential Revision: D52435234

Pulled By: lunaleaps

fbshipit-source-id: 67da029d2b637e3997c12c21fe2a9ab9bc344399
@airowe
Copy link

airowe commented Mar 14, 2024

I'm seeing this issue arise on 0.73.6 in an nx monorepo. Possible regression? Should I raise a new issue?

@PaulCunningham697
Copy link

Seeing this when running tests on 0.73.6
node_modules/react-native/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js: NodePath has been removed so is read-only.

@airowe
Copy link

airowe commented Mar 26, 2024

@PaulCunningham697 I finally got over this by matching the babel versions in my dependency declarations to the correct metro versions. What do you have for those?

@SwhiteMHC
Copy link

I am also experiencing this issue on 0.73.6. These are my package.json dependenciesL


{   "dependencies": {
    "@apollo/client": "3.8.6",
    "@aws-amplify/react-native": "^1.0.24",
    "@aws-amplify/rtn-push-notification": "1.2.5",
    "@aws-amplify/ui-react-native": "2.0.3",
    "@expo/metro-config": "^0.10.7",
    "@expo/ngrok": "4.1.0",
    "@jest/globals": "29.7.0",
    "@managedhealth/bac-rn-module": "^1.0.1",
    "@react-native-async-storage/async-storage": "^1.21.0",
    "@react-native-community/netinfo": "^11.0.1",
    "@react-native-community/slider": "4.4.2",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "6.9.13",
    "@testing-library/react": "14.0.0",
    "@testing-library/react-hooks": "8.0.1",
    "@types/jest": "29.5.5",
    "@types/node": "^20.11.19",
    "@types/react-native-calendar-picker": "7.0.4",
    "@types/react-native-vector-icons": "6.4.15",
    "apollo-upload-client": "17.0.0",
    "aws-amplify": "6.0.2",
    "browserstack-node-sdk": "^1.32.0",
    "clsx": "2.0.0",
    "dotenv": "^16.4.5",
    "expo": ">=50.0.0-0 <51.0.0",
    "expo-constants": "14.4.2",
    "expo-dev-client": "~2.4.13",
    "expo-file-system": "~15.4.5",
    "expo-image-manipulator": "~11.3.0",
    "expo-local-authentication": "~13.4.1",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "graphql": "16.8.1",
    "haversine": "1.1.1",
    "mobx": "6.10.2",
    "mobx-react-lite": "4.0.4",
    "mocha": "^10.3.0",
    "moment": "2.29.4",
    "nativewind": "2.0.11",
    "react": "18.2.0",
    "react-hook-form": "7.47.0",
    "react-native": "0.73.6",
    "react-native-blob-util": "^0.19.6",
    "react-native-calendar-picker": "7.1.4",
    "react-native-device-info": "^10.12.0",
    "react-native-dotenv": "3.4.9",
    "react-native-encrypted-storage": "4.0.3",
    "react-native-geocoding": "0.5.0",
    "react-native-geolocation-service": "5.3.1",
    "react-native-get-random-values": "~1.9.0",
    "react-native-keychain": "8.1.2",
    "react-native-maps": "1.7.1",
    "react-native-pdf": "^6.7.4",
    "react-native-permissions": "^4.0.1",
    "react-native-safe-area-context": "^4.8.2",
    "react-native-screens": "^3.28.0",
    "react-native-url-polyfill": "2.0.0",
    "react-native-uuid": "2.0.1",
    "react-native-vector-icons": "10.0.0",
    "react-native-vision-camera": "3.1.0",
    "selenium-webdriver": "4.10.0",
    "util": "0.12.5",
    "webdriverio": "^8.33.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "7.20.0",
    "@faker-js/faker": "^8.4.1",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/apollo-upload-client": "17.0.4",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "18.0.0",
    "babel-jest": "29.6.3",
    "eslint": "8.19.0",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "3.3.2",
    "ts-node": "^10.9.2",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  },
  "private": true,
  "resolutions": {
    "wrap-ansi": "7.0.0",
    "string-width": "4.1.0"
  }
}

@CCB-cerivera
Copy link

Did you manage to solve the error? I have the same one right now updating from 0.72 to 0.73

@CCB-cerivera
Copy link

Seeing this when running tests on 0.73.6 node_modules/react-native/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js: NodePath has been removed so is read-only.

Did you manage to solve it?

@CCB-cerivera
Copy link

I am also experiencing this issue on 0.73.6. These are my package.json dependenciesL


{   "dependencies": {
    "@apollo/client": "3.8.6",
    "@aws-amplify/react-native": "^1.0.24",
    "@aws-amplify/rtn-push-notification": "1.2.5",
    "@aws-amplify/ui-react-native": "2.0.3",
    "@expo/metro-config": "^0.10.7",
    "@expo/ngrok": "4.1.0",
    "@jest/globals": "29.7.0",
    "@managedhealth/bac-rn-module": "^1.0.1",
    "@react-native-async-storage/async-storage": "^1.21.0",
    "@react-native-community/netinfo": "^11.0.1",
    "@react-native-community/slider": "4.4.2",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "6.9.13",
    "@testing-library/react": "14.0.0",
    "@testing-library/react-hooks": "8.0.1",
    "@types/jest": "29.5.5",
    "@types/node": "^20.11.19",
    "@types/react-native-calendar-picker": "7.0.4",
    "@types/react-native-vector-icons": "6.4.15",
    "apollo-upload-client": "17.0.0",
    "aws-amplify": "6.0.2",
    "browserstack-node-sdk": "^1.32.0",
    "clsx": "2.0.0",
    "dotenv": "^16.4.5",
    "expo": ">=50.0.0-0 <51.0.0",
    "expo-constants": "14.4.2",
    "expo-dev-client": "~2.4.13",
    "expo-file-system": "~15.4.5",
    "expo-image-manipulator": "~11.3.0",
    "expo-local-authentication": "~13.4.1",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "graphql": "16.8.1",
    "haversine": "1.1.1",
    "mobx": "6.10.2",
    "mobx-react-lite": "4.0.4",
    "mocha": "^10.3.0",
    "moment": "2.29.4",
    "nativewind": "2.0.11",
    "react": "18.2.0",
    "react-hook-form": "7.47.0",
    "react-native": "0.73.6",
    "react-native-blob-util": "^0.19.6",
    "react-native-calendar-picker": "7.1.4",
    "react-native-device-info": "^10.12.0",
    "react-native-dotenv": "3.4.9",
    "react-native-encrypted-storage": "4.0.3",
    "react-native-geocoding": "0.5.0",
    "react-native-geolocation-service": "5.3.1",
    "react-native-get-random-values": "~1.9.0",
    "react-native-keychain": "8.1.2",
    "react-native-maps": "1.7.1",
    "react-native-pdf": "^6.7.4",
    "react-native-permissions": "^4.0.1",
    "react-native-safe-area-context": "^4.8.2",
    "react-native-screens": "^3.28.0",
    "react-native-url-polyfill": "2.0.0",
    "react-native-uuid": "2.0.1",
    "react-native-vector-icons": "10.0.0",
    "react-native-vision-camera": "3.1.0",
    "selenium-webdriver": "4.10.0",
    "util": "0.12.5",
    "webdriverio": "^8.33.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "7.20.0",
    "@faker-js/faker": "^8.4.1",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/apollo-upload-client": "17.0.4",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "18.0.0",
    "babel-jest": "29.6.3",
    "eslint": "8.19.0",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "3.3.2",
    "ts-node": "^10.9.2",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  },
  "private": true,
  "resolutions": {
    "wrap-ansi": "7.0.0",
    "string-width": "4.1.0"
  }
}

Did you manage to solve it?

@CCB-cerivera
Copy link

@PaulCunningham697 I finally got over this by matching the babel versions in my dependency declarations to the correct metro versions. What do you have for those?

Can you share your package.json please.

@PaulCunningham697
Copy link

@CCB-cerivera here's my package.json and I'm not seeing the issue anymore

 "dependencies": {
    "@expo/config-plugins": "~7.8.0",
    "@expo/vector-icons": "^14.0.0",
    "@gorhom/bottom-sheet": "^4",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-native-firebase/analytics": "^18.3.0",
    "@react-native-firebase/app": "^18.3.0",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/material-top-tabs": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "@sentry/react-native": "5.19.1",
    "@tanstack/query-async-storage-persister": "^4.29.7",
    "@tanstack/react-query": "^4.29.25",
    "@tanstack/react-query-persist-client": "^4.29.7",
    "babel-plugin-module-resolver": "^5.0.0",
    "date-fns": "^2.30.0",
    "deepmerge": "^4.3.1",
    "expo": "^50.0.14",
    "expo-application": "~5.8.3",
    "expo-av": "~13.10.5",
    "expo-build-properties": "~0.11.1",
    "expo-calendar": "~12.2.1",
    "expo-constants": "~15.4.5",
    "expo-dev-client": "~3.3.11",
    "expo-device": "~5.9.3",
    "expo-doctor": "^1.5.0",
    "expo-file-system": "~16.0.8",
    "expo-font": "~11.10.3",
    "expo-image": "1.10.6",
    "expo-intent-launcher": "~10.11.0",
    "expo-linear-gradient": "~12.7.2",
    "expo-linking": "~6.2.2",
    "expo-localization": "~14.8.3",
    "expo-network": "~5.8.0",
    "expo-router": "~3.4.8",
    "expo-screen-orientation": "~6.4.1",
    "expo-sharing": "~11.10.0",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-tracking-transparency": "~3.3.0",
    "expo-updates": "~0.24.12",
    "i18next": "22.0.2",
    "lodash.debounce": "^4.0.8",
    "lodash.groupby": "^4.6.0",
    "lodash.sortby": "^4.7.0",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.2.2",
    "react-native": "0.73.6",
    "react-native-animated-dots-carousel": "^1.0.2",
    "react-native-dropdown-picker": "^5.4.6",
    "react-native-element-dropdown": "^2.9.0",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-pager-view": "6.2.3",
    "react-native-paper": "^5.12.3",
    "react-native-reanimated": "~3.6.2",
    "react-native-reanimated-carousel": "^3.3.2",
    "react-native-render-html": "^6.3.4",
    "react-native-root-toast": "3.4.0",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-tab-view": "^3.5.1",
    "react-native-vector-icons": "^10.0.0",
    "react-native-webview": "13.6.4"
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/plugin-transform-modules-commonjs": "^7.21.5",
    "@babel/preset-env": "^7.21.5",
    "@tanstack/eslint-plugin-query": "^5.28.6",
    "@testing-library/jest-native": "^5.4.2",
    "@testing-library/react-native": "^10.1.1",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.11.30",
    "@types/react": "~18.2.71",
    "@types/react-test-renderer": "^18.0.7",
    "@typescript-eslint/eslint-plugin": "^6.1.0",
    "@typescript-eslint/parser": "^6.1.0",
    "babel-jest": "^29.7.0",
    "babel-preset-expo": "^10.0.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-native": "^4.0.0",
    "eslint-plugin-react-native-a11y": "^3.3.0",
    "eslint-plugin-simple-import-sort": "^12.0.0",
    "jest": "^29.3.1",
    "jest-expo": "~50.0.4",
    "metro-react-native-babel-preset": "^0.77.0",
    "prettier": "3.2.5",
    "react-native-accessibility-engine": "^3.2.0",
    "react-test-renderer": "^18.2.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.0"
  },

@CCB-cerivera
Copy link

Thank you, I have verified and it still gives me the same error. Anything else you've tried as configuring babel.config.js or metro.config.js?

@janlonden
Copy link

janlonden commented Apr 10, 2024

I'm facing the same issue after updating from 0.71.8 to 0.73.6. Here are my NPM dependencies:

  "dependencies": {
    "@adyen/adyen-web": "^5.62.0",
    "@adyen/react-native": "^2.0.0-beta.2",
    "@expo-google-fonts/dm-serif-display": "^0.2.3",
    "@expo/webpack-config": "^19.0.1",
    "@gorhom/bottom-sheet": "^4.6.1",
    "@invertase/react-native-apple-authentication": "^2.3.0",
    "@notifee/react-native": "^7.8.2",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-native-clipboard/clipboard": "^1.14.0",
    "@react-native-community/netinfo": "11.1.0",
    "@react-native-firebase/analytics": "^19.1.2",
    "@react-native-firebase/app": "^19.1.2",
    "@react-native-firebase/app-check": "^19.1.2",
    "@react-native-firebase/app-distribution": "^19.1.2",
    "@react-native-firebase/auth": "^19.1.2",
    "@react-native-firebase/crashlytics": "^19.1.2",
    "@react-native-firebase/firestore": "^19.1.2",
    "@react-native-firebase/in-app-messaging": "^19.1.2",
    "@react-native-firebase/installations": "^19.1.2",
    "@react-native-firebase/messaging": "^19.1.2",
    "@react-native-firebase/perf": "^19.1.2",
    "@react-native-firebase/remote-config": "^19.1.2",
    "@react-native-google-signin/google-signin": "^11.0.1",
    "@react-native-seoul/masonry-list": "^1.4.2",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@rneui/base": "^4.0.0-rc.8",
    "@ronradtke/react-native-markdown-display": "^8.0.0",
    "@tanstack/query-async-storage-persister": "^5.29.1",
    "@tanstack/react-query": "^5.29.0",
    "@tanstack/react-query-persist-client": "^5.29.0",
    "apisauce": "^3.0.1",
    "date-fns": "^3.6.0",
    "dotenv": "^16.4.5",
    "expo": "^50.0.14",
    "expo-application": "^5.8.3",
    "expo-asset": "^9.0.2",
    "expo-blur": "^12.9.2",
    "expo-constants": "^15.4.5",
    "expo-device": "^5.9.3",
    "expo-file-system": "^16.0.8",
    "expo-font": "^11.10.3",
    "expo-linking": "^6.2.2",
    "expo-localization": "^14.8.3",
    "expo-location": "^16.5.5",
    "expo-modules-core": "^1.11.12",
    "expo-splash-screen": "^0.26.4",
    "expo-status-bar": "^1.11.1",
    "expo-task-manager": "^11.7.2",
    "fast-json-patch": "^3.1.1",
    "firebase": "^10.10.0",
    "geofire-common": "^6.0.0",
    "handlebars": "^4.7.8",
    "i18n-js": "^4.4.3",
    "i18next": "^23.10.1",
    "i18next-browser-languagedetector": "^7.2.1",
    "jwt-decode": "^4.0.0",
    "license-checker": "^25.0.1",
    "mobx": "^6.12.3",
    "mobx-react-lite": "^4.0.7",
    "mobx-state-tree": "^5.4.1",
    "ramda": "^0.29.1",
    "ramda-adjunct": "^4.1.1",
    "react": "18.2.0",
    "react-firebase-hooks": "^5.1.1",
    "react-i18next": "^14.1.0",
    "react-native": "0.73.6",
    "react-native-bootsplash": "^5.5.1",
    "react-native-date-picker": "^5.0.0",
    "react-native-deck-swiper": "^2.0.17",
    "react-native-device-info": "^10.13.1",
    "react-native-email-link": "^1.16.0",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-localization-settings": "^1.0.2",
    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "1.10.0",
    "react-native-permissions": "^4.1.5",
    "react-native-qrcode-svg": "^6.3.0",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-share": "^10.1.0",
    "react-native-svg": "14.1.0",
    "react-native-web-maps": "^0.3.0",
    "react-native-webview": "13.6.4",
    "reactotron-mst": "^3.1.9",
    "reactotron-react-js": "^3.3.14",
    "reactotron-react-native": "^5.1.6",
    "sp-react-native-in-app-updates": "^1.4.0",
    "tinycolor2": "^1.6.0",
    "validatorjs": "^3.22.1",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/cli-platform-ios": "^13.6.4",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@rnx-kit/metro-config": "^1.3.15",
    "@rnx-kit/metro-resolver-symlinks": "^0.1.35",
    "@types/i18n-js": "^3.8.9",
    "@types/jest": "^29.5.12",
    "@types/ramda": "^0.29.12",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "@types/tinycolor2": "^1.4.6",
    "@types/validatorjs": "^3.15.5",
    "@typescript-eslint/eslint-plugin": "^7.5.0",
    "@typescript-eslint/parser": "^7.5.0",
    "babel-jest": "^29.6.3",
    "babel-loader": "^9.1.3",
    "babel-plugin-module-resolver": "^5.0.0",
    "babel-plugin-root-import": "^6.6.0",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-fp": "^2.3.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-native": "^4.1.0",
    "expo-modules-autolinking": "^1.10.3",
    "fbjs-scripts": "^3.0.1",
    "jest": "^29.6.3",
    "jest-circus": "^29.7.0",
    "jest-environment-node": "^29.7.0",
    "jest-expo": "^50.0.4",
    "metro-config": "^0.80.8",
    "metro-source-map": "^0.80.8",
    "mocha": "^10.4.0",
    "patch-package": "^8.0.0",
    "postinstall-prepare": "^2.0.0",
    "prettier": "2.8.8",
    "query-string": "^9.0.0",
    "react-devtools-core": "^5.0.2",
    "react-dom": "^18.2.0",
    "react-native-web": "^0.19.10",
    "react-test-renderer": "18.2.0",
    "reactotron-core-client": "^2.9.3",
    "regenerator-runtime": "^0.14.1",
    "ts-jest": "^29.1.2",
    "typescript": "^5.3.0"
  }

@CCB-cerivera
Copy link

Did you manage to solve it? It's been 6 days now and I can't find a solution.

@CCB-cerivera
Copy link

Even without solving the problem, I share the error log:

{"type":"TransformError","lineNumber":0,"errors":[{"description":"node_modules\\react-native\\Libraries\\Components\\TextInput\\RCTInputAccessoryViewNativeComponent.js: C:\\Users \\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\react-native\\Libraries\\Components\\TextInput\\RCTInputAccessoryViewNativeComponent.js: NodePath has been removed so is read-only.","lineNumber":0}],"name":"S yntaxError","message":"node_modules\\react-native\\Libraries\\Components\\TextInput\\RCTInputAccessoryViewNativeComponent.js: C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\react-native\\Libraries\ \Components\\TextInput\\RCTInputAccessoryViewNativeComponent.js: NodePath has been removed so is read-only.","stack":"SyntaxError: C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\react-native\\Libra ries\\Components\\TextInput\\RCTInputAccessoryViewNativeComponent.js: NodePath has been removed so is read-only.\n at File.buildCodeFrameError (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@ba bel\\core\\lib\\transformation\\file\\file.js:202:12)\n at NodePath.buildCodeFrameError (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\traverse\\lib\\path\\index.js:98:21)\n at NodeP ath._assertUnremoved (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\traverse\\lib\\path\\removal.js:62:16)\n at NodePath.insertAfter (C:\\Users\\userNew\\Documents\\app2.0GH\\mo bile\\test2\\node_modules\\@babel\\traverse\\lib\\path\\modification.js:101:8)\n at NodePath.replaceWithMultiple (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\traverse\\lib\\path\\ replacement.js:57:22)\n at PluginPass.exit (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\babel-preset-expo\\node_modules\\@react-native\\babel-plugin-codegen\\index.js:170:32)\n at newFn (C :\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\traverse\\lib\\visitors.js:160:14)\n at NodePath._call (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@b abel\\traverse\\lib\\path\\context.js:46:20)\n at NodePath.call (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\traverse\\lib\\path\\context.js:36:17)\n at NodePath.visit (C:\\Users\\ userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\traverse\\lib\\path\\context.js:90:8)\n at TraversalContext.visitQueue (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modul es\\@babel\\traverse\\lib\\context.js:89:16)\n at TraversalContext.visitSingle (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\traverse\\lib\\context.js:65:19)\n at TraversalContext.v isit (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\traverse\\lib\\context.js:112:19)\n at traverseNode (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules \\@babel\\traverse\\lib\\traverse-node.js:22:17)\n at traverse (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\traverse\\lib\\index.js:52:34)\n at transformFile (C:\\Users\\userNew\\ Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\core\\lib\\transformation\\index.js:82:31)\n at transformFile.next (<anonymous>)\n at run (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2 \\node_modules\\@babel\\core\\lib\\transformation\\index.js:24:12)\n at run.next (<anonymous>)\n at C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\\node_modules\\@babel\\core\\lib\\transform-ast.js:23:33\n at Generator.next (<anonymous>)\n at evaluateSync (C:\\Users\\userNew\\Documents\\app2.0GH\\mobile\\test2\

@CCB-cerivera
Copy link

For those who have this problem, it is because there is some kind of conflict with 'babel-preset-expo', and [ 'module:@react-native/babel-preset', {useTransformReactJSXExperimental: true} , ] the solution was to remove @react-native/babel-preset and leave the expo one, after that I checked some libraries for incompatibility and it was solved.

@Pmmoks
Copy link

Pmmoks commented Jul 2, 2024

I can confirm it's a dependency issue indeed!

Adding the following Yarn resolutions:

    "@react-native/babel-preset@*": "npm:@react-native/babel-preset@^0.73.18",
    "@react-native/babel-plugin-codegen@*": "npm:@react-native/babel-plugin-codegen@^0.73.0",
    "@react-native/codegen@*": "npm:@react-native/codegen@^0.73.2",

fixed the issue for me. 🥳

@wojtekmaj What file did you make these changes in?

@pm2877
Copy link

pm2877 commented Jul 12, 2024

For those who have this problem, it is because there is some kind of conflict with 'babel-preset-expo', and [ 'module:@react-native/babel-preset', {useTransformReactJSXExperimental: true} , ] the solution was to remove @react-native/babel-preset and leave the expo one, after that I checked some libraries for incompatibility and it was solved.

This worked for me! Thank you for sharing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Fixed A PR that fixes this issue has been merged. Type: Upgrade Issue Issues reported from upgrade issue form
Projects
None yet
Development

No branches or pull requests