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

Question

this problem after install react

enter image description here

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.

Answer 2

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

Answer 3

Install the node modules package again. npm i

Answer 4

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

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/

Answer 6

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.

Answer 7

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',
          }),
        },
      },
    }),