ESLint：插件“反应”在两者之间发生冲突

Question

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

local-component-package

├── .storybook
├── demos
│   └── react
│       ├── node_modules
│       └── package.json
├── node_modules
├── src
├── .eslintignore
├── .eslintrc.json
└── package.json

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

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

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

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

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

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

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

• 我正在使用 VSCode，并且安装了 ESLint 扩展dbaeumer.vscode-eslint 。 我已禁用它以消除它不是导致问题的原因。 上面指定的 nodule_module 确实出现在 React 演示应用程序的 node_modules 中，并且它的配置正在被使用。

• 我添加了一个.eslintignore文件并在.eslintrc.json中添加了 ignorePatterns ，但也没有生效。 linter 似乎并没有真正检查这个目录，所以似乎忽略正在工作，但配置仍然存在冲突。

我想知道的是：

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

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

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

• 插件“react”在“package.json » eslint-config-react-app 之间发生冲突
• 部署反应应用程序时出错，它一直在说<<插件“反应”在“package.json»eslint-config-react-app»>>之间发生冲突
• 部署反应应用程序时出错，它一直在说<<插件“反应”在“package.json»eslint-config-react-app»>>之间发生冲突

我在用：

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

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

Answer 1

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

Answer 2

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

在你的 package json

2. 停止并运行npm 重新开始。

Answer 3

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

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

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

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

Answer 4

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

Answer 5

尝试卸载您当前的 node.js 并重新安装。 它对我有用！