node.js – ‘npm start’ returns error: “There might be a problem with the project dependency tree”

I’ve been stuck on this for over an hour. I followed every step listed. I deleted node_modules from my project and ALL node modules folders found on my mac. Then I deleted packagelock and then ran npm install which gave me a fresh nm and packagelock.

Running npm start keeps giving me the same error. I know it’s not my code because I can checkout another branch and I get the same error.

This all started when I installed react testing library and upgraded react-scripts from 2.1.1 to 4..
I upgraded due to an error after running a test that said something about react-scripts (I can’t remember what it said exactly.)

I have since reset my package.json to the old working version with the old react-scripts version and without the testing libraries, followed all the above steps again, and still have the error.

I don’t have webpack in dependencies or dev dependencies.

Here is my previously working package.json

{
    "name": "bidrlfront",
    "version": "1.0.0",
    "private": true,
    "homepage": "./",
    "dependencies": {
      "@date-io/moment": "^1.3.13",
      "@material-ui/core": "^4.12.3",
      "@material-ui/icons": "^4.11.2",
      "@material-ui/pickers": "^3.3.10",
      "camelize": "^1.0.0",
      "chart.js": "^2.7.3",
      "classnames": "^2.2.6",
      "cross-env": "^5.2.0",
      "css-loader": "^1.0.0",
      "dateformat": "^3.0.3",
      "flux": "^3.1.3",
      "lodash.find": "^4.6.0",
      "moment": "^2.29.1",
      "node-sass": "^4.14.1",
      "react": "^16.14.0",
      "react-bootstrap": "^1.6.1",
      "react-dom": "^16.6.3",
      "react-ga": "^2.5.6",
      "react-loading": "^2.0.3",
      "react-quill": "^1.3.3",
      "react-router": "^4.3.1",
      "react-router-dom": "^5.2.0",
      "react-scripts": "2.1.1",
      "shards-react": "^1.0.0",
      "shortid": "^2.2.14"
    },
    "scripts": {
      "start": "react-scripts start",
      "build:prod": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react REACT_APP_GAID=UA-115105611-1 npm run build",
      "build": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react react-scripts build",
      "test": "react-scripts test",
      "scss": "node-sass --watch -include-path src/css -o css",
      "eject": "react-scripts eject",
      "gitty": "node g.js"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
    ],
    "devDependencies": {
      "sass-loader": "^7.1.0"
    },
    "repository": {
      "type": "git",
      "url": "git+ssh://git@bitbucket.org/rldev2/bidrl-app.git"
    },
    "keywords": [],
    "author": "Stephanie Raymos <sraymos@rlliquidators.com>",
    "license": "ISC"
  }

And here is my package.json when the errors started occuring

{
    "name": "bidrlfront",
    "version": "1.0.0",
    "private": true,
    "homepage": "./",
    "dependencies": {
        "@date-io/moment": "^1.3.13",
        "@material-ui/core": "^4.12.3",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/pickers": "^3.3.10",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^12.0.0",
        "@testing-library/user-event": "^13.2.1",
        "camelize": "^1.0.0",
        "chart.js": "^2.7.3",
        "classnames": "^2.2.6",
        "cross-env": "^5.2.0",
        "css-loader": "^1.0.0",
        "dateformat": "^3.0.3",
        "flux": "^3.1.3",
        "lodash.find": "^4.6.0",
        "moment": "^2.29.1",
        "node-sass": "^4.14.1",
        "react": "^16.14.0",
        "react-bootstrap": "^1.6.1",
        "react-dom": "^16.6.3",
        "react-ga": "^2.5.6",
        "react-loading": "^2.0.3",
        "react-quill": "^1.3.3",
        "react-router": "^4.3.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^2.1.1",
        "shards-react": "^1.0.0",
        "shortid": "^2.2.14"
    },
    "scripts": {
        "start": "react-scripts start",
        "build:prod": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react REACT_APP_GAID=UA-115105611-1 npm run build",
        "build": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react react-scripts build",
        "test": "react-scripts test",
        "scss": "node-sass --watch -include-path src/css -o css",
        "eject": "react-scripts eject",
        "gitty": "node g.js"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "sass-loader": "^7.1.0"
    },
    "repository": {
        "type": "git",
        "url": "git+ssh://git@bitbucket.org/rldev2/bidrl-app.git"
    },
    "keywords": [],
    "author": "Stephanie Raymos <sraymos@rlliquidators.com>",
    "license": "ISC"
}

I had also globally installed testing library and fsevents prior to the error occuring but uninstalled those and trashed the folders on my mac.

I installed fsevents after receiving this error when I attempted to run my app after installing the testing libraries: Error: fsevents unavailable (this watcher can only be used on Darwin)

I was getting a blank screen. This solved that issue. I then got an error logging with my auth system. I was using rxjs. I had to install that. Got a react-scripts error and updated that to the latest version. That’s when everything broke. When I run npm ls webpack I get this:

├─┬ css-loader@1.0.1
│ └─┬ webpack@4.46.0
│   └─┬ terser-webpack-plugin@1.4.5
│     └── webpack@4.46.0 deduped
├─┬ react-scripts@2.1.1
│ ├─┬ babel-loader@8.0.4
│ │ └── webpack@4.46.0 deduped
│ ├─┬ css-loader@1.0.0
│ │ └── webpack@4.19.1 deduped
│ ├─┬ eslint-loader@2.1.1
│ │ └── webpack@4.46.0 deduped
│ ├─┬ file-loader@2.0.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ fork-ts-checker-webpack-plugin-alt@0.4.14
│ │ └── webpack@4.46.0 deduped
│ ├─┬ html-webpack-plugin@4.0.0-alpha.2
│ │ └── webpack@4.46.0 deduped
│ ├─┬ mini-css-extract-plugin@0.4.3
│ │ └── webpack@4.46.0 deduped
│ ├─┬ optimize-css-assets-webpack-plugin@5.0.1
│ │ └── webpack@4.46.0 deduped
│ ├─┬ sass-loader@7.1.0
│ │ └── webpack@4.19.1 deduped
│ ├─┬ terser-webpack-plugin@1.1.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ url-loader@1.1.1
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack-dev-server@3.1.9
│ │ ├─┬ webpack-dev-middleware@3.4.0
│ │ │ └── webpack@4.46.0 deduped
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack-manifest-plugin@2.0.4
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack@4.19.1
│ │ └─┬ uglifyjs-webpack-plugin@1.3.0
│ │   └── webpack@4.46.0 deduped
│ └─┬ workbox-webpack-plugin@3.6.3
│   └── webpack@4.46.0 deduped
└─┬ sass-loader@7.3.1
  └── webpack@4.46.0 deduped

Leave a Comment