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

Question

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

您建议采取哪些措施来纠正此错误？

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

我在下面提供了我的 .eslintrc.json 和 package.json 文件。
但是，它们可能不足以重现错误。
所以这里有一个链接 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'被保留

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

npx eslint src

2。视觉工作室代码？ – 其他文本编辑器或 IDE：s？

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

虽然我使用的是 Visual Studio Code，但我还是邀请答案（和 其他文本编辑器和 IDE:s 的讨论）。 请注意——除了通过npm 正确安装 ESLint——你 还必须为您的特定安装插件/扩展 集成开发环境 (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。这个问题是重复的吗？

有人问我：我的问题是否与
Parsing Error The Keyword import is Reserved (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 包。 另一个问题显然不是关于 Create React App，而 我的问题是。 ⁴

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

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

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

4b。其他问题的任何答案都解决了我的问题吗？

在the Community FAQ index for Stack Overflow 中有一个链接到 what I can do when I think my question is not a duplicate，然后链接到 另一个post that (implicitly) defines when a question is a duplicate of another question。

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

所以关键问题是是否有这样的答案。

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

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

The accepted answer 不是 与我的情况相关，因为我仅在本地安装了 ESLint （不是全局的）。

对于所有其他答案，我尝试了建议的解决方案 我的可重复的例子，一一。 他们中的大多数都导致了与我的不同错误消息，但是 他们都没有解决我的问题——与两个自我回答相反 我已经在下面发布了。

---

虽然这两个问题中的错误消息是相同的 - 它们发生的原因明显不同。 我的结论是我的问题不是重复 Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint).

5。其他错误报告

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

参考文献

• What does MCVE mean – minimal, complete and verifiable example?
• Zip file containing the needed project files
• To install ESLint globally rather than locally (using npm install eslint --global) is not recommended
• VS Code ESLint extension
• In VS Code, add "eslint.nodePath": "C:\\Program Files\\nodejs", to settings.json
• Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)
• Create React App
• The react-scripts npm package
• How is ESLint integrated into Create React App?
• eslint-config-react-app
• @babel/eslint-parser
• The Community FAQ index for Stack Overflow
• What can I do when I think my question's not a duplicate?
• A post that (implicitly) defines when a question is a duplicate of another question
• The highest voted answer of other question
• The deprecated babel-eslint package
• Installing ESLint globally might be a bad idea
• Parsing error: The keyword 'export' is reserved
• Parsing error: The keyword 'import' is reserved
• ERROR: Parsing Error: The keyword 'const' is reserved
• eslint: error Parsing error: The keyword 'const' is reserved
• Setting up Airbnb ESLint with React and Webpack
• Parsing error: The keyword 'enum' is reserved
• ESLint Parsing error: Unexpected token

---

¹ 由于it is recommended to install ESLint locally， 我假设这里的所有读者都这样做。

² 就我而言，Google Chrome 版本 98.0.4758.102，64 位。 在 Windows 10 上运行。

³ 除了安装扩展，我还有 added "eslint.nodePath": "C:\\Program Files\\nodejs", to my (user) settings.json VS 代码中的文件。没有其他变化。

⁴ 我在我的问题中添加了create-react-app 标签。

Answer 1

这是一个简单的解决方案——只需将 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）仍然打开，请确保 在您期望看到错误消失之前重新启动它！

参考文献

• Another solution to Parsing error: The keyword 'import' is reserved
• Suggesting to have ESLint rules in package.json under eslintConfig
• Installation of ESLint using npm
• ESLint may get installed even if not explicitly mentioned in package.json

---

¹ 我从this post 那里得到了这个想法。

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

³ A. 如果你怀疑你可能有一个 global 安装的 ESLint， 首次运行：
npm uninstall eslint --global

B.如果你已经运行了npm install——按照第 6 行的建议 问题 - 那么你不应该需要运行 npm install eslint --save-dev 安装 ESLint。
因为第一个npm install也安装了 ESLint，因为我 写this answer的时候发现的。

Answer 2

0。先决条件

如果服务器正在运行，点击关闭它 Ctrl+C.

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

npm list --global --depth 0

如果ESLint是全局安装的，运行卸载：

npm uninstall eslint --global

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

1. 本地安装 ESLint。

2. 创建一个正常工作的.eslintrc.json 文件。

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

1. 将所有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.
下面的部分有点简洁，所以如果你想要更多的肉 骨头，去访问that other answer。

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

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

A.全局安装npm-check-updates

在命令行中，运行：

npm install --global npm-check-updates

B.更新 package.json 以包含最新版本

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

npm-check-updates --upgrade

这是它在 Windows 10 中的样子：

C.安装最新版本

在命令行中，运行：

npm install

D.检查浏览器和/或终端中的错误

在命令行中，运行：

npm start

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

不舒服，嗯？

是的，当然！ – 但不要放弃希望！ 只需关闭服务器 (Ctrl+C) 再试一次 一遍又一遍。
昨天当我遇到这些错误时，我需要做的就是运行 npm start 再来一次。
今天我尝试运行npm start 4-5 次，但仍然得到 错误。
于是我试了两次npm install && npm start，终于成功了 运行没有错误。
不知道发生了什么。也许需要一段时间才能起作用？

浏览器终于​​没有错误了。

终端显示编译成功！

耶！ ⁴

结论

按照上述步骤帮助我纠正了问题中的错误 标题：
解析错误：关键字“import”被保留。

对于设置稍有不同的项目，⁵ 只需 从上面的.eslintrc.json 文件复制粘贴不太可能 工作。
运行npm init @eslint/config 并升级所有软件包更多 可能会成功。

参考文献

• npm – get a list of globally installed packages
• Installation of ESLint using npm
• Start using @eslint/config in your project
• When should I use @babel/eslint-parser?
• Update all npm packages to their latest versions
• Update all current packages to their lastest versions
• npm-check-updates – documentation

---

¹ 我在 Windows 10 上，但我希望所有命令 此处提供的内容在 Linux 和 macOS 上都可以正常工作。

² A. 预计此命令大约需要 5-10 分钟才能完成。
B. 只要你的源代码没有被 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。