title: Webpack-dev-server throws errors about files missing in node_modules/webpack-dev-server
body: <p>I am trying to simply run <code>webpack serve -c myconfig.js</code>, but I keep getting these errors:</p>
  <pre><code>ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 6:16-37
  Module not found: Error: Can't resolve 'strip-ansi' in '/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client'
  
  ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 8:13-32
  Module not found: Error: Can't resolve './socket' in '/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client'
  
  ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 10:14-34
  Module not found: Error: Can't resolve './overlay' in '/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client'
  
  ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 12:15-37
  Module not found: Error: Can't resolve './utils/log' in '/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client'
  
  ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 16:18-48
  Module not found: Error: Can't resolve './utils/sendMessage' in '/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client'
  
  ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 18:16-44
  Module not found: Error: Can't resolve './utils/reloadApp' in '/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client'
  
  ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 20:22-56
  Module not found: Error: Can't resolve './utils/createSocketUrl' in '/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client'
  </code></pre>
  <p>If I try to add hot reload, it gets even worse (additional errors, all about smth missing from node_modules).</p>
  <p>Here's the code:</p>
  <p><code>package.json</code></p>
  <pre><code>{
    &quot;name&quot;: &quot;webpack-example&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;private&quot;: &quot;true&quot;,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;npx webpack serve -c webpack.dev.js&quot;,
      &quot;build&quot;: &quot;npx webpack --config webpack.prod.js&quot;
    },
    &quot;repository&quot;: {
      &quot;type&quot;: &quot;git&quot;,
      &quot;url&quot;: &quot;git+ssh://git@gitlab.com/iron.alex/webpack-example.git&quot;
    },
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;devDependencies&quot;: {
      &quot;clean-webpack-plugin&quot;: &quot;^4.0.0-alpha.0&quot;,
      &quot;css-loader&quot;: &quot;^5.2.4&quot;,
      &quot;ftp-deploy&quot;: &quot;^2.4.1&quot;,
      &quot;html-loader&quot;: &quot;^2.1.2&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^5.3.1&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^1.5.0&quot;,
      &quot;node-sass&quot;: &quot;^5.0.0&quot;,
      &quot;sass&quot;: &quot;^1.32.11&quot;,
      &quot;sass-loader&quot;: &quot;^11.0.1&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;ts-loader&quot;: &quot;^9.1.0&quot;,
      &quot;typescript&quot;: &quot;^4.2.4&quot;,
      &quot;webpack&quot;: &quot;^5.35.1&quot;,
      &quot;webpack-cli&quot;: &quot;^4.6.0&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.2&quot;,
      &quot;webpack-merge&quot;: &quot;^5.7.3&quot;
    }
  }
  </code></pre>
  <p><code>webpack.dev.js</code></p>
  <pre><code>const path = require(&quot;path&quot;);
  const common = require(&quot;./webpack.common.js&quot;);
  const { merge } = require(&quot;webpack-merge&quot;);
  const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
  
  module.exports = merge(common, {
    output: {
      filename: &quot;[name].bundle.js&quot;,
      path: path.resolve(__dirname, &quot;dev&quot;),
    },
    module: {
      rules: [
        {
          test: /\.scss$/i,
          use: [&quot;style-loader&quot;, &quot;css-loader&quot;, &quot;sass-loader&quot;],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: &quot;./src/index.html&quot;,
      }),
    ],
    mode: &quot;development&quot;,
    //   https://www.youtube.com/watch?v=yR25JoybTxo
    devServer: {
      contentBase: path.join(__dirname, &quot;dev&quot;),
      compress: true,
      port: 9000,
    },
  });
  </code></pre>
  <p><code>webpack.common.js</code></p>
  <pre><code>const path = require(&quot;path&quot;);
  
  module.exports = {
    entry: {
      index: &quot;./src/scripts/index.ts&quot;,
      library: &quot;./src/scripts/library.ts&quot;,
    },
    resolve: {
      extensions: [&quot;.ts&quot;],
    },
    module: {
      rules: [
        {
          test: /\.ts?$/,
          use: &quot;ts-loader&quot;,
          exclude: /node_modules/,
        },
        {
          test: /\.html$/i,
          loader: &quot;html-loader&quot;,
        },
      ],
    },
  };
  </code></pre>
  <p>I tried reinstalling node_modules, but with no luck. I added an issue on github, but not sure what else to do/how to fix it.</p>
  <p><a href="https://github.com/webpack/webpack-dev-server/issues/3221" rel="nofollow noreferrer">https://github.com/webpack/webpack-dev-server/issues/3221</a></p>
  <p>Any ideas what I'm missing?</p>
  <p>Webpack builds without <code>serve</code></p>