[英]"Parsing error: The keyword 'import' is reserved"
在 Visual Studio Code 我得到Parsing error: The keyword 'import' is reserved 。
哪些操作可以修復此錯誤？
我在下面的第 2 節中提供了我的.eslintrc.json和package.json文件。
但是，它們可能不足以重現錯誤。
所以這里是一個包含所有必要項目文件的 zip 文件的鏈接。
要在本地安裝項目，請運行npm install 。 – 這可能需要大約 5-9 分鍾。 1
然后npm start應該在默認的 Web 瀏覽器中打開項目。 2
當我這樣做並點擊F12時，我沒有收到任何錯誤，但在瀏覽器的控制台中有兩個警告。
警告符合.eslintrc.json中的規則（下面的第 2 節）：
'unUsedArgument' is defined but never used. Allowed unused args must match /^_/u no-unused-vars '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 'unUsedVariable' is assigned a value but never used. Allowed unused vars must match /^_/u no-unused-vars 。
標題中的錯誤與我選擇的文本編輯器無關。
這很容易通過從命令行運行 ESLint 來確認。
npx eslint src
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": "^_"
}
]
}
}
當我在 VS Code 中打開App.js時，也會出現錯誤Parsing error: The keyword 'import' is reserved 。
雖然我使用的是 Visual Studio Code，但我也邀請其他文本編輯器和 IDE:s 的回答（和討論）。 請注意 - 除了通過npm正確安裝 ESLint - 您還必須為您的特定集成開發環境 (IDE) 安裝插件/擴展。
就我而言，我使用官方的 VS Code ESLint extension 。 3
盡管如此，這里的重點顯然應該放在安裝了哪些npm包上。
有人問我：我的問題是不是重復的
解析錯誤關鍵字導入被保留（SublimeLinter-contrib-eslint） ？
我相信我的問題不是那個問題的重復。
我的問題的package.json的起源來自通過命令創建 React App
npx create-react-app <the-name-of-my-app> 。
另一個問題的package.json缺少每個 Create React App必須具有的react-scripts npm 包。 另一個問題顯然與Create React App無關，而我的問題是。 4
正如這個答案所解釋的，一個Create React App直接依賴於react-scripts包。
react-scripts包又依賴於eslint-config-react-app包（以及許多其他包），而后者又依賴於@babel/eslint-parser包。 我將在下一小節中回到后一種依賴關系。
在Stack Overflow 的社區常見問題解答索引中，有一個鏈接指向當我認為我的問題不是重復問題時我可以做什么，該鏈接又鏈接到另一個帖子，該帖子（隱式）定義問題何時與另一個問題重復。
總之，一個問題是否重復的關鍵標准是另一個問題的任何答案是否為我自己的問題提供了解決方案。
所以關鍵問題是有沒有這樣的答案。
首先，投票最高的答案已經過時，因為它建議安裝已棄用的babel-eslint包。 該包的作者明確指示使用后繼包@babel/eslint-parser而不是babel-eslint 。
在我的Create React App示例中，安裝已棄用的babel-eslint包會更加成問題，因為@babel/eslint-parser已經安裝（通過eslint-config-react-app ）。 我不能接受同時安裝兩個不同版本的ESLint 解析器（其中一個已被棄用）的建議解決方案。 因此，對於我在這里提出的問題，最高投票的答案不是可接受的答案。
接受的答案與我的情況無關，因為我僅在本地（而不是全局）安裝了 ESLint。
對於所有其他答案，我在可重現的示例中一一嘗試了建議的解決方案。 他們中的大多數導致了與我不同的錯誤消息，但沒有一個解決了我的問題——與我在下面發布的兩個自我答案相反。
盡管兩個問題中的錯誤消息相同，但它們發生的原因明顯不同。 我得出結論，我的問題不是Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint) 的重復。
下面列表中的參考 18-24 是指向先前錯誤報告或類似錯誤的鏈接。
其中一些鏈接（問題）可能與這里的問題有關，但可能不是全部。
npm install eslint --global ） "eslint.nodePath": "C:\\Program Files\\nodejs",添加到settings.jsoneslint-config-react-app@babel/eslint-parserbabel-eslint包1由於推薦在本地安裝 ESLint ，我假設這里的所有讀者都這樣做。
2在我的情況下，Google Chrome 版本 98.0.4758.102，64 位。 在 Windows 10 上運行。
3除了安裝擴展之外，我還在 VS Code 中的（用戶） settings.json文件中添加了"eslint.nodePath": "C:\\Program Files\\nodejs", 。 沒有其他變化。
4我已將create-react-app標簽添加到我的問題中。
這是一個簡單的解決方案——只需將rules屬性從.eslintrc.json移動到package.json的eslintConfig屬性。 1
並且不要保留.eslintrc.json 。 刪除它！ 2
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"
]
}
}
而已！ 3
檢查您是否成功：
npx eslint . --ext .js
期待看到：
沒有錯誤。 -耶！
如果您的文本編輯器（在我的情況下為 VS Code）仍然打開，請確保在您期望看到錯誤消失之前重新啟動它！
package.json中有eslintConfig rulesnpm安裝 ESLintpackage.json中沒有明確提及 ESLint 也會被安裝 | 第 1 節1我從這篇文章中得到了這個想法。
2也不要運行npm init @eslint/config 。 如果您不刪除.eslintrc.json ，錯誤將持續存在！
3 A. 如果你懷疑你可能有 ESLint 的全局安裝，首先運行： npm uninstall eslint --global
B. 如果你已經運行npm install ——正如問題第 7 行所建議的那樣——那么你不需要運行npm install eslint --save-dev來安裝 ESLint。
原因是在package.json中有react-scripts意味着ESLint 是由npm install的。
這個答案的第 1 節告訴我們 ESLint 在react-scripts的依賴樹中。
如果服務器正在運行，請按Ctrl + C將其關閉。
我強烈建議卸載任何全局安裝的 ESLint。
要查看安裝了哪些全局包，請在命令行中運行： 1
npm list --global --depth 0
如果 ESLint 已全局安裝，請運行以下命令卸載：
npm uninstall eslint --global
要將 ESLint 正確安裝到本地項目中，我建議執行以下兩個步驟。
本地安裝 ESLint。
創建一個正常運行的.eslintrc.json文件。
事實證明，您還需要執行第三步。
npm包更新到最新版本。要在本地安裝 ESLint，請運行： 2
npm install eslint --save-dev
這將添加
,
"devDependencies": {
"eslint": "^7.32.0"
}
在package.json的末尾。
.eslintrc.json文件筆記！ 在繼續之前，請保存當前.eslintrc.json文件的副本，幫自己一個忙，因為下一個命令將銷毀（重新創建）該文件。
要創建一個新的.eslintrc.json文件，請運行：
npm init @eslint/config
您將被問到一些問題，我通過按Enter選擇默認值來回答這些問題，除了我選擇JSON （而不是JavaScript ）的格式。
除了創建.eslintrc.json文件之外，這還會將 devDependencies 下的"eslint-plugin-react": "^7.29.2"屬性devDependencies到package.json文件中。 3
命令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 。 幸運的是，我已經發布了這個問題的解決方案，即：
將所有npm包更新到最新版本。
下面的部分有點簡潔，所以如果你想要更多的骨頭上的肉，請訪問其他答案。
npm包更新到最新版本考慮將所有npm包更新到最新版本。
目的是降低發生版本沖突的風險。
此答案中還提出了更新所有軟件包的建議。
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 ，最后它運行沒有錯誤。
不知道發生了什么。 也許在它起作用之前必須經過一段時間？
最后瀏覽器沒有錯誤。
終端顯示編譯成功！
耶！ 4
按照上述步驟幫助我糾正了問題標題中的錯誤：
解析錯誤：關鍵字“import”被保留。
對於設置稍有不同的項目，從上面的.eslintrc.json文件中復制粘貼5不太可能起作用。
運行npm init @eslint/config並升級所有包更有可能成功。
npm – 獲取全局安裝包的列表npm安裝 ESLint@eslint/config@babel/eslint-parser ？npm包更新到最新版本npm-check-updates – 文檔1我使用的是 Windows 10，但我希望此處提供的所有命令在 Linux 和 macOS 上都能正常工作。
2 A. 預計此命令大約需要 5-10 分鍾才能完成。
B. 只要你的源代碼沒有被 Babel 轉換，就沒有理由安裝@babel/eslint-parser 。 只是普通eslint就足夠了。 請參閱何時應該使用@babel/eslint-parser ？
如果您使用的是 TypeScript，那么您將需要@babel/eslint-parser 。
要安裝的命令是：
npm install eslint @babel/core @babel/eslint-parser --save-dev
npm init @eslint/config配置命令應該以與普通（非-@babel）ESLint 相同的方式使用。
3 package.json中的"eslint-plugin-react"屬性似乎沒有太大的相關性。
4這兩個警告仍然顯示在文本編輯器中——就像它們應該出現的那樣。
5例如，您可能正在使用 Angular 或 Vue 而不是 React。
解析錯誤關鍵字導入被保留（SublimeLinter-contrib-eslint）
[英]Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)
從遠程倉庫中提取並獲取：“解析錯誤：保留關鍵字‘導入’”
[英]Pulled from remote repo and getting: “Parsing error: The keyword 'import' is reserved”
eslint: error Parsing error: 關鍵字 'const' 被保留
[英]eslint: error Parsing error: The keyword 'const' is reserved
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.