Parsing error: The keyword 'import' is reserved

Question

在Visual Studio代码中我得到 Parsing error: The keyword 'import' is reserved.

您建议采取什么措施来纠正此错误？

0。一个最小的、完整的和可验证的例子

我在下面提供了我的 .eslintrc.json 和 package.json 文件。
但是，它们可能不足以重现错误。
所以这是一个 link 到 a zip file containing all the necessary project files.

要在本地安装项目，运行 npm install。 - 这可能大约需要 5-9 分钟。 ¹
然后 npm start 应该在默认的网络浏览器中打开项目。 ²

当我执行此操作并按 F12 时，我没有收到任何错误，但有两个错误浏览器控制台中的警告。

警告是：

'unUsedArgument' is defined but never used. Allowed unused args must match /^_/u no-unused-vars，以及
'unUsedVariable' is assigned a value but never used. Allowed unused vars must match /^_/u no-unused-vars.

1。解析错误：关键字'import'被保留

标题错误与我选择的文字无关编辑.
这很容易通过命令行中的运行ning ESLint 确认。

npx eslint src

2。 Visual Studio代码？ – 其他文本编辑器或 IDE:s?

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

虽然我使用的是Visual Studio代码，但我邀请回答（和讨论）和其他文本编辑器以及 IDE:s。请注意 - 除了通过 npm 正确安装 ESLint - 你还必须为您的特定安装 plugin/extension 集成开发环境(IDE).
在我的例子中，我使用 official VS Code ESLint extension。 ³

不过，这里的重点显然应该放在 npm 命令和 Node.js 软件包的安装。

3。我的可重现示例的配置文件

package.json :

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

.eslintrc.json :

{
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

4。这个问题是重复的吗？

有人问我：我的问题是否与
重复解析错误关键字导入被保留 (SublimeLinter-contrib-eslint)?

我认为我的问题不是那个问题的重复。

我的问题package.json的来源来自 Create React App 通过命令
npx create-react-app <the-name-of-my-app>.

另一题的package.json漏了 react-scripts 每个 Create React App 都必须拥有的 npm 包。另一个问题显然 not 关于 Create React App，而我的问题是。 ⁴

4a。 ESLint 是如何集成到 Create React App 中的？

正如所解释的那样，一个 创建 React App 直接依赖于 react-scripts 包。

react-scripts包又依赖于 eslint-config-react-app 包，这又取决于 @babel/eslint-parser 包。我将在下面回到后者。

4b。其他问题的答案是否解决了我的问题？

在the Community FAQ index for Stack Overflow中有一个link what I can do when I think my question is not a duplicate，这又 links 另一个 post （隐含地）定义问题何时是另一个问题的副本.

总而言之，判断一个问题是否重复的关键标准是任何其他问题的答案提供了我的解决方案自己的问题。

所以关键问题是有没有这样的答案.

首先，是已过时，因为它建议安装 the deprecated babel-eslint package。该软件包的作者明确指示使用后继包 @babel/eslint-parser 而不是 babel-eslint.

安装已弃用的 babel-eslint 软件包会更加我的 Create React App 示例中存在问题，因为 @babel/eslint-parser 已经安装。我不能接受同时安装两个不同的建议 ESLint Parser 的版本（其中一个已弃用）。

不是与我的情况相关，因为我只在本地安装了 ESLint （不是全球）。

对于所有其他答案我尝试了建议的解决方案我的可重现示例，一个接一个。他们中的大多数导致了与我的 不同的 错误消息，但是 none 其中解决了我的问题——相反 self-answers 我在下面 posted。

虽然两个问题的错误信息是一样的—— 它们发生的原因 明显不同。我的结论是我的问题不是的重复解析错误关键字导入被保留 (SublimeLinter-contrib-eslint).

5。其他错误报告

在下面列表的参考文献 18-24 中，我 link 之前的一些报告这里的错误——或类似的错误。其中一些 links（问题）可能与这里的问题有关，但可能不是全部。

参考资料

^{¹
由于 it is recommended to install ESLint locally，
我假设这里的所有读者都这样做。
²
在我的例子中 Google Chrome 版本 98.0.4758.102，64 位。
运行在 Windows 10.
³
除了安装扩展，我有
已添加"eslint.nodePath": "C:\Program Files\nodejs",
给我的（用户）settings.json
VS 代码中的文件。没有其他变化。
⁴
我在我的问题中添加了 create-react-app 标签。}

Answer 1

0。先决条件

如果服务器是运行ning，点击关闭 Ctrl+C.

我强烈建议卸载任何全局安装 ESLint.
要查看安装了哪些全局包，请在命令行运行中： ¹

npm list --global --depth 0

如果ESLint是全局安装的，通过运行ning:

卸载

npm uninstall eslint --global

要将 ESLint 正确安装到您的本地项目中，我建议执行以下两个步骤。

本地安装 ESLint。
创建一个正常工作的 .eslintrc.json 文件。

事实证明，您还需要执行第三步。

将所有 npm 软件包更新到最新版本。

1。本地安装 ESLint

要在本地安装 ESLint，运行： ²

npm install eslint --save-dev

这将添加

  ,
  "devDependencies": {
    "eslint": "^7.32.0"
  }

在 package.json 的结尾。

2。创建一个 `.eslintrc.json` 有效的文件

注意！ 在继续之前，保存一份您的副本，帮自己一个忙当前 .eslintrc.json 文件，因为下一个命令将销毁（重新创建）那个文件。

要创建一个新的 .eslintrc.json 文件，运行:

npm init @eslint/config

你会被问到一些问题，我会按 输入选择默认，除了为格式我选择 JSON（而不是 JavaScript）。

除了创建 .eslintrc.json 文件外，这还将添加 "eslint-plugin-react": "^7.29.2" 属性下 devDependencies 到 package.json 文件。 ³

命令npm init @eslint/config销毁现有的 .eslintrc.json 文件，因此您必须手动添加任何 "rules" 或您要保留的其他 JSON 设置。
在这种情况下，我添加回原来的规则 .eslintrc.json.
结果如下。

.eslintrc.json :

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

现在当我打开 VS Code 时，没有出现错误而是出现了两个警告，这正是期望的结果。

太棒了！但是等等——不幸的是里面有一只苍蝇软膏。问题是，当我现在运行 npm start 打开项目时 Web 浏览器并点击 F12，出现两个错误控制台。
错误消息是：

Uncaught ReferenceError: process is not defined，以及
Line 0: Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context.

幸运的是，我已经发布了解决这个问题的方法，即：
Update all npm packages to their latest versions.
下面的部分有点简洁，所以如果你想要更多的内容 bones，去拜访that other answer.

将所有 `npm` 个软件包更新到最新版本

考虑将所有 npm 软件包更新到最新版本。
目的是降低发生版本冲突的风险。
更新所有包的建议也已在 this answer.

一个。全局安装 npm-check-updates

在命令行中，运行:

npm install --global npm-check-updates

乙。更新 package.json 以包含最新版本

以下命令将最新的包版本号写入你的 package.json:

npm-check-updates --upgrade

这是 Windows 10 中的样子：

C。安装最新版本

在命令行中，运行:

npm install

D.在终端

中检查浏览器中的错误and/or

在命令行中，运行:

npm start

浏览器和终端现在都显示五个错误。

不舒服吧？

当然可以！ – 但不要放弃希望！ 关闭服务器（Ctrl+C）然后重试一遍又一遍。
昨天当我收到这些错误时，我需要做的就是运行 npm start 再次。
今天又试了4-5次运行ningnpm start，还是得到了错误。
所以我试了两次npm install && npm start，终于成功了运行没有错误。
不确定发生了什么。也许需要一段时间才能生效？

浏览器终于没有错误。

终端显示编译成功！

耶！ ⁴

结论

按照上面的步骤帮我修正了问题中的错误标题：
解析错误：关键字'import'被保留。

对于设置稍有不同的项目，⁵只是上面 .eslintrc.json 文件中的 copy-pasting 不太可能工作。
运行 npm init @eslint/config 并且升级所有包更多很有可能会成功。

参考资料

¹ 我在 Windows 10，但我期待所有命令此处提供的功能在 Linux 和 macOS 上同样有效。

² A. 预计此命令大约需要 5-10 分钟才能完成。
B. 只要你的源码是not t运行sformed by Babel, 没有理由安装@babel/eslint-parser。正常 eslint 应该就足够了。参见 When should I use @babel/eslint-parser?
如果您使用的是 TypeScript，那么您将需要 @babel/eslint-parser.
安装命令是：
npm install eslint @babel/core @babel/eslint-parser --save-dev
应使用 npm init @eslint/config 配置命令与普通 (non-@babel) ESLint.

的方式相同

³ package.json中的"eslint-plugin-react"属性不过好像关系不大。

⁴ 这两个警告仍然出现在文本编辑器中 – 正如他们应该的那样。

⁵ 例如，您可能使用 Angular 或 Vue 而不是 React。

Answer 2

这是一个简单的解决方案——只需将 rules 属性从 .eslintrc.json 到 package.json 的 eslintConfig 属性。 ¹

并且不保留.eslintrc.json。 删掉就好了！ ²

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

package.json :

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

就是这样！ ³

检查是否成功:

npx eslint . --ext .js

期待看到：

没有错误。 – 耶！

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

参考资料

¹ 我的想法来自 this post。

² 也不要运行 npm init @eslint/config。
如果您不删除 .eslintrc.json!

，错误将持续存在

³ A. 如果您怀疑您可能安装了 global ESLint，首先运行:
npm uninstall eslint --global

乙。如果您已经运行 npm install – 按照第 6 行的建议问题 – 那么你不需要运行 npm install eslint --save-dev 安装 ESLint。
因为第一个npm install也安装了ESLint，像我写.

时发现

Parsing error: The keyword 'import' is reserved