ESLint:插件"react"之间存在冲突

7

我有一个React应用程序,它位于一个单体npm组件包中。React应用程序作为演示站点,将此组件包作为整合步骤消耗,超过了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包 (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包使用yarn来获取最新版本的Storybook和Webpack以及许多必要的插件,使它们能够良好地协同工作。我运行的演示应用程序使用npm,因为它们模拟生产应用程序的运行。

  • 我正在使用VSCode,并且安装了ESLint扩展dbaeumer.vscode-eslint。为了消除它不引起问题,我已将其禁用。上面指定的nodule_module确实出现在react演示应用程序的node_modules中,并且正在被使用其配置文件。

  • 我添加了一个.eslintignore文件,并在.eslintrc.json中添加了ignorePatterns,但都没有生效。似乎该代码分析器并没有对此目录进行分析,因此忽略仍在发挥作用,但配置仍然冲突。

我想知道的是:

  • 如果该模块并未明确作为node_modules的一部分,则为什么该模块在演示React应用程序中?

  • 如何停止这些配置的冲突?

注意:我查看了以下未能帮助我的问题。

我正在使用:

  • macOS Monterey 12.1 (M1)
  • Node v16.13.0
  • npm 8.3.0
  • yarn 1.22.17

如果您需要更多信息,请告诉我。

6个回答

10

我也遇到过同样的问题,而我遇到的问题的原因是当我cd进入我的项目目录时,我使用小写字母书写文件夹名称,而实际的文件夹名称是句首大写。所以请确保您从终端进入的路径与实际路径大小写完全一致。


你在哪个环境中,能够进入文件夹,但大小写不正确?这应该在任何地方都是不可能的。 - sirclesam
1
我说得太早了,这就是我的情况。显然,在Windows上使用git bash,如果您使用完整路径cd命令,它将允许这种情况发生。甚至在pwd上报告不正确的大小写,使其变得更加奇怪... - sirclesam
1
这正是我所遇到的问题!通过dotnet模板创建了一个React应用程序,该模板将文件夹名称默认设置为ClientApp。然后我删除了内容,使用React TypeScript模板重新创建了应用程序,但React不接受CamelCase文件夹,因此我最终得到了clientapp。当浏览目录时,我的肌肉记忆让我输入了“ClientApp”。你节省了我很多时间!! - avdomingos

8

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

对我提供的解决方案是,既然我实际上并不想lint react方面的东西,我可以在环境中将DISABLE_ESLINT_PLUGIN设置为true。

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

特别感谢Xandor Schiefer帮助我解决这个问题!


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

在您的包json中。

  1. 停止并再次运行npm start

1

尝试在 package.json 文件中将应用程序名称转换为小写,这对我有用。


感谢您的见解。不幸的是,我的package.json文件中已经全部是小写,所以这并没有帮助到我。 - Clarice Bouwer
检查所有包是否与该包的版本相同。JSON - Kuristoph Richardson

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

1

我在使用create-react-app后也遇到了类似的错误。我运行了命令“npm start”,然后就收到了这个错误信息。我的解决方案是 -> 在代码编辑器中打开react项目文件夹。进入终端,cd到项目文件夹,然后再次运行该命令。


这是否意味着您只是在错误的文件夹中运行了命令?这难道不会给您带来完全不同的错误(可能类似于“找不到package.json”)吗?我不确定这是否适用于该问题,该问题涉及在正确的文件夹中运行命令时出现的特定错误。 - Moritz Ringler
这不会产生错误,因为它没有进入错误的文件夹,只是进入了React应用程序的根文件夹。例如,它可以有一个名为APP的文件夹,里面有两个其他文件夹,backend和frontend。然后他在VSCode中打开了APP文件夹,在终端中运行cd frontend并执行。在我的情况下有点不同,我打开了我的React应用程序的文件夹,然后运行cd ..,然后cd web(我的应用程序名称是web)。 - undefined

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接