ESLint: Error while loading rule 'react/display-name': Cannot find module 'react'

[TidyIQ]

I have a custom config file, which can be found here:

• npm package
• github repo

For some reason when I attempt to use this custom config in a project, I get the following error:

ESLint: Error while loading rule 'react/display-name': Cannot find module 'react' from 'C:\Users\Me\Websites' Occurred while linting C:\Users\Me\Websites\Templates\core\src\config\next\_app.tsx. 

The plugin is installed at C:\Users\Me\Websites\Templates\core\node_modules\eslint-plugin-react.

This only occurs for this plugin. I don't have this issue with any other plugins I use. Everything appears to be setup correctly so I believe this is a bug with eslint-plugin-react.

[ljharb]

Do you have react installed, in C:\Users\Me\Websites\Templates\core\node_modules\?

Specifically, by setting the version to "detect", you're forcing react to be installed so the plugin can detect its version.

[TidyIQ]

Yep, it's installed and located there.

[ljharb]

what's the path to package.json? in which dir are you running eslint?

[TidyIQ]

C:\Users\Me\Websites\Templates\core\package.json and I'm running eslint from C:\Users\Me\Websites\Templates\core.

I've literally just discovered that this appears to only be an issue for this plugin (and only this plugin) with vscode-eslint only. Running eslint from the cli doesn't return the error, it only appears in the vscode ESLint extension. I've created an issue in the vscode-eslint repo so perhaps they'll discover the issue is on their end.

[ljharb]

Ah, gotcha - in that case I'd say it's an issue with vscode-eslint, probably not setting the require path correctly.

eslint 6 requires fully resolved paths in places it didn't before, so this problem will likely crop up much more often for them.

Closing this (and i'd suggest closing eslint/eslint#11891) in favor of microsoft/vscode-eslint#695.

[davidysoards]

I'm having the same issue. It seems to be looking for the "react" module in the parent directory instead of the project root directory. Extremely frustrating

[MoOx]

Same problem here, without vscode. I am getting this from CLI.
eslint & eslint-plugin-react are close to each other in node_modules.

[ljharb]

@MoOx is this also on windows?

[MoOx]

No macOS.

[ljharb]

Can you file a new issue?

[sgehrman]

Happens for me too. I'm on Linux.

This version works:

"eslint-plugin-react": "7.11.1",

New versions are broken.

[edhollinghurst]

If you're having this issue whilst using the ESLint VSCode extension, I was able to fix it by adding this to my VSCode settings.json:

"eslint.workingDirectories": [
  {
    "mode": "auto" // Working directory based on the location of package.json, .eslintignore and .eslintrc* files
  }
]

[TahseenAlaa]

Problem solved after update npm dependencies:

npm update