はじめに

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点が問題になっています。

ESLintが @typescript-eslint/parser を読み込もうとして失敗している
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スタイルを使うのが無難です。

理由は以下の通りです

Next.jsのESLint設定(eslint-config-next)はTypeScriptを前提としている
フラットコンフィグ(eslint.config.mjs)を使うと無理が生じる
.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のメリット

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

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

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

まとめ

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