Trying to get familiar to chat apps using this tutorial.
Everything looks good, but when I try to run npm run watch
according to the directions in the end, I get an error with npm, mentioning the error is not with npm.
This watch
script was created to run the following script:
webpack-dev-server --compress --history-api-fallback --progress --host 0.0.0.0 --port 3005
When I try to run this line using npx
, I get the following error:
Cannot find module 'webpack' Require stack: - /home/user/.npm/_npx/47997/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js
This is my webpack.config.js
:
module.exports = { devtool: 'source-map', entry: './src/index.tsx', output: { filename: './build/client.js', }, resolve: { extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'] }, module: { loaders: [{ test: /.tsx?$/, loader: 'ts-loader' }] } };
I have tried to install webpack
and webpack-cli
a couple of times, and it did not correct the error. Tried to delete node_modules
and package-lock.json
and then reinstall the modules, and nothing happened as well. Any suggestions?
Adding package.json
:
{ "name": "rcweb", "version": "1.0.0", "description": "rcweb", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "watch": "webpack-dev-server --compress --history-api-fallback --progress --host 0.0.0.0 --port 3005" }, "author": "", "license": "ISC", "devDependencies": { "@types/react": "^17.0.3", "@types/react-redux": "^7.1.16", "react": "^17.0.1", "react-dom": "^17.0.1", "react-redux": "^7.2.2", "redux": "^4.0.5", "ts-loader": "^8.0.17", "typescript": "^4.2.3", "webpack": "^5.24.4", "webpack-cli": "^4.5.0", "webpack-dev": "^1.1.1" } }
Advertisement
Answer
You need to install webpack-dev-server
instead of webpack-dev
. Update your package.json
then delete your node_modules
and npm install
everything anew.
Also, I am not sure it is a very good idea to use react and related components as devDependencies
as they’re used in runtime, but it depends on your bundle build and configuration.