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

[wojtekmaj]

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

[github-actions]

⚠️	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]

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]

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]

That would be bad. Who depends on *?

[wojtekmaj]

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]

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]

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/packages/babel-plugin-codegen/package.json

Line 28 in c75abef

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

[cortinico]

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": "*"