reactjsnpmwebpackwebpack-dev-servernpm-start

"Module not found" Error When Starting a React Project | webpack-dev-server error


I've been encountering a consistent 'Module not found' error whenever I run npm start or yarn start on my local machine. This error occurs every time I create a new project on my local machine but when I clone projects from GitHub, I don't encounter this error.

Here is the exact error I'm getting, any solution would be great.

Failed to compile.

Module not found: Error: Can't resolve 'E:\REACT PROJECT\clone\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in 'E:\REACT PROJECT\clone'
ERROR in Module not found: Error: Can't resolve 'E:\REACT PROJECT\clone\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true' in 'E:\REACT PROJECT\clone'

webpack compiled with 1 error


package.json file

{
  "name": "linkedin-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "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've tried these troubleshooting steps bunch of times but got no results,


Solution

  • Run following command:

    npm install -g --force
    

    The use of --force can be helpful in situations where you want to ensure that a global package is installed or updated regardless of potential conflicts or issues. However, it should be used with caution, as it can potentially override or interfere with existing packages or cause unexpected behavior in your system.

    It's a good practice to use --force sparingly and only when you have a specific reason to do so, such as troubleshooting issues with a particular package. Always be cautious when forcefully reinstalling packages, especially global ones, as it may have unintended consequences.