“解析错误：关键字‘import’被保留”

Question

0. 2023年4月：错误无法再重现

\n

该错误不再可重现。\n可能是因为React-scripts 5.0.1 中的错误修复。¹
\n尽管它不再可重现，但这个问题和我的自我回答似乎仍然对 Angular 用户以及其他可能的用户感兴趣。

\n

我将基本上保留这个问题，就像我在 2022 年 3 月提出这个问题时一样。

\n

包含 React 应用程序源文件的 zip 文件位于此处。\n与 2022 年相比，唯一的区别是我已将React-scripts版本 4.0.3 替换为 5.0.1。

\n

以下均指2022年3月

\n

在 Visual Studio Code 中，我得到\n Parsing error: The keyword \'import\' is reserved。

\n

采取什么措施可以修复此错误？

\n\n

我在下面的第 2 部分中提供了我的.eslintrc.json文件package.json。

\n

运行npm install以在本地安装项目。²
\n\xe2\x80\x93 这可能需要大约 1\xe2\x80\x939 分钟，具体取决于您的带宽和硬件。
\n然后npm start应该在默认 Web 浏览器中打开该项目。

\n

当我这样做并点击 时F12，我没有收到任何错误，但在浏览器的控制台中收到两个警告。

\n

这些警告符合.eslintrc.json（下文第 2 节）中的规则：

\n

\n

• \'unUsedArgument\' is defined but never used. Allowed unused args must match /^_/u no-unused-vars， 和

  \n
\n

• \'unUsedVariable\' is assigned a value but never used. Allowed unused vars must match /^_/u no-unused-vars。

  \n
\n

\n

\n

1.解析错误：关键字“import”被保留

\n

标题中的错误与我选择的文本编辑器无关。
\n通过从命令行运行 ESLint 可以轻松确认这一点。

\n

$ npx eslint src\n\xe2\x80\xa6 Parsing error: The keyword \'import\' is reserved \xe2\x80\xa6\n

\n

\n

2.配置文件

\n

package.json:

\n

$ npx eslint src\n\xe2\x80\xa6 Parsing error: The keyword \'import\' is reserved \xe2\x80\xa6\n

\n

.eslintrc.json:

\n

{\n  "name": "parsing-error",\n  "version": "0.1.0",\n  "dependencies": {\n    "@testing-library/jest-dom": "^4.2.4",\n    "@testing-library/react": "^9.4.1",\n    "@testing-library/user-event": "^7.2.1",\n    "react": "^17.0.2",\n    "react-dom": "^17.0.2",\n    "react-scripts": "4.0.3"\n  },\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "react-scripts build",\n    "test": "react-scripts test",\n    "eject": "react-scripts eject"\n  },\n  "eslintConfig": {\n    "extends": "react-app"\n  },\n  "browserslist": {\n    "production": [\n      ">0.2%",\n      "not dead",\n      "not op_mini all"\n    ],\n    "development": [\n      "last 1 chrome version"\n    ]\n  }\n}\n

\n

3. Visual Studio Code 中的错误

\n

Parsing error: The keyword \'import\' is reserved当我在 VS Code 中打开时，也会出现错误App.js。

\n

\n

我正在使用 Visual Studio Code。\n但是，正如已经指出的，选择文本编辑器或 IDE 并不重要。\n请注意，除了通过 \xe2\x80\x93 正确安装 ESLint 之外，还可以使用 \ npmxe2\x80\x93还必须为您的特定集成开发环境 (IDE) 安装插件/扩展。
\n就我而言，我使用官方 VS Code ESLint 扩展。

\n

参考

\n

\n
• 如何创建最小的、可重复的示例
\n
• 我的自我回答之一
\n
• 包含所需项目文件的 Zip 文件
\n
• 不建议全局安装 ESLint ( npm install eslint --global)
\n
• 创建反应应用程序
\n
• ESLint 如何集成到 Create React App 中
\n
• VS Code ESLint 扩展
\n
• 解析错误关键字导入被保留（SublimeLinter-contrib-eslint）
\n
• 反应脚本 npm 包
\n
• eslint-config-react-app
\n
• @babel/eslint-parser
\n
• Stack Overflow 的社区常见问题解答索引
\n
• 当我认为我的问题不重复时我该怎么办？
\n
• 问题重复的隐式定义
\n
• 其他问题得票最高的答案
\n
• 已弃用的babel-eslint包
\n
• 全局安装 ESLint 可能是个坏主意
\n
• 你绝对不应该react-scripts在全球范围内安装
\n

\n

---

\n \n

¹ \n当我最初问这个问题时，react-scripts 4.0.3 是最新版本。
\n如果我现在使用版本 4.0.3，那么我会收到与所提出的问题无关的其他错误。

\n

² \n建议在本地安装 ESLint。\n这就是Create React App 的作用。
\n有关 Create React App 如何使用 ESLint 的更多信息，请参阅这篇文章。\n您绝对不应该react-scripts全局安装。

\n \n

Answer 1

免责声明

\n

正如问题中所述，该错误无法再重现。
\n这意味着不再有任何有效的建议来解决该错误。
\n我保留答案的其余部分主要不变，以防其他人仍然觉得有帮助。^*

\n

原来的答案

\n

这是一个简单的解决方案 \xe2\x80\x93 只需将rules属性从\n移动.eslintrc.json到eslintConfig的属性package.json。\n ¹

\n

并且不要保留 .eslintrc.json。删除它吧！\n ²

\n

该package.json文件现在如下所示。

\n

package.json:

\n

{\n  "name": "parsing-error",\n  "version": "0.1.0",\n  "dependencies": {\n    "@testing-library/jest-dom": "^4.2.4",\n    "@testing-library/react": "^9.4.1",\n    "@testing-library/user-event": "^7.2.1",\n    "react": "^17.0.2",\n    "react-dom": "^17.0.2",\n    "react-scripts": "4.0.3"\n  },\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "react-scripts build",\n    "test": "react-scripts test",\n    "eject": "react-scripts eject"\n  },\n  "eslintConfig": {\n    "extends": "react-app",\n    "rules": {\n      "no-unused-vars": [\n        "warn",\n        {\n          "argsIgnorePattern": "^_",\n          "varsIgnorePattern": "^_"\n        }\n      ]\n    }\n  },\n  "browserslist": {\n    "production": [\n      ">0.2%",\n      "not dead",\n      "not op_mini all"\n    ],\n    "development": [\n      "last 1 chrome version"\n    ]\n  }\n}\n

\n

就是这样！\n ³

\n

检查您是否成功：\\

\n

npx eslint **/*.js\n

\n

期待看到：

\n

\n

没有错误。\xe2\x80\x93耶！

\n

如果您的文本编辑器（在我的例子中是 VS Code）仍然打开，请确保在看到错误消失之前重新启动它！

\n

参考

\n

\n
• 针对所提出问题的更麻烦的解决方案
\n
• 建议将 ESLintrules放在package.json下面 eslintConfig
\n
• 使用 ESLint 安装npm
\n
• ESLint\ 的新配置系统 \xe2\x80\x93 前进的道路
\n
• 即使 ESLint 中没有明确提及，它也会被安装 package.json
\n

\n\n \n

^* \n我改变的一件事是从命令行 \xe2\x80\x93 运行 ESLint 的命令具有对新文件（“平面配置”）以及旧配置文件npx eslint **/*.js都能正常工作的优点。eslint.config.js.eslintrc.*

\n

^{1 \n我从}这篇文章中得到了这个想法。

\n

² \n也不要运行npm init @eslint/config。\n如果不删除，错误将持续存在.eslintrc.json！

\n

³ \nA。如果您怀疑您可能全局安装了 ESLint，请首先运行：
\nnpm uninstall eslint --global

\n

B. 如果您已经按照npm install问题 \xe2\x80\x93 第 7 行的建议运行了 \xe2\x80\x93 那么您不需要运行来npm install eslint --save-dev安装 ESLint，因为react-scripts在package.json意味着运行时会安装 ESLintnpm install。

\n \n