Vite+React项目启动反复出现EPIPE错误的技术求助

通过Jenkins发布、Grafana监控的Vite+React应用启动时反复触发EPIPE错误，应用持续尝试重启但始终失败，服务启动后很快崩溃。

错误日志 #

2024-07-19 22:45:57.660 error Command failed with exit code 1.
2024-07-19 22:45:57.371  ERROR  run failed: command  exited (1)
2024-07-19 22:45:57.370 vite.start: command (/app/) /tmp/yarn--1721439926269-0.49852721492640595/yarn run vite.start exited (1)
2024-07-19 22:45:57.370 vite.start: ERROR: command finished with error: command (/app/) /tmp/yarn--1721439926269-0.49852721492640595/yarn run vite.start exited (1)
2024-07-19 22:45:57.660 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2024-07-19 22:45:57.371 
2024-07-19 22:45:57.371 Failed:    //#vite.start
2024-07-19 22:45:57.371   Time:    26.507s 
2024-07-19 22:45:57.371 Cached:    0 cached, 1 total
2024-07-19 22:45:57.371  Tasks:    0 successful, 1 total
2024-07-19 22:45:57.371 
2024-07-19 22:45:57.057 vite.start: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2024-07-19 22:45:57.057 vite.start: error Command failed with exit code 1.
2024-07-19 22:45:56.957 vite.start:                   reject(new Error(error2));
2024-07-19 22:45:56.957 vite.start:     at responseCallbacks.<computed> (/app/node_modules/esbuild/lib/main.js:622:9)
2024-07-19 22:45:56.957 vite.start: /app/node_modules/esbuild/lib/main.js:993
2024-07-19 22:45:56.957 vite.start: Error: The service was stopped: write EPIPE
2024-07-19 22:45:56.957 vite.start:                          ^
2024-07-19 22:45:56.957 vite.start:     at process.processTicksAndRejections (node:internal/process/task_queues:84:21)
2024-07-19 22:45:56.957 vite.start: 
2024-07-19 22:45:56.957 vite.start:     at /app/node_modules/esbuild/lib/main.js:1983:18
2024-07-19 22:45:56.957 vite.start:     at /app/node_modules/esbuild/lib/main.js:993:26
2024-07-19 22:45:56.957 vite.start:     at afterClose (/app/node_modules/esbuild/lib/main.js:613:28)
2024-07-19 22:45:56.957 vite.start: Node.js v18.20.4
2024-07-19 22:45:56.957 vite.start:     at onwriteError (node:internal/streams/writable:418:3)
2024-07-19 22:45:39.954 vite.start: Server running on port: 4173
2024-07-19 22:45:33.458 vite.start: $ node server.js

项目配置文件 #

vite.config.ts #

export default defineConfig({
  server: {
    watch: {
      usePolling: true,
    },
    port: 4173,
    hmr: {
      clientPort: 4173,
    },
    host: true,
    strictPort: true,
  },
  base: "./",
  plugins: [react(), tsPaths()],
  build: {
    emptyOutDir: true,
    cssMinify: 'lightningcss',
    target: browserslistToEsbuild(),
    rollupOptions: {
      output: {
        chunkFileNames: "js/[name].[hash].js",
        entryFileNames: "js/[name].[hash].js",
        assetFileNames: "assets/[name].[hash].[ext]",
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
        },
      },
    },
  },
  optimizeDeps: {
    include: ['react/jsx-runtime'],
  },
})

turbo.json #

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "outputs": [
        "dist/**"
      ]
    },
    "lint": {}
  }
}

server.js #

async function startServer() {
  const vite = await createServer({
    server: { middlewareMode: 'ssr' },
  })

  app.use(vite.middlewares)

  app.get('/health-status', (req, res) => {
    res.status(200).send('OK')
  })

  app.listen(port, '0.0.0.0', () => {
    console.log(`Server running on port: ${port}`)
  })
}

startServer()

package.json依赖版本 #

"react": "18.3.1",
"react-dom": "18.3.1",
"react-router-dom": "6.25.0",
"turbo": "2.0.7",
"typescript": "5.5.3",
"vite": "5.3.4",

解决方案 #

• 修复server.js端口冲突：启动Vite SSR服务时，显式指定与dev server不同的端口，避免strictPort导致的端口占用问题。修改后的server.js：

async function startServer() {
  const vite = await createServer({
    server: { 
      middlewareMode: 'ssr',
      port: 3000, // 独立于应用服务的端口
      strictPort: false
    },
  })

  app.use(vite.middlewares)

  app.get('/health-status', (req, res) => {
    res.status(200).send('OK')
  })

  app.listen(4173, '0.0.0.0', () => {
    console.log(`Server running on port: 4173`)
  })
}

startServer()

• 禁用Esbuild Worker模式：在vite.config.ts中添加esbuild配置，避免进程通信触发EPIPE错误：

export default defineConfig({
  // 保留原有配置
  esbuild: {
    worker: false
  },
})

• 调整Turbo任务配置：标记dev服务为持久化任务，避免Turbo强制终止进程：

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "outputs": ["dist/**"]
    },
    "lint": {},
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

• 清理Jenkins发布环境：在启动脚本前添加端口占用清理步骤，确保4173端口无残留进程：

lsof -ti:4173 | xargs kill -9 2>/dev/null || true

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