Plugin "react" was conflicted between "package.json » eslint-config-react-app

Question

I get this problem after I install react.

ERROR

Plugin "react" was conflicted between "package.json » eslint-config-react-app » ui\node_modules\eslint-config-react-app\base.js" and "Baseconfig » C:\Users\TONMOY\OneDrive\feedback-ui\node_modu1es\es1int-config-react-app\base. js".`

Marra

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Foal

The reason is - enter image description here. – Quinnquinol

Answer 1

I encountered the same error .

The path u created this app is in:

\Users\TONMOY\Onedrive\feedback-ui\

The path name is case sensitive. You created the app in is case sensitive so you created the app in the folder ...\Onedrive\..... while the correct path in your device is ...\OneDrive\.....

This may be an issue of VS Code.

The workaround to this that I found is, in the Visual Studio terminal I navigated to the correct folder path with the proper case which in your case should be

\Users\TONMOY\OneDrive\feedback-ui\

After this running your app from the VS Code terminal should work normally. This worked for me in Visual Studio Code.

Update: This is just a temporary fix. On restarting VS Code it reverts back to the wrong case.

Instead you could load up VS Code and browse through your system directory and select your project folder manually once. After doing this the path's case does not revert even after restarting.

Oaten

I think this is the issue. Only I did it the other way around, I changed the app name folder from "APP1" to "app1" and now no more errors. – Buskin

Thanks for posting this response. I ran into the same issue when I cloned a Git repo in Visual Studio. I did what you suggested and closed Visual Studio and then reopened it and browsed to the solution path. It was a mixed case path issue as you mentioned. – Pryce

Answer 2

Well I faced the same issue and if run npm ls eslint-config-react-app to see the configration and package being used. Or else run npm update eslint then finally re-run npm start. That should work as expected.

Flavine

Answer 3

I went to node_modules/react-scripts/config .Acutally it's an another folder, and there is no such file as you mentioned above.

Fulgurous

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Foal

Answer 4

Install the node modules package again. npm i

Besot

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Foal

Answer 5

I got this error when returning to an old react project. I had to update react-scripts package. Information on how to do this can be found here:

https://create-react-app.dev/docs/updating-to-new-releases/

Columba

Answer 6

I encountered this when I was trying to set up a test react app with the command npx create-react-app my-app. What I did was remove the script below in the package.json

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },```


I have not delved deeper into the main reason of why the issue but I think this would be helpful somehow.

Enunciation

Answer 7

I encountered the same error, after the following installation to restore normal, hope to help you.

npm i eslint-config-react-app

Quip

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Bhayani

Answer 8

What I did to solve this problem I went into the file webpack.config.js located in : node_modules > react-scripts > config and i commented all this excerpt located at the end of the file :

!disableESLintPlugin &&
    new ESLintPlugin({
      // Plugin options
      extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
      formatter: require.resolve('react-dev-utils/eslintFormatter'),
      eslintPath: require.resolve('eslint'),
      failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
      context: paths.appSrc,
      cache: true,
      cacheLocation: path.resolve(
        paths.appNodeModules,
        '.cache/.eslintcache'
      ),
      // ESLint class options
      cwd: paths.appPath,
      resolvePluginsRelativeTo: __dirname,
      baseConfig: {
        extends: [require.resolve('eslint-config-react-app/base')],
        rules: {
          ...(!hasJsxRuntime && {
            'react/react-in-jsx-scope': 'error',
          }),
        },
      },
    }),

Ryley

Answer 9

This worked for me too went into the file webpack.config.js located in : node_modules > react-scripts > config and i commented all this excerpt located at the end of the file : Coment all this section

  !disableESLintPlugin &&
        new ESLintPlugin({
          // Plugin options
          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
          formatter: require.resolve('react-dev-utils/eslintFormatter'),
          eslintPath: require.resolve('eslint'),
          failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
          context: paths.appSrc,
          cache: true,
          cacheLocation: path.resolve(
            paths.appNodeModules,
            '.cache/.eslintcache'
          ),
          // ESLint class options
          cwd: paths.appPath,
          resolvePluginsRelativeTo: __dirname,
          baseConfig: {
            extends: [require.resolve('eslint-config-react-app/base')],
            rules: {
              ...(!hasJsxRuntime && {
                'react/react-in-jsx-scope': 'error',
              }),
            },
          },
        }),

Thank u

Toliver

Don't copy an existing answer if it worked for you. Just up vote it or comment if needed to say what extra you did to make that solution work. (https://mcmap.net/q/282295/-plugin-quot-react-quot-was-conflicted-between-quot-package-json-187-eslint-config-react-app) – Korney