Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'

Question

I created a new React project with create-react-app.

In the terminal npm start.

Instantly get this error

Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'

How do I fix this?

Not this project specifically, but how do I get create-react-app to create without errors?

Juvenilia

How do you create the app? npx create-react-app my-app works without errors (tested with latest create-react-app) – Cognomen

Yeah. I create it like that. Just something wrong with my environment, i guess. – Juvenilia

I was having this issue and making a modification to a css file or the package.json would allow the live reload to run. Even if it was just whitespace. Kind of annoying to have to save twice each time, but it works. At least it does now in March. – Vansickle

@Vansickle strange but works! – Bile

check your version of node, perhaps you are using old version and this is causing compile errors – Constructive

A lot of people have mentioned upgrading node to v16 helped them. Has anyone tried v18 ? I can't fix this on v18. – Goddart

Answer 1

what's happening is that when you run npm start it's probably doing some checks with eslint, from what I remember create-react-app has some checks that break your build if you have eslint errors so makes sense that they're associated.

The error you're getting here is related to a node feature that eslint is using called subpath exports but it's support is hit or miss depending on how the library is consumed. This has been highlighted to cause issues when used with jest for example.

For the flowtype eslint plugin this is the exact line of code that's causing you issues.

You can also read about a similar issue reported regarding the typescript eslint plugin.

---

The solution and the reason I'm even able to understand what's causing this problem is that I made a fix to this yesterday in a clone of the eslint-plugin-flowtype (given that the original plugin had a lack of maintenance) here https://github.com/flow-typed/eslint-plugin-ft-flow/pull/23.

I'll raise an issue with create-react-app and see if they're willing to swap out the plugin with the new one which would have more maintenance and solve issues that you're experiencing.

Cilo

Issue posted here – Cilo

Thanks for the GitHub issue @Brianzchen. The comment that helped me fix it said update node. I updated to 16 and it worked :tada: – Caucasus

Answer 2

I fix this just deleting:

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

on package.json

Cabstand

Could you add some detail to your answer explaining what this does? I believe this will remove basically all the default create-react-app eslint rules. That's not quite the same as just fixing the problem in the question – Itu

How can this have so many upvotes? This is basically recommending to disable linter rules...? – Cotten

As mentioned above, this is just avoiding the problem by disabling linting rules, which you need, instead of fixing it. – Jovi

This is not fixing, just avoiding. – Radiocommunication

Answer 3

i also had same problem. so In my case, I found my node version was v12. so i got to know CRA v5.x which should be with >= node v14. so I switched to Node v16.10.0 and solved it.

Subtraction

Upgrading node version to 16.15.0 (LTS as of May 5th 2022) fixed this problem for me. I was originally on node version 12.19.0. – Altocumulus

Answer 4

I also found that I could resolve this issue by switching my node version to the LTS version.

• I experienced this issue when running node version 12.13.0
• Switching to version 16.14.2 resolves the issue for me.

Virgil

Answer 5

I experienced the same problem in webstorm with react. My solution after reading some other peoples comments was to use Eslint version 7.32.0 i was originally using 6.8 which was causing the problems and now it works. I also read that version 8 or higher is not supported

Implicit

Using version 8 did not work, I had to downgrade to 7.32.0. – Stadiometer

If you are using React Native and @react-native-community/eslint-config as I do, pull request #33448 makes ESLint 8 work. (A release containing this commit has not happened at the time of writing.) – Stadiometer

Answer 6

If anyone is still having this problem currently I managed to solve this error for myself by deleting the node-modules folder and the package-lock.json file. and then running npm install. This is also with Node and create-react-app @latest version.

Gomel

Answer 7

DISABLE_ESLINT_PLUGIN=true react-app-rewired start can avoid this error, and no need of ">= node v14" (even node10 can work), for only eslint@8 is using Module.createRequire, ref to doc Upgrade to react-scripts@5 and Add Web Workers support and APP PixelShapeRN commit Add Web Workers support for CRA v5 (and Webpack 5)

Laurenlaurena

Answer 8

for me, upgrading my node version from 12.12.0 to 16.0.0 helped. old node version create this problem mostly.

Evante

Answer 9

Updating node version to v16 will resolve this issue.

Use nvm command or download latest version of node to install update node version. Here is step if you want to use nvm

nvm install 16.16.0

This will install and update running node version use this to switch back to any node version present in your system

nvm use v14.14.0

Note: You can follow steps given below to install NVM in you system.

For MAC: https://tecadmin.net/install-nvm-macos-with-homebrew/

For Windows: https://tecadmin.net/install-nodejs-with-nvm-on-windows/

Shock

Answer 10

try using newer version of node to run your app. I had 12 and tried 16 and it fixed the issue.

Darsie

Answer 11

Faced the same issue in the WebStorm after upgrading to node v20.11.0. The reason was that I forgot to change the node interpreter in WebStorm's settings. After changing and restarting the WebStorm the error has vanished.

Philomel