Vite+React生产构建报错：Uncaught TypeError: _ is not a function

云上老周

2026-7-15

问题排查与解决方案

先从定位错误根源入手，生产构建后的_ is not a function是压缩后的变量名，先还原错误信息再针对性解决：

1. 还原未压缩的错误信息

修改vite.config.ts关闭代码压缩，重新构建：

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

export default defineConfig({
  plugins: [react()],
  build: {
    minify: false // 临时关闭压缩
  }
})

此时控制台的错误会显示原始变量名，能直接定位到出错的模块和代码行。

2. React Router相关排查点

（1）核对导入路径

确保所有浏览器端的React Router API都从react-router-dom导入，而非react-router（后者是核心底层库，浏览器环境需用前者）：

错误示例：import { Routes, Route } from 'react-router'
正确示例：import { Routes, Route, useNavigate } from 'react-router-dom'

（2）检查路由配置的element属性

确认路由配置里的element是JSX元素，不是组件函数调用：

错误示例：{ path: '/', element: Home() }（直接调用组件会触发异常渲染逻辑）
正确示例：{ path: '/', element: <Home /> }

（3）替换过时API

React Router v6移除了useHistory等旧API，开发模式可能有兼容提示，但生产构建后会报错，替换为v6对应API：

把useHistory()替换为useNavigate()
把Switch组件替换为Routes组件

3. 其他排查方向

（1）TypeScript配置校验

检查tsconfig.json的模块解析配置，确保和Vite兼容：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler", // Vite推荐的解析模式
    "target": "ES2020",
    "jsx": "react-jsx"
  }
}