在React Vite中配置react-snap遇语法错误及200.html问题求助

核心原因 #

这个错误源于react-snap默认依赖的Puppeteer版本较老，不支持现代JavaScript语法（比如可选链操作符?.），或者Vite构建输出的代码包含未转译的新语法，导致预渲染时无法解析。

具体解决步骤 #

1. 升级Puppeteer版本 #

直接在项目中安装更新版本的Puppeteer，替换react-snap依赖的旧版本：

• 在package.json的devDependencies中添加：

"puppeteer": "^20.0.0"

• 执行安装命令：

npm install

2. 调整Vite构建目标 #

让Vite生成兼容旧版本浏览器的代码：

• 修改vite.config.js，添加build.target配置：

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

export default defineConfig({
  plugins: [react()],
  build: {
    target: 'es2019' // 降低语法目标版本，避免生成过新的代码
  }
})

3. 优化react-snap配置 #

添加跳过第三方请求和沙箱禁用的参数，避免预渲染时的环境问题：

• 更新package.json中的reactSnap配置：

"reactSnap": {
  "source": "dist",
  "skipThirdPartyRequests": true,
  "puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"]
}

4. 强制Babel转译（可选） #

如果上述方法无效，配置Vite的React插件强制转译代码：

• 修改vite.config.js：

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

export default defineConfig({
  plugins: [
    react({
      babel: {
        presets: [
          ['@babel/preset-env', { targets: { chrome: '80' } }] // 指定兼容的Chrome版本，匹配Puppeteer环境
        ]
      }
    })
  ]
})

完成上述配置后，重新执行构建命令：

npm run build

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