Ws: Module not found Warning when using ws in a webpack bundle

[crazyyi]

WARNING in ./~/ws/lib/Validation.js
Module not found: Error: Can't resolve 'utf-8-validate' in '/.../node_modules/ws/lib'
 @ ./~/ws/lib/Validation.js 10:22-47
 @ ./~/ws/lib/Receiver.js
 @ ./~/ws/index.js
 @ ./src/main.js
 @ multi webpack-hot-middleware/client?reload=true ./src/main.js

WARNING in ./~/ws/lib/BufferUtil.js
Module not found: Error: Can't resolve 'bufferutil' in '/.../node_modules/ws/lib'
 @ ./~/ws/lib/BufferUtil.js 35:21-42
 @ ./~/ws/lib/Receiver.js
 @ ./~/ws/index.js
 @ ./src/main.js
 @ multi webpack-hot-middleware/client?reload=true ./src/main.js

Do I have to install bufferutil and utf-8-validate module to remove the warning? Why are these two modules separated from the main module? How do I know when I need to use them? I haven't written anything related to these two modules. I think maybe ws uses these two modules.

[crazyyi]

I think it is because I "require" the ws module in the browser code. But I hope the project example should point it out that ws module is not required on the client side.

[lpinca]

This is a recurring issue, we already have a note at the beginning of the README but it seems it is not sufficient. ws does not work in the browser, the native WebSocket object must be used instead. See https://github.com/websockets/ws/issues/1117#issuecomment-302865063.

[lpinca]

Closing, feel free to continue discussing on the closed thread.

[dalen]

Getting the same issue when using serverless-webpack to package a AWS Lambda that includes ws through @slack/client. Webpack tries to resolve all the modules and package it up into a small file, but it fails as ws includes devDependencies in the files.

[chengjia0807]

any solution on this?

[eric-burel]

Hi, I get this issue in the main process of an Electron app. This is a Node process, not a client process.

[hrmoller]

@dalen Did you find a solution? I have the exact same case as you.

[dalen]

@hrmoller yes, I added bufferutil and utf-8-validate as externals in the webpack config: https://github.com/fishbrain/codebuild-slack-notifier/blob/master/webpack.config.js#L23-L24

Works as a workaround for now at least.

[vjau]

The problem is still there on Electron main thread (== node code, not browser).
I have implemented the fix from @dalen with success.
I post it there since his his gist is 404

// in webpack.config.js
externals: {
      bufferutil: "bufferutil",
      "utf-8-validate": "utf-8-validate",
    }

[regnaio]

This workaround using webpack-node-externals worked for me. See the section under _webpack-back.config.js_

https://medium.com/code-oil/webpack-javascript-bundling-for-both-front-end-and-back-end-b95f1b429810