node_modules/react-native/index.js 中的 React Native SyntaxError: Unexpected token, expected "{" (13:7) on Android Build答案

【问题标题】：React Native SyntaxError in node_modules/react-native/index.js: Unexpected token, expected "{" (13:7) on Android Buildnode_modules/react-native/index.js 中的 React Native SyntaxError: Unexpected token, expected "{" (13:7) on Android Build
【发布时间】：2020-08-15 15:44:25
【问题描述】：

我已经初始化了一个 react-native-project 并将其转换为使用 TypeScript。我还将项目设置为编译为 web、android 和 ios。安装了 Webpack 以启动 Web 版本。我在 Web 和 iOS 上一切正常，但是当我运行 yarn android 并构建到 android 时，我在 Metro 窗口和来自 node_modules 下 react-native 项目中的 index.js 文件的 android 模拟器上收到语法错误。

这只发生在 Android 上。我已经安装了许多 babel 插件和预设，所以我不确定为什么这个 index.js 文件不适用于 Android，但在 iOS 上可以正常工作。任何帮助都会很棒。我已将项目上传到公共存储库中。

我在 github 存储库中提供了启动项目，因此您可以下载我的确切设置。 https://github.com/hybridmindset/liveapp

我正在运行 Mac OS 版本 Catalina 10.15.4 节点 v14.0.0

Metro server window with Error

Android Simulator Window with Error

【问题讨论】：

你解决了吗？我遇到了同样的问题，但使用的是 iOS。
有趣的是，我的项目的主分支也有这个问题，上周构建得很好，并产生了一个当前正在生产的包。这让我认为问题出在工具的状态，而不是其配置。
重新克隆 rep 并将 babel 设置为默认值为我解决了这个问题。

标签： typescript react-native react-native-android

【解决方案1】：

我遇到了同样的问题，但@mukesh 的解决方案为我解决了。

我将我的 react-native 更新到版本 0.67.2，并将 @babel/preset-env 和 @babel/preset-flow 添加到我的 babel.config.js

【讨论】：

【解决方案2】：

你可能错过了

config{
    ...
    externals : {
        'react': 'React',
        'react-native': true,
    },

在webpack.config.js

【讨论】：

【解决方案3】：

如果您在升级到 React Native 0.63 时遇到此问题，此 PR 中的讨论可能适合您：https://github.com/facebook/react-native/pull/29477

根据您的情况，在 Xcode 中更新您的 Bundle React Native 代码和图像 构建阶段以在顶部设置此环境变量可能就足够了：

PROJECT_ROOT="$SRCROOT/.."

或者，您可以使用https://github.com/ds300/patch-package 应用上述 PR 中的更改。

【讨论】：

【解决方案4】：

这可能会有所帮助。这是我的.babelrc： { “预设”：[ "@babel/preset-env", "@babel/preset-react", “@babel/预设流” ] }

https://github.com/babel/babel/issues/9351

【讨论】：

查看我的 repo 中的 babel.config。我已经在使用这些预设，但它仍然无法正常工作。我的问题看起来和你的不一样。感谢您的评论。