Build fails with resolve errors - socket.io

Question

I am trying to setup socket.io-client inside a svelte component.
The docs say that I can do import { io } from 'socket.io-client'.
But when I try to run the app using the serve target, the command fails with the following logs:
Bundle complete. Watching for file changes...
Bundling...
'bufferutil' is imported by bufferutil?commonjs-external, but could not be resolved – treating it as an external dependency
'utf-8-validate' is imported by utf-8-validate?commonjs-external, but could not be resolved – treating it as an external dependency
Circular dependency: node_modules\util\util.js -> node_modules\util\node_modules\inherits\inherits.js -> node_modules\util\util.js
Circular dependency: node_modules\util\util.js -> node_modules\util\node_modules\inherits\inherits.js -> C:\Users\munda\Documents\upwork\upwork-gameshow\node_modules\util\util.js?commonjs-proxy -> node_modules\util\util.js
#rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
No name was provided for external module 'tty' in output.globals – guessing 'tty'
No name was provided for external module 'os' in output.globals – guessing 'os'
No name was provided for external module 'fs' in output.globals – guessing 'fs'
No name was provided for external module 'child_process' in output.globals – guessing 'require$$0'
No name was provided for external module 'http' in output.globals – guessing 'require$$1'
No name was provided for external module 'https' in output.globals – guessing 'require$$2'
No name was provided for external module 'net' in output.globals – guessing 'net'
No name was provided for external module 'tls' in output.globals – guessing 'tls'
No name was provided for external module 'crypto' in output.globals – guessing 'require$$0$3'
No name was provided for external module 'zlib' in output.globals – guessing 'zlib'
No name was provided for external module 'bufferutil' in output.globals – guessing 'require$$1$1'
No name was provided for external module 'stream' in output.globals – guessing 'require$$0$2'
No name was provided for external module 'utf-8-validate' in output.globals – guessing 'require$$0$1'
Creating a browser bundle that depends on Node.js built-in modules ("tty", "os", "http", "https", "zlib" and "stream"). You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
Steps I took to generate the app:
Initiate an nx-workspace using yarn create nx-workspace
Install the svelte generators using yarn add #nxext/svelte, link: https://nx.dev/community#:~:text=the%20Nx%20workflow-,%40nxext/svelte,-Nx%20plugin%20to
Generate a svelte application using the installed generator.
Add the socket.io client side code in the component (basic socket initialisation as mentioned in docs).
Since my server and client are not going to be hosted on the same domain, add the import { io } from 'socket.io-client' and initialize the socket using const socket = io(SERVER_URL)(in my case this was http://localhost:3000)
Install socket.io client using yarn socket.io-client.
Run the serve target using nx run-many --target=serve --all --parallel, fingers crossed.
Result: The above mentioned log.
What am I missing?

Answer 1

I needed to install the following missing dependencies:
bufferutil
utf-8-validate
A simple yarn add bufferutil utf-8-validate fixed it for me. This is mentioned in docs for socket.io-client package or socket.io official documentation website.
This did fix builds on my PC (windows) but I could not get the same thing running on mac. I tried deleting node_modules and yarn.lock, re-running yarn.
Finally I had to go through the CDN route.
This is how I did it:
Move the socket initialisation logic in a function.
<script>
...
const initialiseSocket = () => {
socket = io('http://localhost:3000');
socket.on('messages', (data) => {
//...
});
}
</script>
Add a svelte:head tag to load the socket-io.client from CDN and pass the function to this script's on:load.
<svelte:head>
<script
src="https://cdn.socket.io/4.2.0/socket.io.min.js"
integrity="sha384-PiBR5S00EtOj2Lto9Uu81cmoyZqR57XcOna1oAuVuIEjzj0wpqDVfD0JA9eXlRsj"
crossorigin="anonymous"
on:load={initialiseSocket}></script>
</svelte:head>