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

facebook / react-native

A framework for building native applications using React

https://reactnative.dev

MIT License

118.49k stars 24.26k forks source link

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

Closed wojtekmaj closed 8 months ago

wojtekmaj commented 9 months ago

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

Run the updated app on iOS simulator
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

github-actions[bot] commented 9 months ago

:warning:	Missing Reproducible Example
:information_source:	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 commented 9 months ago

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)

wojtekmaj commented 9 months ago

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 commented 9 months ago

That would be bad. Who depends on *?

wojtekmaj commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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: https://github.com/facebook/react-native/blob/c75abefea6d553ba90a2d63ea6351845236712a5/packages/babel-plugin-codegen/package.json#L28

cortinico commented 9 months ago

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 commented 9 months ago

0.74.0? Not 0.73.x?

lunaleaps commented 9 months ago

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

https://github.com/facebook/react-native/pull/42081 for main

cortinico commented 8 months ago

@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 commented 8 months ago

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!

airowe commented 6 months ago

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

PaulCunningham697 commented 6 months ago

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 commented 6 months ago

@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 commented 6 months ago

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"
  }
}