webpack-dev-server: Missing some required dependencies in very simple setup
I have created very simple project as to show very simple setup of typescript, webpack and webpack-dev-server. But unfortunately it doesn’t work with minimal dependencies configured.
What is the current behavior? I have errors when executing webpack-dev-server
ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve './socket' in 'C:\Work\Projects\sample-app-step1\node_modules\webpack-dev-server\client'
@ (webpack)-dev-server/client?http://localhost:8080 4:13-32
@ multi app
ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'strip-ansi' in 'C:\Work\Projects\sample-app-step1\node_modules\webpack-dev-server\client'
@ (webpack)-dev-server/client?http://localhost:8080 3:16-37
@ multi app
ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'webpack/hot/emitter' in 'C:\Work\Projects\sample-app-step1\node_modules\webpack-dev-server\clien
t'
@ (webpack)-dev-server/client?http://localhost:8080 144:19-49
@ multi app
ERROR in ./~/url/url.js
Module not found: Error: Can't resolve './util' in 'C:\Work\Projects\sample-app-step1\node_modules\url'
@ ./~/url/url.js 25:11-28
@ (webpack)-dev-server/client?http://localhost:8080
@ multi app
ERROR in ./~/querystring-es3/index.js
Module not found: Error: Can't resolve './decode' in 'C:\Work\Projects\sample-app-step1\node_modules\querystring-es3'
@ ./~/querystring-es3/index.js 3:33-52
@ ./~/url/url.js
@ (webpack)-dev-server/client?http://localhost:8080
@ multi app
ERROR in ./~/querystring-es3/index.js
Module not found: Error: Can't resolve './encode' in 'C:\Work\Projects\sample-app-step1\node_modules\querystring-es3'
@ ./~/querystring-es3/index.js 4:37-56
@ ./~/url/url.js
@ (webpack)-dev-server/client?http://localhost:8080
@ multi app
If the current behavior is a bug, please provide the steps to reproduce. Repository: https://github.com/megaboich/sample-app-step1
What is the expected behavior? Just work without errors
Please mention your webpack and Operating System version. Windows 10
{
"name": "sample-app-step1",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"html-webpack-plugin": "2.24.1",
"ts-loader": "1.3.3",
"typescript": "2.1.4",
"webpack": "2.2.0-rc.1",
"webpack-dev-server": "2.2.0-rc.0"
}
}
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 8
- Comments: 16
Ok, I found what caused the issue. It was webpack configuration. It was:
Missing .js is critical So, correct one is:
I had the same issue, just a little typo was giving me headaches. I wrote ‘js’ instead of ‘.js’
Wrong resolve: { extensions: [‘.ts’, ‘js’] // Missing dot },
Correct resolve: { extensions: [‘.ts’, ‘.js’] },
Kinda sucks you have to resolve js extensions when your app contains no Javascript 🤷♂️
Another potential cause of this problem is when the modules option does not contain the project’s ‘node_modules’ folder.
resolve: { extensions: [ ‘.js’, ‘.json’ ], modules: [ jsFolderPath, path.join(__dirname, ‘node_modules’) ], }
if this piece of code “path.join(__dirname, ‘node_modules’)” is missing from the “modules” array or the path is incorrect you will get the same error.
Please do not install the above mentioned packages (the ones listed in the terminal output) globally. Installing packages globally is almost never the solution to any problem. Global packages should almost always be avoided. The only global packages which are appropriate are packages used to initially create a project/package (ex: Yeoman, NPM, Bower), otherwise the package should be installed within the project/package, and referenced locally from “./node_modules/.bin”. This is always better as you ensure other developers will not have conflicts between versions of global packages. Also, when the package’s dependencies are installed with ‘npm i’, there is no need to do additional installation steps with global packages. Finally, many new Node.js developers on Mac/Linux run into issues with file system permissions and global packages. We do not want them using sudo to run code downloaded from the Internet.
help me pls
@aamirkhan-91 webpack-dev-server injects some stuff into your site to implement the auto-reloading. This is in .js files.
I got the same issue when using a symlink for
node_modules. When I replaced this with a local directory, the errors resolved.Thanks megaboich. Exactly what I needed