React Native：SyntaxError：严格模式不允许在词法嵌套语句中声明函数

Posted 2023-03-15

【中文标题】React Native：SyntaxError：严格模式不允许在词法嵌套语句中声明函数

【英文标题】：React Native: SyntaxError: Strict mode does not allow function declarations in a lexically nested statement

【发布时间】：2016-03-26 02:13:32

【问题描述】：

从 React Native 0.22.2 升级并升级一些插件后，我开始在 ios 上遇到此错误。我已经尝试降级并重新安装所有内容，但我无法摆脱修复它。其他人遇到过这个：

SyntaxError: Strict mode does not allow function declarations in a lexically nested statement.

更新 #1：

除了还原模块之外，我还注释掉了任何 'use strict';

我更新的东西之一是 npm 和 node。我正在运行节点 v5.3.0 和 npm v3.8.3。我不记得我有什么版本...

更新 #2：

我在 react native 中使用了一些模块：

"dependencies": 
  "deep-freeze": "github:substack/deep-freeze",
  "react": "^0.14.7",
  "react-native": "^0.22.2",
  "react-native-activity-view": "^0.2.8",
  "react-native-animated-progress-bar": "^1.0.0",
  "react-native-audio": "^1.0.0",
  "react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
  "react-native-device-info": "^0.9.1",
  "react-native-fs": "^1.2.0",
  "react-native-html-to-pdf": "^0.1.2",
  "react-native-in-app-utils": "^2.3.0",
  "react-native-mail": "^0.2.4",
  "react-native-passcode-auth": "^1.0.0",
  "react-native-router-flux": "^2.3.13",
  "react-native-save-asset-library": "^1.0.0",
  "react-native-touch-id": "^1.2.4",
  "react-native-transfer": "^1.0.2",
  "react-native-utils": "^1.0.1",
  "react-native-webkit-localstorage-reader": "^1.0.0",
  "react-redux": "^3.1.2",
  "redux": "^3.0.5",
  "redux-thunk": "^2.0.1"

更新 #3

考虑到降级到 React Native 0.21.0 可以解决这个问题，我做了以下事情：

已删除node_modules 文件夹 将 package.json 的 react-native 版本从 0.22.2 更改为 0.21.0 并删除了 react 条目（我认为这只是 0.22.2 的要求）。 跑npm install 跑npm start --reset-cache 打开 xcode 并在模拟器上运行应用程序。

不幸的是，我仍然遇到同样的错误。为了确保它不是我的项目外部的东西，我创建了一个全新的 react-native 项目并且它运行良好（即使使用 react native 0.22.2）。所以这与我的项目有关，但我无法终生弄清楚我做了什么导致这个。 :(

【问题讨论】：

您可以尝试清除打包程序缓存（npm start -- --reset-cache），它应该可以在降级后再次工作。

@Tom Krones，你能解决这个问题吗？如果是这样，请您发布解决方案吗？

@JanicDuplessis 当我写“npm start -- --reset-cache”时，节点说它缺少启动脚本？

【参考方案1】：

出现这个错误是因为 babel 现在向所有模块添加了 'use strict'。而且它不允许在像if这样的词法块内定义函数

如果错误来自库，您可以尝试找出导致错误的原因并将其添加到 .babelignore 文件中。

您还可以使用 .babelrc 文件完全禁用严格模式

  "plugins": [
    "syntax-async-functions",
    "syntax-class-properties",
    "syntax-trailing-function-commas",
    "transform-class-properties",
    "transform-es2015-arrow-functions",
    "transform-es2015-block-scoping",
    "transform-es2015-classes",
    "transform-es2015-computed-properties",
    "transform-es2015-constants",
    "transform-es2015-destructuring",
    ["transform-es2015-modules-commonjs",  "strict": false, "allowTopLevelThis": true ],
    "transform-es2015-parameters",
    "transform-es2015-shorthand-properties",
    "transform-es2015-spread",
    "transform-es2015-template-literals",
    "transform-flow-strip-types",
    "transform-object-assign",
    "transform-object-rest-spread",
    "transform-react-display-name",
    "transform-react-jsx",
    "transform-regenerator",
    ["transform-es2015-for-of",  "loose": true ]
  ]

注意：确保清除打包程序缓存 (npm start -- --reset-cache) 以确保再次运行所有转换。

【讨论】：

感谢您的帮助。 “transform-es2015-modules-commonjs”是您禁用严格模式的插件示例，还是将对所有插件禁用它？我尝试创建一个 .babelrc 文件，但 OSX 不允许我创建一个以“。”开头的文件。为操作系统保留。这个babeljs.io/docs/usage/babelrc/#use-via-package-json 谈到了向 package.json 添加 babel 选项，所以我这样做了，但是在运行 npm start --reset-cache 之后它什么也没做。我希望错误更具体。我不知道坏代码是我的还是来自 react 本机模块。

transform-es2015-modules-commonjs 是自动向每个模块添加“使用严格”的插件，通过传递选项 strict: false 它不会再这样做了。不知道为什么你不能创建一个 .babelrc 文件，但你总是可以在终端中使用 touch .babelrc 来创建它。除了 react-native，你还使用其他库吗？如果你不这样做，错误应该在你的代码中。我同意错误消息真的很糟糕，不确定我们是否可以做些什么来改进它:(。

酷。我不知道touch 命令，它可以毫无问题地创建文件。不幸的是，它并没有解决问题。我删除了我所做的 package.json 更改，但删除了 .babelrc 中的严格模式并运行 npm start --reset-cache 并没有这样做。我在上面的这个应用程序中添加了我使用的模块列表（这是一个很长的列表）。我想我可以将它们全部删除，看看它是否能构建，然后一次添加一个......

显然覆盖插件不能正常工作，不知道为什么它在我上次测试时工作。您可以尝试指定 react-native babel 预设中的所有插件。我会更新我的答案。

我将与 react-native 团队核实，看看我们是否要恢复为默认不使用严格模式，因为它可能会导致此类难以发现的问题，并且可能由以下原因引起库，至少在覆盖 babel 插件配置正常工作之前。