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 並重新安裝。 它對我有用！