Vue组件引入Axios实例报错：form-data无default导出

问题详情 #

报错信息：

Uncaught SyntaxError: The requested module '/node_modules/form-data/lib/browser.js?v=93b68a84' does not provide an export named 'default'

当前使用Axios版本："axios": "^1.1.2"

Axios实例创建代码：

import axios from "axios";

const instance = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 100000,
  headers: {
    Accept: "application/json",
  },
});

export default instance;

解决方案 #

1. 降级Axios版本 #

Axios 1.1.x版本存在与form-data的ESM模块兼容性问题，降级到1.0.x稳定版本即可解决：

npm install axios@1.0.0 --save

2. 配置Vite优化依赖（Vite项目适用） #

在vite.config.js中添加以下配置，强制处理form-data的模块导出：

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

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['axios', 'form-data'],
    esbuildOptions: {
      resolveExtensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    }
  },
  resolve: {
    alias: {
      'form-data': 'form-data/lib/browser.js'
    }
  }
})

3. 替换为ES模块兼容的form-data #

安装form-data-esm替代原form-data依赖，通过package.json的overrides强制替换：

npm install form-data-esm --save

在package.json中添加：

"overrides": {
  "form-data": "npm:form-data-esm@^1.0.0"
}

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