Socket.IO in React app bundled with Vite doesnt work (When bundled with Webpack it does)

I have a Create React App that I migrated to Vite.
I use socket.io-client.

Both versions of the app are exactly the same (simply copy/paste) except the bundlers.

This is my websocket connection

import { io } from 'socket.io-client'

export function App() {
  useEffect(() => {
    io('http://my-server')
  })
}

In the webpack version I can see in the network tab that socket.io is attempting to connect.

But in the vite version it doesn’t, it doesn’t even throw an error.

How can I fix this? is this have anything to do with Vite only supporting ESM packages and not CommonJS?

Answer

Eventually I solved this by specifying a transports property in the connection, like so:

io('http://my-server', {
    transports: ['websocket'], // Required when using Vite      
})