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
- npx create-react-app "myappname"
- cd "myappname"
- 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%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
‘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%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
‘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:
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
}
}
}
>Solution :
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.