React Native：节点类型 SpreadProperty 已重命名为 SpreadElement

Question

我最近从 React Native 0.53.3 升级到 React Native 0.59.9，我的应用程序在模拟器中不断崩溃。它将显示初始屏幕，然后在 debugger-ui 内什么都没有崩溃，除了这个：

WebSocket 连接到 'ws://localhost:8081/debugger-proxy?role=debugger&name=Chrome' 失败： 连接建立错误：net::ERR_CONNECTION_REFUSED

我使用react-native run-ios 运行它，但构建在那里成功，所以没有错误消息。当我尝试在打开 Xcode 的同时打开应用程序时，它确实指的是无法找到 .jsbundle 文件的错误，并且在 Xcode 内部，我确实有一个红色的 main.jsbundle，表示它丢失了。

所以找到这篇文章后： https://medium.com/the-react-native-log/first-time-deploying-with-react-native-f524eb3e705d#59ee

我尝试使用引用此脚本的npm run build:ios 脚本来跟踪它：

"build:ios": "react-native bundle --entry-file='index.ios.js' --bundle-output='./ios/NFIBEngage/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"

但是当我运行它时，我得到了这个错误：

Loading dependency graph, done.
transform[stderr]: Trace: The node type SpreadProperty has been renamed to SpreadElement
transform[stderr]:     at Object.isSpreadProperty (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/types/lib/validators/generated/index.js:4304:11)
transform[stderr]:     at hasSpread (/Users/danale/Projects/engage-application.mobile/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js:38:13)
transform[stderr]:     at PluginPass.ObjectExpression (/Users/danale/Projects/engage-application.mobile/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js:234:14)
transform[stderr]:     at newFn (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/visitors.js:193:21)
transform[stderr]:     at NodePath._call (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/path/context.js:53:20)
transform[stderr]:     at NodePath.call (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/path/context.js:40:17)
transform[stderr]:     at NodePath.visit (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/path/context.js:88:12)
transform[stderr]:     at TraversalContext.visitQueue (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/context.js:118:16)
transform[stderr]:     at TraversalContext.visitSingle (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/context.js:90:19)
transform[stderr]:     at TraversalContext.visit (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/context.js:146:19)
error node_modules/react-native-keyboard-manager/index.js: Cannot read property 'bindings' of null. Run CLI with --verbose flag for more details.

与 SO 上的该错误相关的唯一帖子是以下帖子：

https://*.com/questions/53326986/trace-the-node-type-spreadproperty-has-been-renamed-to-spreadelement-at-object

它并不真正适用于我的情况。

问题似乎与node_modules 中的@babel 库有关，我曾尝试执行rm -rf node_modules，但这并没有解决它。

谁能确认这些开发依赖项之一是否不再支持该项目的当前版本？

"devDependencies": {
    "async": "2.6.0",
    "babel-cli": "6.24.1",
    "babel-eslint": "8.0.2",
    "babel-jest": "23.0.0",
    "babel-plugin-module-resolver": "3.0.0",
    "babel-preset-env": "1.4.0",
    "babel-preset-flow": "6.23.0",
    "babel-preset-react-native": "4.0.0",
    "babel-preset-stage-2": "6.24.1",
    "babel-watch": "2.0.6",

有没有人解决了升级到 React Native 0.59.9 的类似问题？

我了解到，在 RN 0.49 之后，我们使用 index.js 而不是 index.ios.js，我在创建模拟版本以尝试获取基线应用程序以试图弄清楚发生了什么时验证了这一点。

我做了以下事情：

✗ mv index.ios.js index.js
➜  engage-application.mobile git:(feature/3.6.2_upgrade) ✗ rm index.android.js
➜  engage-application.mobile git:(feature/3.6.2_upgrade) ✗ react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle --verbose
Loading dependency graph, done.
transform[stderr]: Trace: The node type SpreadProperty has been renamed to SpreadElement
transform[stderr]:     at Object.isSpreadProperty (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/types/lib/validators/generated/index.js:4304:11)
transform[stderr]:     at hasSpread (/Users/danale/Projects/engage-application.mobile/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js:38:13)
transform[stderr]:     at PluginPass.ObjectExpression (/Users/danale/Projects/engage-application.mobile/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js:234:14)
transform[stderr]:     at newFn (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/visitors.js:193:21)
transform[stderr]:     at NodePath._call (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/path/context.js:53:20)
transform[stderr]:     at NodePath.call (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/path/context.js:40:17)
transform[stderr]:     at NodePath.visit (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/path/context.js:88:12)
transform[stderr]:     at TraversalContext.visitQueue (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/context.js:118:16)
transform[stderr]:     at TraversalContext.visitSingle (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/context.js:90:19)
transform[stderr]:     at TraversalContext.visit (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/context.js:146:19)
error App.js: Cannot read property 'bindings' of null
debug TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (/Users/danale/Projects/engage-application.mobile/node_modules/@babel/traverse/lib/scope/index.js:864:13)
    at BlockScoping.updateScopeInfo (/Users/danale/Projects/engage-application.mobile/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)

不管怎样，我仍然会遇到同样的错误。

Answer 1

这里实际上有两个不同的问题。

WebSocket 连接到 'ws://localhost:8081/debugger-proxy?role=debugger&name=Chrome' 失败： 连接建立错误：net::ERR_CONNECTION_REFUSED

错误与端口 8081 已在使用中有关，因此我必须完全终止所有进程。

Babel 和一两个自定义包之间肯定存在一些依赖问题，主要是 react-native-keyboard-manager 和 react-native-input-scroll-view。我删除了这些并改用react-native 的ScrollView。

然后我能够成功运行：

react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle --verbose

这能够成功创建main.jsbundle，但不幸的是，这不是应用程序崩溃的根本原因，因为它仍在崩溃并且现在正在默默地这样做。