[英]ESLint: Plugin "react" was conflicted between
I have a React app inside a monolith npm component package. The React app serves as a demo site which consumes this component package as an integration step over and above Storybook.我在单体 npm 组件 package 中有一个 React 应用程序。React 应用程序用作演示站点,它使用此组件 package 作为 Storybook 之上的集成步骤。
local-component-package
├── .storybook
├── demos
│ └── react
│ ├── node_modules
│ └── package.json
├── node_modules
├── src
├── .eslintignore
├── .eslintrc.json
└── package.json
The component library (parent directory) has ESLint enabled while the demo app does not.组件库(父目录)启用了 ESLint,而演示应用程序没有。
When I build and run my React demo app, I see the appropriate page being served.当我构建并运行我的 React 演示应用程序时,我看到了相应的页面被提供。 The moment I make a change and the page gets hot reloaded then I get the following error:
当我进行更改并且页面重新热加载时,我收到以下错误:
Plugin "react" was conflicted between "../../.eslintrc.json" and "BaseConfig » /path/to/project/demos/react/node_modules/eslint-config-react-app/base.js".
It seems to be telling me that there is an npm package ( eslint-config-react-app
) present in the demo app that conflicts with the base (or parent) .eslintrc.json
file but I am not sure why or how to address this.它似乎告诉我演示应用程序中存在一个 npm package (
eslint-config-react-app
) 与基本(或父) .eslintrc.json
文件冲突,但我不确定为什么或如何解决这个。
Here is my demo app's package.json
:这是我的演示应用程序
package.json
:
"dependencies": {
"react": "~16.8.5",
"react-dom": "~16.8.5",
"react-scripts": "5.0.0",
"local-component-package": "file:../../build"
},
Note: My base component npm package uses yarn as to get the latest versions of Storybook and Webpack and the numerous necessary plugins to work well together.注意:我的基础组件 npm package 使用 yarn 来获取最新版本的 Storybook 和 Webpack 以及许多必要的插件,以便它们能够很好地协同工作。 The demo apps I have running use npm because they simulate running production applications.
我运行的演示应用程序使用 npm,因为它们模拟运行的生产应用程序。
I am using VSCode and I have the ESLint extension dbaeumer.vscode-eslint
installed.我正在使用 VSCode,并且安装了 ESLint 扩展
dbaeumer.vscode-eslint
。 I have disabled it to eliminate that it is not causing the problem.我已禁用它以消除它不是导致问题的原因。 The nodule_module specified above does appear inside the react demo app's node_modules and its config is being consumed.
上面指定的 nodule_module 确实出现在 React 演示应用程序的 node_modules 中,并且它的配置正在被使用。
I have added an .eslintignore
file and added ignorePatterns in .eslintrc.json
which also did not take effect.我添加了一个
.eslintignore
文件并在.eslintrc.json
中添加了 ignorePatterns ,但也没有生效。 The linter doesn't appear to be actually linting this directory so it seems that the ignore is working but the configuration is still clashing. linter 似乎并没有真正检查这个目录,所以似乎忽略正在工作,但配置仍然存在冲突。
What I'd like to know is:我想知道的是:
Why is this module inside the demo React app if it is not explicitly part of the node_modules?如果这个模块不是 node_modules 的明确一部分,为什么它会出现在演示 React 应用程序中?
How do I get these configs to stop clashing?如何让这些配置停止冲突?
Note: I have looked at the following questions that did not help me.注意:我查看了以下对我没有帮助的问题。
I am using:我在用:
Let me know if you need more information.如果您需要更多信息,请与我们联系。
I had the same problem and the cause of the problem for me was that when I cd'ed into my project's directory, I wrote the folder names in lower case, while the actual folders were named in sentence case.我有同样的问题,对我来说问题的原因是当我进入我的项目目录时,我用小写字母写了文件夹名称,而实际文件夹是用句子命名的。 So make sure that the path you cd into from the terminal has the same exact capitalization as the real path.
因此,请确保您从终端 cd 进入的路径与真实路径具有完全相同的大小写。
in your package json在你的 package json
It has been pointed out to me that it seems that I've got different versions installed of eslint-plugin-react
.有人向我指出,我似乎安装了不同版本的
eslint-plugin-react
。
The solution offered to me was that since I'm not actually interested in linting the react side of things, I could set DISABLE_ESLINT_PLUGIN
to true in the environment.提供给我的解决方案是,由于我实际上对 linting 事物的反应方面并不感兴趣,因此我可以在环境中将
DISABLE_ESLINT_PLUGIN
设置为 true。
See https://create-react-app.dev/docs/advanced-configuration/ That switched off the linting in the react project altogether.请参阅https://create-react-app.dev/docs/advanced-configuration/这完全关闭了 react 项目中的 linting。
A big shout out goes to Xandor Schiefer for helping me with this!
非常感谢 Xandor Schiefer 帮助我解决这个问题!
try lowercase the app name in package.json, this worked for me尝试将 package.json 中的应用程序名称小写,这对我有用
Try to uninstall your current node.js and reinstall it.尝试卸载您当前的 node.js 并重新安装。 It worked for me!
它对我有用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.