CRA迁移Vite.js+React生产构建触发Maximum call stack size exceeded错误如何排查

排查与解决步骤 #

• 先升级@vitejs/plugin-react到适配vite 2.6.x的最新兼容版本：该版本对应的vite-react-jsx插件存在已知的递归解析JSX节点栈溢出bug，是该类报错的高发原因。
• 在vite配置的react插件参数中，添加排除规则跳过处理react-i18next的预编译文件：

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

export default defineConfig({
  plugins: [
    react({
      exclude: /node_modules\/react-i18next/
    })
  ]
})

react-i18next打包输出的ES版本文件已经完成了JSX转换，不需要vite插件二次处理，重复处理会触发递归循环。

• 检查项目根目录的babel配置（.babelrc、babel.config.js等）：删除多余的@babel/plugin-transform-react-jsx相关配置，Vite的react插件已经内置了JSX转换能力，重复配置会导致生产构建时双重处理触发栈溢出。
• 临时验证可以修改vite配置的build参数，关闭生产环境JSX转换测试：

export default defineConfig({
  build: {
    jsx: 'preserve'
  }
})

如果修改后可以正常构建，即可100%确认是JSX转换插件冲突导致的问题。

• 升级react-i18next到对应React版本兼容的最新稳定版：旧版本react-i18next的Trans组件输出的AST结构不规范，也会触发vite插件的解析异常。

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