Vue3+Bun项目使用require报错：require is not defined，如何解决？

问题根源 #

浏览器环境本身不支持Node.js的require语法，哪怕用Bun作为运行时，前端代码里的require如果没被正确转译为浏览器兼容的语法，依然会触发ReferenceError。Bun支持在Node.js环境混合使用import/require，但前端代码必须经过打包转换才能在浏览器运行。

解决方案 #

• 改用ES模块语法导入
  Vue3项目默认是ES模块环境，直接用import替代require。注意socket.io v2的客户端包是socket.io-client（而非服务端的socket.io），正确导入方式：

  import io from 'socket.io-client';
  const socket = io('http://你的服务端地址');
  

• 确保Bun正确处理模块转换
  在项目根目录创建bunfig.toml，添加前端打包配置，指定目标为浏览器：

  [frontend]
  entrypoints = ["./src/main.js"] # 你的项目入口文件
  outdir = "./dist"
  target = "browser"
  

  或者在package.json中添加"type": "module"，让项目默认使用ES模块，Bun会自动转换CommonJS包：

  {
    "type": "module"
  }
  

• 确认安装正确的包
  卸载错误的socket.io包，安装v2版本的客户端：

  bun remove socket.io
  bun install socket.io-client@2.x
  

  执行bun list socket.io-client确认版本为v2系列。

• 通过Bun Dev服务访问项目
  不要直接打开本地HTML文件，必须通过bun dev启动的服务（比如http://localhost:3000）访问，确保Bun对代码进行了打包转换。

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