vite-plugin-components（vite 运行项目报错 ‘axios/index.js‘ does not provide anexport named ‘default‘）

报错信息

报错信息：The requested module ‘/node_modules/axios/index.js?v=2866e624’ does not provide an export named ‘default’

现象

使用 vite 打包工具开发时出现             ，生产环境正常

原因

原因在于 Vite 是完全依靠 ESM 原生能力的
  
 
  
 
  
 
  
 
  
 
  
 
  ，也就是他只认识 import 












，因为 Vite 依赖 script 的 module 属性             。

我们的代码最终都会被送到浏览器里执行 
  
  
  
  
  
  
，require 是 cjs 的关键词
  
  
  
  
  
  
 ，浏览器环境本身就没定义这个方法
 


 


 


 


 


 


 ，自然就报错了
  
 
  
 
  
 
  
 
  
 
  
 
  。

这里和 webpack 不一样 
 
 
 
 
 
 
，webpack 把文件送到浏览器之前是会进行预打包的
   
   
   
   
   
   
 ，这时候已经将 require 转换成 浏览器能兼容的方法了












。

出现上述报错的原因可能是依赖中通过import导入一个ES6模块
 

 

 

 

 

 

 ，但是这个ES6模块中使用了require 

 

 

 

 

 

 
，当Vite去构建的时候             ，发现是采用import导入的就不会预编译

 
 

 
 

 
 

 
 

 
 

 
 

 ，从而报错 
  
  
  
  
  
  
。

查看原文

解决方法

使用一个捆绑的 axios 的 es 模块

@bundled-es-modules/axios 说明文档 npm i @bundled-es-modules/axios // 引入 import { axios } from axios;

其他解决方案

import axios 导致 vue v3 和 vite 出现问题