React生产构建报错：Uncaught SyntaxError: Unexpected token 'export'

我是React新手，刚学几天。之前项目本地运行完全正常，但部署到生产环境后，构建文件抛出错误：Uncaught SyntaxError: Unexpected token 'export'。构建文件最后一行出现了export语句，我不知道它的来源。这个问题是在引入react-cropper和react-color包之后出现的，移除react-color后问题就解决了。

vite.config.js #

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

package.json #

{
  "name": "myaccount-page",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.7.2",
    "bootstrap": "^4.6.2",
    "bootstrap-icons": "^1.11.3",
    "cropperjs": "^1.6.2",
    "react": "^18.3.1",
    "react-bootstrap": "^2.10.4",
    "react-color": "^2.19.3",
    "react-cropper": "^2.3.3",
    "react-dom": "^18.3.1",
    "react-easy-crop": "^5.0.8",
    "react-toastify": "^10.0.5"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.3",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "vite": "^5.3.4"
  }
}

构建文件报错行 #

("root")).render(p.jsx(v.StrictMode,{children:p.jsx(EI,{})}))});export default CI();

原因分析 #

react-color@2.19.3是一个多年未维护的旧包，它的代码使用了未被正确转译的ES模块语法。Vite默认不会转译node_modules中的依赖包，导致生产构建时直接将未处理的export语句打包进产物，而浏览器无法识别顶级的export语法，从而抛出错误。

解决方案 #

方案1：替换为维护活跃的替代包

推荐使用react-colorful替代react-color，它体积更小、支持现代构建工具，且维护状态良好。执行以下命令替换：

npm uninstall react-color
npm install react-colorful

之后修改项目中引入react-color的代码，适配react-colorful的API即可。

方案2：强制Vite转译react-color

如果一定要继续使用react-color，可以修改vite.config.js，强制Vite对该包进行转译处理：

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

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['react-color'] // 强制预构建react-color
  },
  build: {
    commonjsOptions: {
      include: [/react-color/, /node_modules/] // 强制转译react-color为兼容格式
    }
  }
})

修改后重新执行npm run build，部署新的构建产物即可解决问题。

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