TL;DR

このページでは、デプロイ時に ESLint のエラーが出る対処法の実装方法について解説します。

error ESLint: Failed to load config "prettier" to extend from.

デプロイ時に以下のようなエラーが出るときがあります。

- error ESLint: Failed to load config "prettier" to extend from. Referenced from: /vercel/path0/.eslintrc.json

このエラーメッセージは、Vercel でのデプロイ時に ESLint の設定で問題が発生していたときに表示されました。原因を追うと、eslintrc.json の設定ミスや、 ; , などの記号が、VSCode の自動整形により削除されていたことが原因でした。

ESLint での自動整形に加え、VSCode で保存したときに自動的に整形されるように設定していたのですが、その設定が正しく行われていなかったために、デプロイ時にエラーが発生していました。

この問題は、ローカルでデプロイするときも同じように発生します。

まずは VSCode の設定を見直してみましょう。

VSCode の settings.json

最初に、VSCode の settings.json の設定を確認してみましょう。私の環境では以下です。

// prettier
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.semi": true, // セミコロンを付ける
"prettier.singleQuote": false, // シングルクォートを付ける
"editor.codeActionsOnSave": { // 保存時に Eslint で自動整形
  "source.fixAll.eslint": true
},
"editor.formatOnSave": false, // 保存時の VSCode による 自動整形を無効化

※ editor.formatOnSave が有効なっている場合、保存時に自動的にフォーマットが実行されます。この設定が有効になっていると、ESLint の設定と競合してエラーがでる可能性があります。そのため、editor.formatOnSave を false に設定しています。

ただし、上記の設定は主に JavaScript や TypeScript のコードに対する動作を指定しています。Markdown ファイルやその他のファイルに対しては特に設定がないため、自動フォーマットや Lint は働かないので、整形したい言語を true に設定してください。

"[markdown]": {
  "editor.formatOnSave": true
},
"[html]": {
  "editor.formatOnSave": true
},

.eslintrc.json

解決しない場合、Next.js のプロジェクトを確認していきます。以下の 2 つのファイルを確認してください。

• package.json
• .eslintrc.json

まずは、package.json ファイルを確認し、eslint-config-prettier が依存関係に含まれているか確認してください。もし含まれていなければ、プロジェクトに追加してみてください。

npm install --save-dev eslint-config-prettier

または

yarn add --dev eslint-config-prettier

次に、ESLint の設定ファイル（.eslintrc.json）において、extends セクションに prettier が正しく設定されているか確認してください。

{
  "extends": ["prettier"]
}

私の環境ではこのように設定しました。

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:prettier/recommended"
  ]
}

next lint

next lintは、Next.js のプロジェクトで ESLint を実行するためのコマンドです。ESLint は、JavaScript や TypeScript のコードで一般的な問題点やスタイル違反を検出するためのツールです。next lintを実行すると、プロジェクト内のすべての JS や TS ファイルが ESLint によって解析され、警告やエラーがコンソールに表示されます。

特に Next.js には、パフォーマンスやアクセシビリティ、SEO などに関連する独自の ESLint ルールもいくつか用意されています。これらのルールはプロジェクトの品質を高めるのに役立つものが多いです。

したがって、next lintはコードの品質を保ち、潜在的な問題を早期に発見するために非常に有用なコマンドです。プロジェクトのビルドやデプロイの前に実行することで、より安全なコードをリリースすることができます。

それでは、next lint を実行してみましょう。

`next lint`

これでも解決しない場合、以下のようにシンプルな形で一度リセットしてみてください。この状態でnext lintを再実行してみてください。

{
  "extends": ["next", "next/core-web-vitals"]
}

エラーが解消された場合、次に"prettier", "plugin:prettier/recommended"を extends に追加して再度 next lint を実行します。

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:prettier/recommended"
  ]
}

以下のように表示されれば成功です。

next lint
info  - Loaded env from /プロジェクト名/.env.local
✔ No ESLint warnings or errors

依存関係を再インストール

プロジェクトの node_modules と package-lock.json もしくは yarn.lock を削除し、依存関係を再インストールします。これはプロジェクトによっては注意が必要です。

rm -rf node_modules package-lock.json
npm install

または

rm -rf node_modules yarn.lock
yarn install

eslint-config-prettier と eslint-plugin-prettier がプロジェクトの devDependencies に正確にインストールされていることを確認します。

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

または

yarn add --dev eslint-config-prettier eslint-plugin-prettier

ESLint の設定が .eslintrc.json ファイル内で正確に行われているか確認します。特に extends フィールドが正確かどうかを確認してください。

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:prettier/recommended"
  ]
}

ローカルで ESLint を再度実行してみて、エラーが解消されるか確認します。

npx eslint --fix .

npx eslint --fix .

npx eslint --fix . コマンドは、ESLint を使ってプロジェクト内の JavaScript または TypeScript ファイルをリント（コードのスタイルや構文をチェック）し、自動修正可能な問題を修正します。ここでの --fix オプションは、自動で修正できる問題については修正を行うという意味です。.（ドット）は現在のディレクトリを指すので、このコマンドは現在のディレクトリとそのサブディレクトリ内のすべての対象ファイルに対してリントを実行します。

具体的には、このコマンドは以下のような作業を行います。

• 設定されたルールに基づいてコードの問題を検出します。
• 自動修正が可能な問題（例えば、インデントの不整合や不要なセミコロンなど）は、自動で修正します。

このコマンドを実行することで、コードの品質を一定の水準に保ち、また一貫したコーディングスタイルを維持することができます。ただし、自動で修正できない問題については手動で修正する必要があります。

以上の手順を実行してエラーが解決した後、再度 Vercel でデプロイを試みてみてください。