与 Vite 捆绑的 React 应用程序中的 Socket.IO 不起作用（与 Webpack 捆绑时会起作用）答案

【问题标题】：Socket.IO in React app bundled with Vite doesnt work (When bundled with Webpack it does)与 Vite 捆绑的 React 应用程序中的 Socket.IO 不起作用（与 Webpack 捆绑时会起作用）
【发布时间】：2022-05-24 04:19:25
【问题描述】：

我有一个迁移到 Vite 的 Create React 应用程序。
我用socket.io-client。

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

这是我的 websocket 连接

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

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

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

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

我该如何解决这个问题？这和 Vite 只支持 ESM 包而不支持 CommonJS 有什么关系吗？

【问题讨论】：

标签： javascript reactjs webpack socket.io vite

【解决方案1】：

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

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

【讨论】：