插件“react”与“package.json » eslint-config-react-app 之间发生冲突

Question

我安装react后遇到这个问题。

错误

Plugin "react" was conflicted between "package.json » eslint-config-react-app » ui\node_modules\eslint-config-react-app\base.js" and "Baseconfig » C:\Users\TONMOY\OneDrive\feedback-ui\node_modu1es\es1int-config-react-app\base. js".`

Answer 1

我遇到了同样的错误。

您创建此应用程序的路径位于：

\Users\TONMOY\Onedrive\feedback-ui\

路径名区分大小写。您创建的应用程序区分大小写，因此您在文件夹

...\Onedrive\.....

中创建了应用程序，而设备中的正确路径是

...\OneDrive\....

。

这可能是 VS Code 的问题。

我发现的解决方法是，在 Visual Studio 终端中，我导航到正确的文件夹路径，并使用正确的大小写，在您的情况下应该是

\Users\TONMOY\OneDrive\feedback-ui\

此后，从 VS Code 终端运行您的应用程序应该可以正常工作。这在 Visual Studio Code 中对我有用。

更新： 这只是一个临时修复。重新启动 VS Code 后，它会恢复到错误的大小写。

您可以加载 VS Code 并浏览系统目录并手动选择项目文件夹一次。执行此操作后，即使重新启动后，路径的大小写也不会恢复。

Answer 2

我也遇到了同样的问题，如果运行

npm ls eslint-config-react-app

来查看正在使用的配置和包。或者运行

npm update eslint

然后最后重新运行

npm start

。这应该按预期工作。

Answer 3

我去了node_modules/react-scripts/config。实际上它是另一个文件夹，并且没有你上面提到的这样的文件。

Answer 4

再次安装节点模块包。 npm 我

Answer 5

这对我也有用 进入文件 webpack.config.js 位于：node_modules>react-scripts>config，我评论了位于文件末尾的所有摘录： 评论全部此部分

  !disableESLintPlugin &&
        new ESLintPlugin({
          // Plugin options
          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
          formatter: require.resolve('react-dev-utils/eslintFormatter'),
          eslintPath: require.resolve('eslint'),
          failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
          context: paths.appSrc,
          cache: true,
          cacheLocation: path.resolve(
            paths.appNodeModules,
            '.cache/.eslintcache'
          ),
          // ESLint class options
          cwd: paths.appPath,
          resolvePluginsRelativeTo: __dirname,
          baseConfig: {
            extends: [require.resolve('eslint-config-react-app/base')],
            rules: {
              ...(!hasJsxRuntime && {
                'react/react-in-jsx-scope': 'error',
              }),
            },
          },
        }),

谢谢你

Answer 6

我在返回旧的 React 项目时收到此错误。我必须更新反应脚本包。有关如何执行此操作的信息可以在这里找到：

https://create-react-app.dev/docs/updating-to-new-releases/

Answer 7

当我尝试使用命令

npx create-react-app my-app

设置测试反应应用程序时，我遇到了这个问题。我所做的是删除 package.json 中的以下脚本

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },```


I have not delved deeper into the main reason of why the issue but I think this would be helpful somehow.

Answer 8

我也遇到同样的错误，经过以下安装后恢复正常，希望对你有帮助。

npm i eslint-config-react-app

Answer 9

我为解决这个问题做了什么，我进入了文件webpack.config.js，位于：node_modules>react-scripts>config，我评论了位于文件末尾的所有摘录：

!disableESLintPlugin &&
    new ESLintPlugin({
      // Plugin options
      extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
      formatter: require.resolve('react-dev-utils/eslintFormatter'),
      eslintPath: require.resolve('eslint'),
      failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
      context: paths.appSrc,
      cache: true,
      cacheLocation: path.resolve(
        paths.appNodeModules,
        '.cache/.eslintcache'
      ),
      // ESLint class options
      cwd: paths.appPath,
      resolvePluginsRelativeTo: __dirname,
      baseConfig: {
        extends: [require.resolve('eslint-config-react-app/base')],
        rules: {
          ...(!hasJsxRuntime && {
            'react/react-in-jsx-scope': 'error',
          }),
        },
      },
    }),