如何修复Vite构建时第三方依赖的Unexpected Token语法错误

我用Vite搭建React+TypeScript项目，执行npm run dev命令时应用能正常启动运行，但执行生产构建时总是出现第三方依赖的解析错误，提示存在意外令牌（Unexpected token）。使用的Node版本为19.1.0，是不是配置文件存在遗漏？

错误日志 #

[commonjs--resolver] Unexpected token (705:2) in C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/axios/lib/utils.js
file: C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/axios/lib/utils.js:705:2
703:   toFiniteNumber,
704:   findKey,
705:   global: _global,
       ^
706:   isContextDefined,
707:   ALPHABET,
error during build:
SyntaxError: Unexpected token (705:2) in C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/axios/lib/utils.js
    at pp$4.raise (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20972:13)
    at pp$9.unexpected (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:18273:8)
    at pp$5.parseIdent (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20903:10)
    at pp$5.parsePropertyName (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20707:109)
    at pp$5.parseProperty (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20634:8)
    at pp$5.parseObj (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20597:21)
    at pp$5.parseExprAtom (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20332:17)
    at pp$5.parseExprSubscripts (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20148:19)
    at pp$5.parseMaybeUnary (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20114:17)
    at pp$5.parseExprOps (file:///C:/Users/watson.matos/Documents/Bayer/acc-ctv-front/node_modules/rollup/dist/es/shared/node-entry.js:20041:19)

当前配置文件 #

vite.config.ts #

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        host: true, // Here
        strictPort: true,
        port: 8080
    },
    resolve: {
        alias: {
            './runtimeConfig': './runtimeConfig.browser'
        }
    },
    define: {
        global: ({})
    }
})

package.json #

{
  "name": "acc-ctv-front",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "env-cmd -f .env.np vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "prepare": "husky install",
    "cy:open": "cypress open",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^4.3.4",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.14",
    "@types/styled-components": "^5.1.26",
    "aws-amplify": "^5.0.9",
    "axios": "^1.2.2",
    "cypress": "^12.3.0",
    "env-cmd": "^10.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.8.0",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.8.1",
    "rollup-plugin-node-resolve": "^5.2.0",
    "styled-components": "^5.3.9",
    "styled-media-query": "^2.1.2",
    "wouter": "^2.10.0-alpha.1"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.3.0",
    "@commitlint/config-conventional": "^17.3.0",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@typescript-eslint/eslint-plugin": "^5.48.0",
    "@typescript-eslint/parser": "^5.48.0",
    "@vitejs/plugin-react": "^3.0.0",
    "devmoji": "^2.3.0",
    "eslint": "^8.31.0",
    "eslint-plugin-react": "^7.31.11",
    "husky": "^8.0.2",
    "prettier": "^2.8.1",
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  }
}

解决方案 #

问题根源 #

你在vite.config.ts的define选项中把global设为({})，这会破坏axios等依赖对全局变量的正常引用，导致Rollup解析时出现语法错误。另外，axios 1.2.2版本和Vite 4.x的CommonJS解析逻辑存在兼容问题。

修复步骤 #

• 修正vite.config.ts中的define配置，正确模拟浏览器环境的global对象：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
      plugins: [react()],
      server: {
          host: true,
          strictPort: true,
          port: 8080
      },
      resolve: {
          alias: {
              './runtimeConfig': './runtimeConfig.browser'
          }
      },
      define: {
          // 用window模拟浏览器环境的global
          global: 'window'
      }
  })
  

• 更新axios到兼容Vite 4.x的最新稳定版：

  npm update axios
  

• 清理依赖缓存并重新安装，避免旧缓存干扰：

  rm -rf node_modules package-lock.json
  npm install
  

• 执行构建命令验证修复效果：

  npm run build
  

额外建议 #

如果还有其他依赖Node环境API的包需要兼容，可以安装vite-plugin-node-polyfills插件来自动处理polyfill，避免手动配置出现冲突。

内容的提问来源于stack exchange，提问作者Watson T Matos