【Next.js】備忘録：Warning: React version not specified in eslint-plugin-react settings. ~ 原因と解決法 ~

はじめに

記事をご覧いただきありがとうございます。
私は個人開発でNext.jsを使用しています。Next.jsのプロジェクトにおいて npm run dev　を実行した際にエラーが発生したのでその原因と対処法について備忘録としてまとめたいと思います。

開発環境

• eslint-plugin-react 7.33.2
• VSCode 1.79.2
• React 18.2.0
• Next.js 13.4.19
• TypeScript 5.2.2
• ESLint 8.49.0
• Prettier 3.0.3

実際のエラー

はじめにでも記述しましたが npm run devをターミナル上で実行した際に以下のようなエラーが出力されました。

ターミナル

Warning: React version not specified in eslint-plugin-react settings. 
See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

このエラー文を日本語訳をすると以下のようになります。

訳
警告: React バージョンが eslint-plugin-react 設定で指定されていません。
https://github.com/jsx-eslint/eslint-plugin-react#configuration を参照してください。

原因

今回はエラーメッセージ内にもあった公式のGitHubリンクを参考にしました。
原因としてはエラーメッセージのままですがeslint-plugin-reactを使用する際にはReactのVersion指定が必要であったとのことでした。

公式ドキュメント内にある原因部分の記述を和訳にし載せておきます。

// React version. "detect" automatically picks the version you have installed.
// You can also use 16.0, 16.3, etc, if you want to override the detected value.
// It will default to "latest" and warn if missing, and to "detect" in the future

和訳
Reactのバージョン。"detect "は自動的にインストールされているバージョンを選択します。検出された値を上書きしたい場合は、16.0や16.3などを使用することもできます。デフォルトは "latest "で、見つからない場合は警告が表示され、将来的には "detect "になります。

解決

公式のドキュメント通り.eslintrc.jsに下記の設定を入れることでエラーメッセージは出てこなくなります。

.eslintrc.json

    settings: {
        react: {
            version: 'detect',
        },
    },

以上のコードだけでは具体的にどこに記述すれば良いのか分かりづらいので.eslintrc.jsonの全体の記述も載せておきます。参考にしてください。

.eslintrc.json

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'react'],
  rules: {},
+   settings: {
+    react: {
+     version: 'detect',
+    },
+  },
}

終わりに

やっぱり環境構築って難しい、

参考記事・URL