webpack-dev-server raise “Module not found: Error: Can't resolve” when `npx webpack-dev-server`

Question

here is my project to test webpack-dev-server

here is my package.json

{
  "dependencies": {
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0",
    "css-loader": "^3.5.3",
    "serve": "^11.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

here is webpack port

const path = require('path');

module.exports = {
  entry: ['./src/t.js', "./src/t2.js"],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },

  devServer: {
    port:9000
  },

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [ 'css-loader'],
      },
    ],
  },

  resolve: {
    modules: [
      path.resolve(__dirname, "src")
    ],
  },
  devtool: "source-map"
};

when i run npx webpack-dev-server

ERROR in (webpack)-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'ansi-html' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client/overlay.js 4:15-35
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'html-entities' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client/overlay.js 6:15-39
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client/utils/log.js
Module not found: Error: Can't resolve 'loglevel' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client/utils'
 @ (webpack)-dev-server/client/utils/log.js 3:10-29
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client/clients/SockJSClient.js
Module not found: Error: Can't resolve 'sockjs-client/dist/sockjs' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client/clients'
 @ (webpack)-dev-server/client/clients/SockJSClient.js 28:13-49
 @ (webpack)-dev-server/client/socket.js
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client?http://localhost:9000
Module not found: Error: Can't resolve 'strip-ansi' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:9000 6:16-37
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client?http://localhost:9000
Module not found: Error: Can't resolve 'webpack/hot' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:9000 76:17-67
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client/utils/reloadApp.js
Module not found: Error: Can't resolve 'webpack/hot/emitter' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client/utils'
 @ (webpack)-dev-server/client/utils/reloadApp.js 21:21-51
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

Answer 1

I find the solution: in webpack.config.js, I should manually specific node_modules path in resolve for ex:

module.exports = {
  resolve: {
    modules: [
      path.resolve(__dirname, "src"),
      path.resolve(__dirname, "node_modules")
    ],
  },
}