Webpack-dev-server: Module not found: Error: Can't resolve 'ansi-html'...

Created on 5 Jun 2019  Â·  6Comments  Â·  Source: webpack/webpack-dev-server

  • Operating System: windows 10
  • Node Version: v10.15.3
  • NPM Version: 6.4.1
  • webpack Version: 4.33.0
  • webpack-dev-server Version: 3.5.1
  • [x] This is a bug
  • [ ] This is a modification request

Code

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve('./dist'),
        filename: '[name].[hash].js'
    },
    devServer: {
        contentBase: './dist'
    },
    resolve: {
        modules: ['test']
    },
    plugins: [new HtmlWebpackPlugin()]
}
//package.json
{
  "name": "webpack_play",
  "version": "1.0.0",
  "description": "",
  "main": "test.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.5.1"
  }
}



md5-f8abce7aa7a254c50937c7da14e7c248



// error log
i ï½¢wdsï½£: Project is running at http://localhost:8080/
i ï½¢wdsï½£: webpack output is served from /
i ï½¢wdsï½£: Content not from webpack is served from ./dist
× 「wdm」: Hash: 623e67ad5a88cbbf29da
Version: webpack 4.33.0
Time: 322ms
Built at: 2019-06-05 10:51:46
                       Asset       Size  Chunks             Chunk Names
                  index.html  201 bytes          [emitted]
main.623e67ad5a88cbbf29da.js   72.9 KiB    main  [emitted]  main
Entrypoint main = main.623e67ad5a88cbbf29da.js
[0] multi (webpack)-dev-server/client?http://localhost ./src/index.js 40 bytes {main} [built]
[./node_modules/node-libs-browser/node_modules/punycode/punycode.js] 14.3 KiB {main} [built]
[./node_modules/querystring-es3/decode.js] 2.45 KiB {main} [built]
[./node_modules/querystring-es3/encode.js] 2.48 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/url/util.js] 314 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 7.48 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/getCurrentScriptSource.js] (webpack)-dev-server/client/utils/getCurrentScriptSource.js 658 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.64 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/index.js] 90 bytes {main} [built]
    + 1 hidden module

ERROR in (webpack)-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'ansi-html' in 'C:\Users\lenovo\playground\webpack_play\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client/overlay.js 4:15-35
 @ (webpack)-dev-server/client?http://localhost
 @ multi (webpack)-dev-server/client?http://localhost ./src/index.js

ERROR in (webpack)-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'html-entities' in 'C:\Users\lenovo\playground\webpack_play\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client/overlay.js 6:15-39
 @ (webpack)-dev-server/client?http://localhost
 @ multi (webpack)-dev-server/client?http://localhost ./src/index.js

ERROR in (webpack)-dev-server/client?http://localhost
Module not found: Error: Can't resolve 'loglevel' in 'C:\Users\lenovo\playground\webpack_play\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost 12:10-29
 @ multi (webpack)-dev-server/client?http://localhost ./src/index.js

ERROR in (webpack)-dev-server/client/utils/reloadApp.js
Module not found: Error: Can't resolve 'loglevel' in 'C:\Users\lenovo\playground\webpack_play\node_modules\webpack-dev-server\client\utils'
 @ (webpack)-dev-server/client/utils/reloadApp.js 4:10-29
 @ (webpack)-dev-server/client?http://localhost
 @ multi (webpack)-dev-server/client?http://localhost ./src/index.js

ERROR in (webpack)-dev-server/client/socket.js
Module not found: Error: Can't resolve 'sockjs-client/dist/sockjs' in 'C:\Users\lenovo\playground\webpack_play\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client/socket.js 3:13-49
 @ (webpack)-dev-server/client?http://localhost
 @ multi (webpack)-dev-server/client?http://localhost ./src/index.js

ERROR in (webpack)-dev-server/client?http://localhost
Module not found: Error: Can't resolve 'strip-ansi' in 'C:\Users\lenovo\playground\webpack_play\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost 10:16-37
 @ multi (webpack)-dev-server/client?http://localhost ./src/index.js

ERROR in (webpack)-dev-server/client?http://localhost
Module not found: Error: Can't resolve 'webpack/hot' in 'C:\Users\lenovo\playground\webpack_play\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost 106:17-67
 @ multi (webpack)-dev-server/client?http://localhost ./src/index.js

ERROR in (webpack)-dev-server/client/utils/reloadApp.js
Module not found: Error: Can't resolve 'webpack/hot/emitter' in 'C:\Users\lenovo\playground\webpack_play\node_modules\webpack-dev-server\client\utils'
 @ (webpack)-dev-server/client/utils/reloadApp.js 20:21-51
 @ (webpack)-dev-server/client?http://localhost
 @ multi (webpack)-dev-server/client?http://localhost ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 376 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ï½¢wdmï½£: Failed to compile.

Expected Behavior

serve the bundle

Actual Behavior

Failed to compile

For Bugs; How can we reproduce the behavior?

I'm not sure, but I asked a few of my colleagues and they encountered the same problem. I'm really
wondering how come all this happened

Most helpful comment

a similar error

This dependency was not found:

* strip-ansi in ../test/node_modules/webpack-dev-server/client?http://0.0.0.0:8000

To install it, you can run: npm install --save strip-ansi


These relative modules were not found:

* ./emitter in ../test/node_modules/webpack/hot/dev-server.js
* ./js/test1 in ./index.js
* ./log in ../test/node_modules/webpack/hot/dev-server.js
* ./log-apply-result in ../test/node_modules/webpack/hot/dev-server.js
* ./overlay in ../test/node_modules/webpack-dev-server/client?http://0.0.0.0:8000
* ./socket in ../test/node_modules/webpack-dev-server/client?http://0.0.0.0:8000
...

why

resolve: {
      extensions: ['.ts', '.tsx', 'js', '.jsx'],
},
// -->
resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'], // there's a dot missing
},

All 6 comments

Thank you for reporting. this issue reproduces, so I'll investigate.

@lucsky you should change resolve.modules to resolve.modules: [path.resolve(__dirname, 'test'), 'node_modules']

thank you

@hiroppy could you provide a little more info on what was causing this problem?

I'm trying to use yarn pnp, and it needs to provide a "custom" resolve. There is a plugin for that at https://github.com/arcanis/pnp-webpack-plugin

But I'm still getting the same errors as reported in this issue.

a similar error

This dependency was not found:

* strip-ansi in ../test/node_modules/webpack-dev-server/client?http://0.0.0.0:8000

To install it, you can run: npm install --save strip-ansi


These relative modules were not found:

* ./emitter in ../test/node_modules/webpack/hot/dev-server.js
* ./js/test1 in ./index.js
* ./log in ../test/node_modules/webpack/hot/dev-server.js
* ./log-apply-result in ../test/node_modules/webpack/hot/dev-server.js
* ./overlay in ../test/node_modules/webpack-dev-server/client?http://0.0.0.0:8000
* ./socket in ../test/node_modules/webpack-dev-server/client?http://0.0.0.0:8000
...

why

resolve: {
      extensions: ['.ts', '.tsx', 'js', '.jsx'],
},
// -->
resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'], // there's a dot missing
},

@Iixianjie

Thanks that was issue, and also i was missing @babel/preset-react from modules

Was this page helpful?
0 / 5 - 0 ratings