How to solve "Error while loading rule 'react/display-name': `[[GeneratorState]]` is not present on `O`" error in eslint

Question

In my case I am using eslint on nextjs with eslint-config-next. I use bun as a package manager but I found instances of this issues on npm and yarn as well.

I didn't add any new package but after running bun update or yarn update the issues started appearing. Linting fails with the error:

Error while loading rule 'react/display-name': `[[GeneratorState]]` is not present on `O`
Occurred while linting ...

Answer 1

After some research, I found out similar issues reported on the eslint-plugin-react repo and on its dependencies. This issue is related with errors in dependency resolution, when multiple incompatible versions of the same package are installed by the package manager. A similar issue was reported here. The solution is to remove duplicate dependencies:

• If you are using npm, the solution is to run npm dedupe
• If you are using yarn, you can do the same by installing yarn-deduplicate
• If you are using pnpm, the solution is to run pnpm dedupe
• If you are using bun then you are in no luck because there is currently no dedupe command. In that case you should:
  • Generate yarn.lock from your bun.lock with bun install --yarn so you can inspect the dependencies
  • Use yarn-deduplicate to fix your yarn.lock file
  • Wait for this issue to be solved so you can regenarate your bun.lockb from the fixed yarn.lock

What npm dedupe does, is simplifying dependencies by aggregating duplicated dependencies so they are shared across packages.

Answer 2

For those using yarn I found that yarn-deduplicate resolved:
[[GeneratorState]] is not present on O
error for eslint-config-next

Answer 3

For me what worked is:

rm -rf node_modules yarn.lock
yarn install