ESLint：插件“react”之间存在冲突

Question

我在一个整体 npm 组件包内有一个 React 应用程序。React 应用程序用作演示站点，它使用此组件包作为 Storybook 之上的集成步骤。

\n

local-component-package\n\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .storybook\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 demos\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react\n\xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .eslintignore\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .eslintrc.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

\n

组件库（父目录）启用了 ESLint，而演示应用程序未启用。

\n

当我构建并运行我的 React 演示应用程序时，我看到正在提供相应的页面。当我进行更改并且页面热重新加载时，我收到以下错误：

\n

Plugin "react" was conflicted between "../../.eslintrc.json" and "BaseConfig \xc2\xbb /path/to/project/demos/react/node_modules/eslint-config-react-app/base.js".\n\n

\n

它似乎告诉我eslint-config-react-app演示应用程序中存在一个与基础（或父级）冲突的 npm 包（）.eslintrc.json文件冲突，但我不确定为什么或如何解决这个问题。

\n

这是我的演示应用程序package.json：

\n

"dependencies": {\n  "react": "~16.8.5",\n  "react-dom": "~16.8.5",\n  "react-scripts": "5.0.0",\n  "local-component-package": "file:../../build"\n},\n

\n

笔记：我的基本组件 npm 包使用 Yarn 来获取最新版本的 Storybook 和 Webpack 以及众多必要的插件，以便能够很好地协同工作。我运行的演示应用程序使用 npm，因为它们模拟运行的生产应用程序。

\n

\n

• 我正在使用 VSCode 并且有 ESLint 扩展dbaeumer.vscode-eslint。我已禁用它以消除它不会引起问题。上面指定的 nodule_module 确实出现在 React 演示应用程序的 node_modules 中，并且其配置正在被使用。

  \n
\n

• 我添加了一个.eslintignore文件并添加了ignorePatterns，其中.eslintrc.json也没有生效。linter 似乎并没有真正对该目录进行 linting，因此似乎忽略正在工作，但配置仍然发生冲突。

  \n
\n

\n

我想知道的是：

\n

\n

• 如果这个模块没有明确属于 node_modules 的一部分，为什么它会出现在演示 React 应用程序中？

  \n
\n

• 如何让这些配置停止冲突？

  \n
\n

\n

注意：我查看了以下问题，但对我没有帮助。

\n

\n
• 插件“react”与“package.json » eslint-config-react-app 之间发生冲突”
\n
• 部署 React 应用程序时出错，并且一直显示 << 插件“react”与“package.json » eslint-config-react-app » >> 之间存在冲突”
\n
• 部署 React 应用程序时出错，并且一直显示 << 插件“react”与“package.json » eslint-config-react-app » >> 之间存在冲突”
\n

\n

我在用：

\n

\n
• macOS 蒙特利 12.1 (M1)
\n
• 节点 v16.13.0
\n
• npm 8.3.0
\n
• 纱线 1.22.17
\n

\n

如果您需要更多信息，请与我们联系。

\n

Answer 1

我遇到了同样的问题，对我来说问题的原因是当我进入项目目录时，我用小写写了文件夹名称，而实际的文件夹以句子大小写命名。因此，请确保从终端进入的路径与实际路径的大小写完全相同。

Answer 2

有人向我指出，我似乎安装了不同版本的eslint-plugin-react.

提供给我的解决方案是，由于我实际上对 linting 的反应方面不感兴趣，所以我可以 DISABLE_ESLINT_PLUGIN在环境中设置为 true。

请参阅https://create-react-app.dev/docs/advanced-configuration/这完全关闭了反应项目中的 linting。

非常感谢 Xandor Schiefer 帮助我解决这个问题！

Answer 3

1. 只需删除 "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },

在你的包 json 中

2. 停止并再次运行npm start。

Answer 4

尝试在 package.json 中小写应用程序名称，这对我有用