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 #1117 (comment).

[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

[n42k]

const WebSocketServer = __non_webpack_require__('ws').Server; worked for me.

[pranavwani]

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

Actually works thanks

[ernestostifano]

Just some notes for anyone that might land here in the future:

• Webpack can (and some times should/must be used to bundle non-browser apps).
• Generally, when you decide to bundle your back-end/server code (lambdas, scalable containers, etc.) you want the resulting bundle to be self-contained and ready to run (no need to install, no need for any node_modules).
• In such cases, using Webpack's externals or anything similar, is not correct.
• To properly solve this issue in these cases, you should manually install bufferutil and utf-8-validate so Webpack can find them and bundle them properly (they will be tree-shaked if not needed).

Note for ws maintainers (@lpinca):

• Using Webpack or other bundlers for NodeJS is becoming popular (it brings lots of benefits in modern development).
• We should figure out a way of making those modules opt-in without breaking webpack builds. At least we should document this.
• I am open to help (right now I am in a bit of a rush, but I think there are different ways we can improve this).