React应用部署后出现sockjs-node WebSocket连接报错如何解决

报错根本原因 #

webpackHotDevClient 是 React 开发模式下用于模块热重载的专属工具，仅在 npm start 启动的本地开发服务中生效。正常的生产构建产物不会包含该工具的调用逻辑，出现该报错说明你的生产服务器运行了开发模式代码，或是构建流程配置错误导致开发依赖被打入生产包。

修复步骤 #

方案1：标准生产部署修复（推荐） #

• 部署前必须执行 npm run build 命令，项目会自动生成 build 文件夹，该文件夹内的内容就是可直接上线的生产环境代码
• 禁止在生产服务器执行 npm start 启动服务，该命令启动的是内置开发服务器，自带热重载逻辑，本身不适用生产场景
• 生产环境推荐使用 Nginx、Caddy 等反向代理服务直接托管 build 文件夹内的静态资源

方案2：生产环境临时运行开发服务调试（不推荐） #

如果确实需要在服务器上直接启动开发服务做临时调试，可按以下配置修复：

1. 在项目根目录新建 .env 文件，添加以下配置：

# 关闭热重载功能
DISABLE_HOT_RELOAD=true
# 手动匹配部署域名端口
WDS_SOCKET_HOST=你的实际部署域名（无需带http/https前缀）
WDS_SOCKET_PORT=0

2. 保存文件后重启开发服务即可

方案3：生产构建后仍报错的排查路径 #

如果已经执行 npm run build 构建，部署后仍出现该报错，按以下顺序排查：

• 检查是否执行过 npm run eject 后修改了webpack配置，误将 HotModuleReplacementPlugin 等热重载相关插件配置到了生产构建流程中，确保该类插件仅在开发模式下启用
• 检查构建时的 NODE_ENV 环境变量是否被强制设置为 development，构建时需确保环境变量为生产模式：
  • Linux/Mac 执行命令：NODE_ENV=production npm run build
  • Windows 执行命令：set NODE_ENV=production && npm run build

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