webpack-dev-server fails with multiple "Module not found" errors

[stusherwin]

• Operating System: Windows 10 Pro version 1903 OS build 18362.535
• Node Version: 12.14.1
• NPM Version: 6.13.4
• webpack Version: 4.41.5 (^4.41.4)
• webpack-dev-server Version: 3.10.1 (^3.7.2)

• Browser: Firefox

• [x] This is a bug

• [ ] This is a modification request

Code

Package.json file (the dev script includes the argument --hot but it fails with or without this):

// package.json
{
  "name": "react-typescript-hooks",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "webpack": "webpack",
    "dev": "webpack-dev-server --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.2",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

Here's a stripped back repo which reproduces the error:
https://github.com/stusherwin/react-typescript-hooks

// webpack.config.js
let path = require('path');

module.exports = {
  mode: "production",

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  resolve: {
      extensions: [".ts", ".tsx"],
  },

  entry: [
    './src/index.tsx'
  ],

  devServer: {
    publicPath: "/dist/",
    compress: true,
    port: 9010
  },

  module: {
      rules: [
          {
              test: /\.ts(x?)$/,
              exclude: /node_modules/,
              use: [
                  {
                      loader: "ts-loader"
                  }
              ]
          },
          {
              enforce: "pre",
              test: /\.js$/,
              loader: "source-map-loader"
          },
      ]
  },

  externals: {
      "react": "React",
      "react-dom": "ReactDOM"
  }
};

Expected Behavior

Running the npm script dev should start webpack-dev-server.

d:\dev\react-typescript-hooks>npm run dev

> [email protected] dev d:\dev\react-typescript-hooks
> webpack-dev-server --hot

[... compiles and runs as normal]

Actual Behavior

It fails with multiple Module not found errors:

d:\dev\react-typescript-hooks>npm run dev

> [email protected] dev d:\dev\react-typescript-hooks
> webpack-dev-server --hot

i ｢wds｣: Project is running at http://localhost:9010/
i ｢wds｣: webpack output is served from /dist/
i ｢wds｣: Content not from webpack is served from d:\dev\react-typescript-hooks
× ｢wdm｣: Hash: 907195deb303c59de498
Version: webpack 4.41.5
Time: 2889ms
Built at: 01/15/2020 10:17:09
 2 assets
Entrypoint main = main.js main.js.map
[0] external "React" 42 bytes {0} [built]
[1] multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx 52 bytes {0} [built]
[2] (webpack)-dev-server/client?http://localhost:9010 4.29 KiB {0} [built]
[3] (webpack)/hot sync nonrecursive ^\.\/log$ 160 bytes {0} [built]
[4] (webpack)/hot/dev-server.js 1.59 KiB {0} [built]
[5] ./src/index.tsx 393 bytes {0} [built]
[6] external "ReactDOM" 42 bytes {0} [built]
[7] ./src/components/Hello.tsx 260 bytes {0} [built]
[8] multi ./src/index.tsx 28 bytes [built]

ERROR in (webpack)/hot/dev-server.js
Module not found: Error: Can't resolve './emitter' in 'd:\dev\react-typescript-hooks\node_modules\webpack\hot'
 @ (webpack)/hot/dev-server.js 50:18-38
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx

ERROR in (webpack)/hot/dev-server.js
Module not found: Error: Can't resolve './log' in 'd:\dev\react-typescript-hooks\node_modules\webpack\hot'
 @ (webpack)/hot/dev-server.js 11:11-27
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx

ERROR in (webpack)/hot/dev-server.js
Module not found: Error: Can't resolve './log-apply-result' in 'd:\dev\react-typescript-hooks\node_modules\webpack\hot'
 @ (webpack)/hot/dev-server.js 30:4-33
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx

ERROR in (webpack)-dev-server/client?http://localhost:9010
Module not found: Error: Can't resolve './overlay' in 'd:\dev\react-typescript-hooks\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9010 10:14-34
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx

ERROR in (webpack)-dev-server/client?http://localhost:9010
Module not found: Error: Can't resolve './socket' in 'd:\dev\react-typescript-hooks\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9010 8:13-32
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx

ERROR in (webpack)-dev-server/client?http://localhost:9010
Module not found: Error: Can't resolve './utils/createSocketUrl' in 'd:\dev\react-typescript-hooks\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9010 20:22-56
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx

ERROR in (webpack)-dev-server/client?http://localhost:9010
Module not found: Error: Can't resolve './utils/log' in 'd:\dev\react-typescript-hooks\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9010 12:15-37
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx

ERROR in (webpack)-dev-server/client?http://localhost:9010
Module not found: Error: Can't resolve './utils/reloadApp' in 'd:\dev\react-typescript-hooks\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9010 18:16-44
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx

ERROR in (webpack)-dev-server/client?http://localhost:9010
Module not found: Error: Can't resolve './utils/sendMessage' in 'd:\dev\react-typescript-hooks\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9010 16:18-48
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx

ERROR in (webpack)-dev-server/client?http://localhost:9010
Module not found: Error: Can't resolve 'strip-ansi' in 'd:\dev\react-typescript-hooks\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9010 6:16-37
 @ multi (webpack)-dev-server/client?http://localhost:9010 (webpack)/hot/dev-server.js ./src/index.tsx
i ｢wdm｣: Failed to compile.

For Bugs; How can we reproduce the behavior?

Clone the repo at https://github.com/stusherwin/react-typescript-hooks, run npm install and then npm run dev

[stusherwin]

I also uninstalled Node completely, deleted the npm and npm-cache folders and reinstalled the latest version, deleted the local node_modules and did a fresh npm install - same result.

I already looked at issues https://github.com/webpack/webpack-dev-server/issues/993 and https://github.com/webpack/webpack-dev-server/issues/2312 which seem to be similar but the fixes don't seem to apply in my case. In relation to #993 I did previously have extract-text-webpack-plugin and mini-css-extract-plugin installed at various points but I removed them all and created this repository and it still fails after a fresh install.

Interestingly webpack-dev-server --no-inline does work, but I want inline mode with HMR

[alexander-akait]

Please use

resolve: {
      extensions: [".wasm", ".ts", ".tsx", ".mjs", ".cjs", ".js", ".json"],
},

You break all js require

[stusherwin]

@evilebottnawi I'm sorry I don't understand, please can you explain a bit more? Why do I need those extensions? And why do I need to include them for webpack-dev-server but not webpack?

[alexander-akait]

Because webpack-dev-server uses require for client/overlay/other stuff, but extensions without js and other stuff forbid to resolve require for js files

[stusherwin]

OK I understand, I looked up the documentation for resolve.extensions at https://webpack.js.org/configuration/resolve/#resolveextensions and it says:

Using this will override the default array, meaning that webpack will no longer try to resolve modules using the default extensions.

As the default is ['.wasm', '.mjs', '.js', '.json'] specifying a different array will break any dependencies that rely on those extensions being resolved.

This is confusing for people who are learning how to use webpack as they, like I did, follow tutorials like this one which is where I got this section from:

resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx"]
    },

This is incorrect but it's not obvious why, as everything works using webpack and only starts failing when you switch to using webpack-dev-server later on. It's a problem with the tutorials out there and maybe webpack-dev-server documentation could cover this better? Just wanted to get an explanation out there of what's going on so people in my situation know what's causing the issue and how to fix it.

[alexander-akait]

Typescript documentation is invalid and misleading, because webpack support also wasm, json, js, you can send a PR to typescript docs. I think it is out of scope webpack-dev-server documentation, because using that resolve configuration can affect on other webpack plugins/loaders.

In next major version we bundle our client so this problem never happens again. But it is not mean what typescript should fix the example.