使用Vite构建React应用时遭遇Axios相关语法错误

问题重现 #

构建阶段出现如下错误：

> react-app@0.0.0 build
> vite build

vite v4.4.7 building for production...
✓ 118 modules transformed.
✓ built in 1.88s
[commonjs--resolver] Unexpected token (714:2) in C:/Users/application/client/node_modules/axios/lib/utils.js
file: C:/Users/application/client/node_modules/axios/lib/utils.js:714:2
712:   toFiniteNumber,
713:   findKey,
714:   {}: _global,
       ^
715:   isContextDefined,
716:   ALPHABET,
error during build:
SyntaxError: Unexpected token (714:2) in C:/Users/application/client/node_modules/axios/lib/utils.js
    at pp$4.raise 

已尝试更新npm、删除node_modules重装依赖、更新Axios等操作，问题仍未解决。

解决方法 #

1. 直接使用Axios的ES模块版本 #

修改项目中Axios的导入语句，切换到ES模块版本，绕开CommonJS解析兼容性问题：

import axios from 'axios/dist/esm/axios.mjs';

2. 配置Vite优化依赖预构建 #

在vite.config.js中添加优化配置，强制Vite预构建Axios并指定兼容的语法目标：

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

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['axios'],
    esbuildOptions: {
      target: 'es2020'
    }
  }
});

3. 回退到Axios稳定版本 #

若当前使用的是Axios测试版（beta/RC），卸载后重装最新稳定版：

npm uninstall axios
npm install axios@latest --save

4. 调整Rollup CommonJS插件配置 #

如果项目自定义了Rollup插件，确保@rollup/plugin-commonjs正确处理Axios模块：

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

export default defineConfig({
  plugins: [
    react(),
    commonjs({
      include: /node_modules\/axios/
    })
  ]
});

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