Cannot find module 'webpack' using webpack-dev-server

Question

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"
  }
}

I think you need to install webpack-cli, and webpack-dev-server. You can try put "npx" before the command as well. — Pablo Darde
– Pablo Darde, Commented Mar 10, 2021 at 17:22
webpack is listed as a peer dependency, so npx should work with npm@^7.0.0 — MinusFour
– MinusFour, Commented Mar 10, 2021 at 18:13

zhulien · Accepted Answer · 2021-03-10 18:10:17Z

4

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.

answered Mar 10, 2021 at 18:10

zhulien

5,8154 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rdrgtec · Accepted Answer · 2021-03-10 18:09:19Z

2

Ok, as per Package.json I think it was missing to install webpack-dev-server.

After I've done that, the error changed:

Cannot find module 'webpack-cli/bin/config-yargs'

Reading a bit about it, some topics mentioned versions, but I believe all webpack components are on the latest:

webpack 5.24.4
webpack-cli 4.5.0
webpack-dev-server 3.11.2

Still have this issue to go...

answered Mar 10, 2021 at 18:09

rdrgtec

6562 gold badges14 silver badges30 bronze badges

Collectives™ on Stack Overflow

Cannot find module 'webpack' using webpack-dev-server

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related