title: ESLint: Plugin "react" was conflicted between
body: <p>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.</p>
  <pre><code>local-component-package
  
  ├── .storybook
  ├── demos
  │   └── react
  │       ├── node_modules
  │       └── package.json
  ├── node_modules
  ├── src
  ├── .eslintignore
  ├── .eslintrc.json
  └── package.json
  </code></pre>
  <p>The component library (parent directory) has ESLint enabled while the demo app does not.</p>
  <p>When I build and run my React demo app, I see the appropriate page being served. The moment I make a change and the page gets hot reloaded then I get the following error:</p>
  <pre><code>Plugin &quot;react&quot; was conflicted between &quot;../../.eslintrc.json&quot; and &quot;BaseConfig » /path/to/project/demos/react/node_modules/eslint-config-react-app/base.js&quot;.
  
  </code></pre>
  <p>It seems to be telling me that there is an npm package (<code>eslint-config-react-app</code>) present in the demo app that conflicts with the base (or parent) <code>.eslintrc.json</code> file but I am not sure why or how to address this.</p>
  <p>Here is my demo app's <code>package.json</code>:</p>
  <pre><code>&quot;dependencies&quot;: {
    &quot;react&quot;: &quot;~16.8.5&quot;,
    &quot;react-dom&quot;: &quot;~16.8.5&quot;,
    &quot;react-scripts&quot;: &quot;5.0.0&quot;,
    &quot;local-component-package&quot;: &quot;file:../../build&quot;
  },
  </code></pre>
  <p><strong>Note:</strong> 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. The demo apps I have running use npm because they simulate running production applications.</p>
  <ul>
  <li><p>I am using VSCode and I have the ESLint extension <code>dbaeumer.vscode-eslint</code> installed. 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.</p>
  </li>
  <li><p>I have added an <code>.eslintignore</code> file and added ignorePatterns in <code>.eslintrc.json</code> which also did not take effect. 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.</p>
  </li>
  </ul>
  <p>What I'd like to know is:</p>
  <ul>
  <li><p>Why is this module inside the demo React app if it is not explicitly part of the node_modules?</p>
  </li>
  <li><p>How do I get these configs to stop clashing?</p>
  </li>
  </ul>
  <p><strong>Note:</strong> I have looked at the following questions that did not help me.</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/70508363/plugin-react-was-conflicted-between-package-json-eslint-config-react-app">Plugin &quot;react&quot; was conflicted between &quot;package.json &#187; eslint-config-react-app</a></li>
  <li><a href="https://stackoverflow.com/questions/70377211/error-when-deploying-react-app-and-it-keeps-sayings-plugin-react-was-confli">Error when deploying react app and it keeps sayings &lt;&lt; Plugin &quot;react&quot; was conflicted between &quot;package.json &#187; eslint-config-react-app &#187; &gt;&gt;</a></li>
  <li><a href="https://stackoverflow.com/questions/70377211/error-when-deploying-react-app-and-it-keeps-sayings-plugin-react-was-confli">Error when deploying react app and it keeps sayings &lt;&lt; Plugin &quot;react&quot; was conflicted between &quot;package.json &#187; eslint-config-react-app &#187; &gt;&gt;</a></li>
  </ul>
  <p>I am using:</p>
  <ul>
  <li>macOS Monterey 12.1 (M1)</li>
  <li>Node v16.13.0</li>
  <li>npm 8.3.0</li>
  <li>yarn 1.22.17</li>
  </ul>
  <p>Let me know if you need more information.</p>