Module not found: Error: Can't resolve './xxxxxxx'

[liesauer]

Bug report

Actual Behavior

after run webpack serve, it says lots of Module not found: Error: Can't resolve './xxxxxx'

here is my config

    mode: "development",
    devtool: "inline-source-map",
    devServer: {
        static: "./dist",
        https: true,
    },

ERROR in ./node_modules/html-entities/lib/index.js 14:25-54
Module not found: Error: Can't resolve './named-references' in 'C:\Users\user\Desktop\app\node_modules\html-entities\lib'
 @ ./node_modules/webpack-dev-server/client/overlay.js 4:0-39 198:26-32
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=wss%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true 13:0-57 139:6-10 197:6-10 206:6-10 237:27-40 254:6-10 271:28-41 288:6-10 302:6-10

ERROR in ./node_modules/html-entities/lib/index.js 15:28-60
Module not found: Error: Can't resolve './numeric-unicode-map' in 'C:\Users\user\Desktop\app\node_modules\html-entities\lib'
 @ ./node_modules/webpack-dev-server/client/overlay.js 4:0-39 198:26-32
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=wss%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true 13:0-57 139:6-10 197:6-10 206:6-10 237:27-40 254:6-10 271:28-41 288:6-10 302:6-10

ERROR in ./node_modules/html-entities/lib/index.js 16:24-52
Module not found: Error: Can't resolve './surrogate-pairs' in 'C:\Users\user\Desktop\app\node_modules\html-entities\lib'
 @ ./node_modules/webpack-dev-server/client/overlay.js 4:0-39 198:26-32
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=wss%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true 13:0-57 139:6-10 197:6-10 206:6-10 237:27-40 254:6-10 271:28-41 288:6-10 302:6-10

ERROR in ./node_modules/webpack/hot/dev-server.js 11:11-27
Module not found: Error: Can't resolve './log' in 'C:\Users\user\Desktop\app\node_modules\webpack\hot'

ERROR in ./node_modules/webpack/hot/dev-server.js 30:4-33
Module not found: Error: Can't resolve './log-apply-result' in 'C:\Users\user\Desktop\app\node_modules\webpack\hot'

ERROR in ./node_modules/webpack/hot/dev-server.js 50:18-38
Module not found: Error: Can't resolve './emitter' in 'C:\Users\user\Desktop\app\node_modules\webpack\hot' 

Expected Behavior

start the dev server without errors.

How Do We Reproduce?

1. create a new webpack project with webpack-dev-server 4.10.1
2. using the config above
3. webpack serve

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: Windows 10 10.0.19043
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz     
    Memory: 8.85 GB / 15.87 GB
  Binaries:
    Node: 16.15.0 - D:\web\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.18.0 - D:\web\nodejs\npm.CMD
  Browsers:
    Chrome: 104.0.5112.102
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.70)
    Internet Explorer: 11.0.19041.1566
  Packages:
    copy-webpack-plugin: ^11.0.0 => 11.0.0
    ts-loader: ^9.3.1 => 9.3.1
    webpack: ^5.74.0 => 5.74.0
    webpack-cli: ^4.10.0 => 4.10.0
    webpack-dev-server: 4.10.1 => 4.10.1

[alexander-akait]

Please provide a reproducble test repo, sounds like you have broken env. Are you using yarn?

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

[xing-lin]

Hi, I also encountered this problem recently, and then I found out that it can be solved by adding .js in extensions.

// webpack.config.js

// before ,  ERROR in ./node_modules/html-entities/lib/index.js ...
module.exports = {
  ...,
  resolve: {
    extensions: [".ts", ".tsx"],
  }
}

// after
module.exports = {
  ...,
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  }
}

Hope my answer can help you!

[ranemihir]

I also encountered the same issue recently and resolved it by adding .js. But how does it solve the issue though? (Just curious)

[xing-lin]

My guess is that not all packages have corresponding typescript versions , like @types/react. When the code is run, the package entry that is introduced is a .js type file.