与 Vite 捆绑的 React 应用程序中的 Socket.IO 不起作用（当与 Webpack 捆绑时它可以）

Question

我有一个迁移到 Vite 的 Create React App。
我使用socket.io-client 。

该应用程序的两个版本完全相同（只需复制/粘贴），除了捆绑器。

这是我的 websocket 连接

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

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

在 webpack 版本中，我可以在 .network 选项卡中看到 socket.io 正在尝试连接。

但在 vite 版本中它没有，它甚至不会抛出错误。

我怎样才能解决这个问题？ 这与 Vite 只支持 ESM 包而不支持 CommonJS 有什么关系吗？

Answer 1

最终我通过在连接中指定一个transports属性解决了这个问题，如下所示：

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

Answer 2

你有没有得到解决这个问题？ 我实际上使用 Vite 遇到了完全相同的问题，但使用的是 Vue 应用程序。 它在使用内置 Vite 开发服务器的开发过程中运行良好，但在为生产构建完全相同的代码后永远不会连接。