javascript - Cannot find module 'webpack' using webpack-dev-server - Stack Overflow

admin管理员组

文章数量:1313086

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

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

• javascript
• webpack
• webpack-dev-server

Share Improve this question Follow edited Mar 10, 2021 at 18:05 zhulien 5,71544 gold badges2424 silver badges3939 bronze badges asked Mar 10, 2021 at 17:17 rdrgtecrdrgtec 64022 gold badges1414 silver badges3030 bronze badges 4

• 1 Provide your package.json, please. – zhulien Commented Mar 10, 2021 at 17:20
• 1 I think you need to install webpack-cli, and webpack-dev-server. You can try put "npx" before the mand as well. – Pablo Darde Commented Mar 10, 2021 at 17:22
• 1 @zhulien edited to add Package.json – rdrgtec Commented Mar 10, 2021 at 17:56
• 1 webpack is listed as a peer dependency, so npx should work with npm@^7.0.0 – MinusFour Commented Mar 10, 2021 at 18:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 ponents as devDependencies as they're used in runtime, but it depends on your bundle build and configuration.

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 ponents 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...

本文标签： javascriptCannot find module 39webpack39 using webpackdevserverStack Overflow