基于Vite的React TS项目生产构建时react-router-dom v6.4报错求助

问题描述 #

使用Vite构建React TypeScript项目，开发模式运行正常，但执行npm run build时出现以下错误：

[commonjs--resolver] Unexpected token (656:59) in /Users/sanketsaha/Work/School/TulipApp/node_modules/react-router-dom/dist/index.js
错误位置对应代码：

throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");

报错核心是Rollup无法解析该位置的模板字符串反引号，导致构建失败。

解决方案 #

方案1：配置Vite转译react-router-dom相关依赖 #

Vite默认不会转译node_modules中的依赖，但react-router-dom 6.4+的部分分发文件可能包含未被完全转译的语法，需要手动指定让Vite处理这些包：

修改vite.config.ts文件，添加如下配置：

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

export default defineConfig({
  plugins: [react()],
  // 优化依赖预构建，指定需要转译的包
  optimizeDeps: {
    include: ['react-router-dom', 'react-router', '@remix-run/router'],
  },
  build: {
    // 配置CommonJS解析规则，包含目标依赖
    commonjsOptions: {
      include: [/react-router-dom/, /react-router/, /@remix-run\/router/, /node_modules/],
    },
  },
});

方案2：升级Vite到最新稳定版本 #

如果你的Vite版本较旧，可能存在对新语法的兼容问题，执行以下命令升级：

npm install vite@latest @vitejs/plugin-react@latest --save-dev

方案3：检查SSR相关代码逻辑 #

错误提示提到了"server render"，如果项目中涉及服务端渲染逻辑，需确保submit方法仅在客户端环境执行（比如放在useEffect或事件回调中），避免在服务端渲染阶段调用。

验证 #

修改配置后，重新执行npm run build，确认构建是否成功。

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