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

Question

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,

• reinstalling Node.js and npm/Yarn.
• Cleaned the project folder by deleting node_modules and package-lock.json.
• Verified that the project structure and configuration are correct.
• Tried using npm install -g npm also but the error did not resolved.

Answer 1

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.