Home > Enterprise >  running any react project is giving following error
running any react project is giving following error

Time:10-28

I am using version of npm (8.19.0), node (v16.13.1) and latest version of react. I used to create a new project using

  1. npx create-react-app "myappname"
  2. cd "myappname"
  3. npm start. It used to show me default react starting page and it was working fine.

but this morning, while I was learning to use react with MS SignalR and I do not know what I have changed unknowingly on my system that suddenly for every app. I am getting following error. This is now coming for even newly created apps also

Failed to compile.

Module not found: Error: Can't resolve 'C:\Users\abc\Documents\Study\c#\Project\LearningDotNetCore\POC\demo\node_modules\webpack-dev-server\client\index.js?protocol=ws:&hostname=0.0.0.0&port=3000&pathname=/ws&logging=none&overlay={"errors":true,"warnings":false}&reconnect=10&hot=true&live-reload=true' in 'C:\Users\abc\Documents\Study\c#\Project\LearningDotNetCore\POC\demo' ERROR in Module not found: Error: Can't resolve 'C:\Users\abc\Documents\Study\c#\Project\LearningDotNetCore\POC\demo\node_modules\webpack-dev-server\client\index.js?protocol=ws:&hostname=0.0.0.0&port=3000&pathname=/ws&logging=none&overlay={"errors":true,"warnings":false}&reconnect=10&hot=true&live-reload=true' in 'C:\Users\abc\Documents\Study\c#\Project\LearningDotNetCore\POC\demo'

webpack compiled with 1 error

Please let me know how to fix this issue. I do not want to reset my system completely as I have lot of data. and looking at error I can see protocol = ws which is giving me sign that It has something to do with microsoft signal R.

My package.json is as follow:

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "webpack-dev-server": "^4.11.1"
  },
  "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"
    ]
  }
}

content of webpack-dev-server/client/index.js:

enter image description here

Content of webpack package.json are as follow:

{
  "name": "webpack-dev-server",
  "version": "4.11.1",
  "description": "Serves a webpack app. Updates the browser on changes.",
  "bin": "bin/webpack-dev-server.js",
  "main": "lib/Server.js",
  "types": "types/lib/Server.d.ts",
  "author": "Tobias Koppers @sokra",
  "bugs": "https://github.com/webpack/webpack-dev-server/issues",
  "homepage": "https://github.com/webpack/webpack-dev-server#readme",
  "repository": "https://github.com/webpack/webpack-dev-server",
  "license": "MIT",
  "funding": {
    "type": "opencollective",
    "url": "https://opencollective.com/webpack"
  },
  "files": [
    "bin",
    "lib",
    "client",
    "types"
  ],
  "engines": {
    "node": ">= 12.13.0"
  },
  "scripts": {
    "fmt:check": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
    "lint:js": "eslint . --cache",
    "lint:types": "tsc --pretty --noEmit",
    "lint": "npm-run-all -p \"fmt:**\" \"lint:**\"",
    "fmt": "npm run fmt:check -- --write",
    "fix:js": "npm run lint:js -- --fix",
    "fix": "npm-run-all fix:js fmt",
    "commitlint": "commitlint --from=master",
    "build:client": "rimraf ./client/* && babel client-src/ --out-dir client/ --ignore \"client-src/webpack.config.js\" --ignore \"client-src/modules\" && webpack --config client-src/webpack.config.js",
    "build:types": "rimraf ./types/* && tsc --declaration --emitDeclarationOnly --outDir types && node ./scripts/extend-webpack-types.js && prettier \"types/**/*.ts\" --write && prettier \"types/**/*.ts\" --write",
    "build": "npm-run-all -p \"build:**\"",
    "test:only": "jest",
    "test:coverage": "npm run test:only -- --coverage",
    "test:watch": "npm run test:coverage --watch",
    "test": "npm run test:coverage",
    "pretest": "npm run lint",
    "prepare": "husky install && npm run build",
    "release": "standard-version"
  },
  "dependencies": {
    "@types/bonjour": "^3.5.9",
    "@types/connect-history-api-fallback": "^1.3.5",
    "@types/express": "^4.17.13",
    "@types/serve-index": "^1.9.1",
    "@types/serve-static": "^1.13.10",
    "@types/sockjs": "^0.3.33",
    "@types/ws": "^8.5.1",
    "ansi-html-community": "^0.0.8",
    "bonjour-service": "^1.0.11",
    "chokidar": "^3.5.3",
    "colorette": "^2.0.10",
    "compression": "^1.7.4",
    "connect-history-api-fallback": "^2.0.0",
    "default-gateway": "^6.0.3",
    "express": "^4.17.3",
    "graceful-fs": "^4.2.6",
    "html-entities": "^2.3.2",
    "http-proxy-middleware": "^2.0.3",
    "ipaddr.js": "^2.0.1",
    "open": "^8.0.9",
    "p-retry": "^4.5.0",
    "rimraf": "^3.0.2",
    "schema-utils": "^4.0.0",
    "selfsigned": "^2.1.1",
    "serve-index": "^1.9.1",
    "sockjs": "^0.3.24",
    "spdy": "^4.0.2",
    "webpack-dev-middleware": "^5.3.1",
    "ws": "^8.4.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.3",
    "@babel/core": "^7.17.5",
    "@babel/eslint-parser": "^7.17.0",
    "@babel/plugin-transform-object-assign": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/runtime": "^7.17.2",
    "@commitlint/cli": "^16.2.3",
    "@commitlint/config-conventional": "^16.2.1",
    "@types/compression": "^1.7.2",
    "@types/default-gateway": "^3.0.1",
    "@types/node-forge": "^1.0.4",
    "@types/rimraf": "^3.0.2",
    "@types/sockjs-client": "^1.5.1",
    "@types/trusted-types": "^2.0.2",
    "acorn": "^8.2.4",
    "babel-jest": "^28.1.3",
    "babel-loader": "^8.2.4",
    "body-parser": "^1.19.2",
    "core-js": "^3.21.1",
    "css-loader": "^5.2.4",
    "eslint": "^8.12.0",
    "eslint-config-prettier": "^8.4.0",
    "eslint-config-webpack": "^1.2.5",
    "eslint-plugin-import": "^2.23.2",
    "execa": "^5.1.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.2",
    "http-proxy": "^1.18.1",
    "husky": "^7.0.0",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "klona": "^2.0.4",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "lint-staged": "^12.3.4",
    "marked": "^4.0.12",
    "memfs": "^3.2.2",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.6.1",
    "puppeteer": "^13.4.1",
    "require-from-string": "^2.0.2",
    "rimraf": "^3.0.2",
    "sockjs-client": "^1.6.1",
    "standard-version": "^9.3.0",
    "strip-ansi-v6": "npm:strip-ansi@^6.0.0",
    "style-loader": "^2.0.0",
    "supertest": "^6.1.3",
    "tcp-port-used": "^1.0.2",
    "typescript": "^4.7.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.71.0",
    "webpack-cli": "^4.7.2",
    "webpack-merge": "^5.8.0"
  },
  "peerDependencies": {
    "webpack": "^4.37.0 || ^5.0.0"
  },
  "peerDependenciesMeta": {
    "webpack-cli": {
      "optional": true
    }
  }
}

CodePudding user response:

Remove the # from your project path, which Webpack (on windows) incorrectly interprets as a URL fragment.

Thats why it attempts to do strange things like appending query paramaters to a file path.

  • Related