【Next.js】备忘录：警告：在eslint-plugin-react设置中未指定React版本。~ 原因和解决方法 ~

2 年 ago
雅, 悟
1 minute

首先

感谢您阅读这篇文章。
我正在使用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。

The reason

这次参考了官方的GitHub链接，该链接也包含在错误信息中。
作为原因，就是在使用eslint-plugin-react时需要指定React的版本。

我将公式文件中的原因部分描述翻译成中文，然后附在上面。

// React版本。”detect”会自动选择你已安装的版本。
// 如果你想覆盖检测到的值，也可以使用16.0、16.3等等。
// 它将默认为”latest”，如果缺失会发出警告，并在未来变为”detect”。

中文翻译：
React的版本。”detect”会自动选择安装的版本。如果您想覆盖检测到的值，也可以使用16.0或16.3等版本。默认值是”latest”，如果找不到，则会显示警告，并在将来更改为”detect”。

解决问题

将以下设置放入.eslintrc.js文件中，按照公式文档的要求，错误消息将不再显示。

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

由于仅提供以上代码无法清楚地理解该代码应写在何处，因此我将提供完整的.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',
+    },
+  },
}

结束

环境搭建真的挺难的。

请参考以下文章或链接。

 

bannerAds