WebStorm中Next.js项目出现ESLint TypeError问题求助

环境信息 #

• WebStorm版本：2022.2.1（Build #WS-222.3739.57）
• Node.js版本：v16.15.1
• ESLint版本：8.23.0
• 项目devDependencies：

{
  "@types/node": "18.7.13",
  "@types/react": "18.0.17",
  "@types/react-dom": "18.0.6",
  "eslint": "8.23.0",
  "eslint-config-next": "12.2.5",
  "prisma": "^4.2.1",
  "typescript": "4.8.2"
}

• ESLint配置（.eslintrc.json）：

{
  "extends": "next/core-web-vitals"
}

报错详情 #

TypeError: this.libOptions.parse is not a function

TypeError: this.libOptions.parse is not a function
    at ESLint8Plugin.<anonymous> (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:139:64)
    at step (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:44:23)
    at Object.next (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:25:53)
    at C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:15:12)
    at ESLint8Plugin.invokeESLint (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:133:16)
    at ESLint8Plugin.<anonymous> (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:120:44)
    at step (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:44:23)
    at Object.next (C:\Program Files\JetBrains\WebStorm 2022.1.2\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint8-plugin.js:25:53)
Process finished with exit code -1

解决方案 #

• 升级WebStorm版本：报错路径显示IDE实际调用的是2022.1.2版本的ESLint插件，与当前安装的2022.2.1主程序存在版本不兼容问题。升级至WebStorm 2022.3及以上版本，该版本修复了ESLint 8.x系列的适配bug。
• 降级ESLint版本：若暂时无法升级IDE，可将项目ESLint版本降至8.20.0或更低，执行命令：

  npm install eslint@8.20.0 --save-dev
  

• 手动指定ESLint运行路径：进入WebStorm设置（File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint），将运行方式从Automatic切换为Manual，指定项目本地ESLint包路径（即node_modules/eslint/bin/eslint.js）。
• 清除IDE缓存：执行File > Invalidate Caches... > Invalidate and Restart，清除缓存后重新加载项目，避免插件缓存冲突导致的异常。

内容的提问来源于stack exchange，提问作者Thebluedragon