JavaScript

eslint実行エラー"Error: Failed to load plugin 'vue' declared in '.eslintrc.cjs'"

この記事タイトルとURLをコピー

概要

eslint実行時にlintとは別のエラーが発生したのでその解消方法を共有します

この記事で分かること

以下エラーの解消方法

Error: Failed to load plugin 'vue' declared in '.eslintrc.cjs'

エラー内容

$ yarn lint:fix
yarn run v1.22.19
$ eslint --fix --ext .jsx,.js,.tsx,.ts,.vue .

Oops! Something went wrong! :(

ESLint: 8.20.0

Error: Failed to load plugin 'vue' declared in '.eslintrc.cjs': Cannot find module '../utils'
Require stack:
- /Users/hiroya/Documents/pg/my-vue-app/node_modules/eslint-plugin-vue/lib/rules/array-bracket-newline.js
- /Users/hiroya/Documents/pg/my-vue-app/node_modules/eslint-plugin-vue/lib/index.js
- /Users/hiroya/Documents/pg/my-vue-app/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
Referenced from: /Users/hiroya/Documents/pg/my-vue-app/.eslintrc.cjs
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (/Users/hiroya/Documents/pg/my-vue-app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/hiroya/Documents/pg/my-vue-app/node_modules/eslint-plugin-vue/lib/rules/array-bracket-newline.js:6:26)
    at Module._compile (/Users/hiroya/Documents/pg/my-vue-app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

結論

eslint-plugin-vue をアップグレードする

環境

  • node v16.16.0
  • yarn 1.22.19

原因

エラー文にもちらほら出ていますが、今回の場合 eslint-plugin-vue のバージョンが古いことが原因だったようです

解決策

yarn upgrade eslint-plugin-vue で eslint-plugin-vue をアップグレードする

$ yarn upgrade eslint-plugin-vue
yarn upgrade v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > vite-plugin-vuetify@1.0.0-alpha.12" has incorrect peer dependency "vite@^2.7.0".
warning " > vue-cli-plugin-vuetify@2.5.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "vue-cli-plugin-vuetify > null-loader@4.0.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨  Rebuilding all packages...
success Saved lockfile.
success Saved 15 new dependencies.
info Direct dependencies
└─ eslint-plugin-vue@9.3.0
info All dependencies
├─ acorn-jsx@5.3.2
├─ acorn@8.8.0
├─ boolbase@1.0.0
├─ cssesc@3.0.0
├─ eslint-plugin-vue@9.3.0
├─ estraverse@5.3.0
├─ lodash@4.17.21
├─ lru-cache@6.0.0
├─ ms@2.1.2
├─ nth-check@2.1.1
├─ postcss-selector-parser@6.0.10
├─ util-deprecate@1.0.2
├─ vue-eslint-parser@9.0.3
├─ xml-name-validator@4.0.0
└─ yallist@4.0.0
✨  Done in 3.42s.
この記事タイトルとURLをコピー

-JavaScript