Vite打包的React应用中Socket.IO无法连接，Webpack打包时运行正常

该问题和Vite不支持CommonJS包无关，Vite内置了CommonJS到ESM的转换能力，可正常处理绝大多数CommonJS规范的第三方依赖。

问题根因 #

1. 导入方式不兼容：Webpack对CommonJS模块的ESM导入兼容逻辑更宽松，会自动合并default导出与命名导出；Vite严格遵循ESM规范，socket.io-client旧版本的CommonJS导出规则下，import { io }的命名导入方式实际无法拿到正确的执行方法。
2. 无引用实例被优化删除：原代码中io('http://my-server')调用后没有持有返回的socket实例，Vite构建阶段的死代码消除逻辑会将该调用判定为无副作用代码直接删除，因此没有发起请求也没有报错。

修复方案 #

• 调整导入方式，优先使用default导入兼容不同规范的导出逻辑
• 持有socket实例避免被优化，同时补充卸载逻辑防止内存泄漏

修复后的代码示例：

import io from 'socket.io-client'

export function App() {
  useEffect(() => {
    const socket = io('http://my-server')
    return () => {
      socket.disconnect()
    }
  }, [])
}

如果调整导入方式后仍然不生效，可以尝试以下操作：

• 升级socket.io-client到v4及以上版本，该版本已经原生兼容ESM规范的命名导入
• 在vite.config.js中配置强制预构建该依赖，解决预构建阶段的转换异常：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['socket.io-client']
  }
})

内容的提问来源于stack exchange，提问作者Two Horses