Next.js+ESLintで起こったエラーの解消方法

はじめに

Next.jsを学習するにあたってESLintのエラーに詰まってしまったのでその解消方法を今回、記事にしました。なお、Nest.jsのプロジェクトを立ち上げる際、TypeScriptの使用は行わないと設定しています。

発生したエラー

ターミナルでyarn lintを実行すると以下のエラーが発生しました。

Failed to load parser '@typescript-eslint/parser' declared in ' » eslint-config-next/core-web-vitals » /usr/src/app/node_modules/eslint-config-next/index.js#overrides[0]': Cannot find module 'typescript'

このエラーの内容を整理すると、以下の2点が問題になっています。

1. ESLintが @typescript-eslint/parser を読み込もうとして失敗している
2. typescript モジュールが見つからないと怒られている

しかし、プロジェクトではTypeScriptを使用しておらず、typescript-eslint の設定も不要なはずです。それにもかかわらず、なぜこのエラーが発生したのかを調査しました。

原因の調査

Next.jsのESLint設定でnext/core-web-vitalsを適用しています。

eslint.config.mjs

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends('next/core-web-vitals'), // ここでTypeScript関連の設定が読み込まれる
  'prettier',
];

export default eslintConfig;

compat.extends('next/core-web-vitals')を適用しているため、Next.js公式のESLint設定eslint-config-nextが適用されています。この設定にはデフォルトでTypeScriptのパーサー (@typescript-eslint/parser) が含まれており、TypeScriptを使用していない場合でも typescript のインストールを求められることがあります。

つまり、TypeScriptを使っていないのに、Next.jsのESLint設定が@typescript-eslint/parserを強制的に読み込んでしまい、エラーが発生した というのが原因です。

解決方法

結論：.eslintrc.jsを使い解決しました
Next.js プロジェクトでは、従来の.eslintrc.jsスタイルを使うのが無難です。

理由は以下の通りです

1. Next.jsのESLint設定(eslint-config-next)はTypeScriptを前提としている
2. フラットコンフィグ(eslint.config.mjs)を使うと無理が生じる
3. .eslintrc.js のほうが安定して動作する

以下の.eslintrc.jsをプロジェクトルートに作成し、eslint.config.mjsを削除またはリネームして併存しないようにします。

.eslintrc.js

module.exports = {
  root: true,
  ignorePatterns: ['node_modules', '.next'],
  extends: ['next', 'prettier'],
ecmaVersion, sourceType を指定
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'warn',
    // Next.js では React import が不要なので無効化
    'react/react-in-jsx-scope': 'off',
  },
};

TypeScriptを「ダミー」としてインストール
Next.jsのESLint設定は内部的に@typescript-eslint/parserとtypescriptを要求するため、ダミーの typescript をインストールしておくとより安定します。

yarn add -D typescript

※TypeScriptを使わないならtsconfig.jsonは不要なので、作成しなくてOKです。

なぜ、eslintrc.jsに移行したのか？

「TypeScriptを使わないのにtypescriptをインストールするなら、フラットコンフィグ(eslint.config.mjs)のままでよかったのでは？」と思うかもしれません。

しかし、.eslintrcに移行した理由は以下の通りです。

.eslintrc.jsのメリット

1. Next.js公式のESLint設定は.eslintrc.jsに最適化されている
2. .eslintrc.jsの方が安定して動作する
3. ESLintの公式ドキュメントでも.eslintrc.jsの使用が推奨されている
4. フラットコンフィグ(eslint.config.mjs)はNext.jsではまだ完全に安定していない

つまり、無理にフラットコンフィグを使うよりも、従来の .eslintrc.jsを使う方がシンプルで問題が起こりにくい という結論になりました。

フラットコンフィグとは
詳しい説明は省きますが、ESLint v8.23.0以降で導入された新しい設定方式であり、将来的にはの.selintrc.jsに取って代わるそうです。

まとめ

今回のエラーを解決するにあたりTypeScriptを使用しないのにTypeScriptをインストールするのは根本的解決とは言えないのかもしれませんがひとまずESLintが動作するようになったのでよしとします。