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

Question

I am trying to deploy my react app on GCP. So in Gcloud shell, I cloned my react project and typed

npm install
npm run build

However, I got this error:

ERROR in Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'
Require stack:
- /home/oizfwvlh/Portfolio/portfolio/node_modules/eslint-plugin-flowtype/dist/utilities/getBuiltinRule.js
- /home/oizfwvlh/Portfolio/portfolio/node_modules/eslint-plugin-flowtype/dist/rules/noUnusedExpressions.js
- /home/oizfwvlh/Portfolio/portfolio/node_modules/eslint-plugin-flowtype/dist/index.js
- /home/oizfwvlh/Portfolio/portfolio/node_modules/@eslint/eslintrc/dist/eslintrc.cjs

I have no idea why. I did not have this issue at all when I was testing on my PC. Here is my package.json:

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.5",
    "@mui/material": "^5.2.5",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "chart.js": "^3.7.0",
    "chartjs-plugin-deferred": "^1.0.2",
    "emailjs-com": "^3.2.0",
    "jquery": "^3.6.0",
    "node-sass": "^7.0.0",
    "popper.js": "^1.16.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.0",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-vertical-timeline-component": "^3.5.2",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I tried to install the eslint package both locally and globally, but none of these works. It could be a environment thing since I'm straight deploying on GShell, but I still don't know how to fix this. I need some help.

Answer 1

I believe Ryan has linked an appropriate stackoverflow thread, where a community user has provided a good answer. I am posting that as an answer for whoever is visiting this question to find the solution.

What's happening is that when you run npm start it's probably doing some checks with eslint. create-react-app has some checks that break your build if you have eslint errors so it 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 its 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, what's causing this problem is that a fix was to be made 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.

An issue is raised with create-react-app to swap out the plugin with the new one which would have more maintenance and solve issues that you're experiencing. The issue link is here.