CODEWITHSUNDEEP
javascriptreactjswebpacksocket.iovite
Two Horses
Two Horses

Reputation: 1692

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?

Upvotes: 7

Views: 2332

Answers (1)

Two Horses
Two Horses

Reputation: 1692

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

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

Upvotes: 3

Related Questions