vite打包出现 "default" is not exported by "node_modules/...问题解决办法

 更新时间:2024年06月04日 09:12:15   作者:狂野小青年  
这篇文章主要给大家介绍了关于vite打包出现 "default" is not exported by "node_modules/...问题的解决办法,文中通过代码将解决的办法介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考借鉴价值,需要的朋友可以参考下

项目场景:

vue3+ts+vite项目打包

问题描述

// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';

error during build:
RollupError: "default" is not exported by "node_modules/vue/dist/vue.runtime.esm-bundler.js", imported by "node_modules/@kangc/v-md-editor/lib/codemirror-editor.js".
    at error (file:///D:...

原因分析:

报错意思是导入的js文件没有默认导出

解决方案:

有两种方法

1.修改node_modoules下的文件源码

在前面加上expoert default

export default (function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
      (global = global || self, global.CodeMirror = factory());
}(this, (function () {
  'use strict';

为这个js文件添加一个默认导出

不太推荐这个方法,虽然比较简单

2.安装@rollup/plugin-commonjs插件,vite-plugin-require-transform插件

@rollup/plugin-commonjs可以将commonjs模块转换层es6模块

但只会对require生效

所以需要将导入改为require格式

(1)安装插件

npm i @rollup/plugin-commonjs
npm i vite-plugin-require-transform

(2)添加配置

在vite.config.ts配置中添加插件,注意commonjs()必须在上面,否则可能不生效

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import commonjs from '@rollup/plugin-commonjs';//引入commojs
import requireTransform from 'vite-plugin-require-transform';//引入require
export default defineConfig({
  plugins: [
    commonjs() as any,
    //我的入口文件是ts类型,所以下面必须加上.ts$,否则在main.ts无法使用require
    requireTransform({
      fileRegex: /.js$|.vue$|.png$|.ts$|.jpg$/
    }) //配置require
    vue(),
  ],
 }

(3)将main.ts中的导入改为require

// codemirror 编辑器的相关资源
const Codemirror = require('codemirror');

总结 

到此这篇关于vite打包出现 "default" is not exported by "node_modules/...问题解决办法的文章就介绍到这了,更多相关vite打包default is not exported by node_modules/...内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Vue.js3.0 组件是如何渲染为DOM的

    详解Vue.js3.0 组件是如何渲染为DOM的

    这篇文章主要介绍了详解Vue.js3.0 组件是如何渲染为DOM的 ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue3中v-model的用法详解

    vue3中v-model的用法详解

    vue 提供了很多自定义指令,大大方便了我们的开发,其中最常用的也就是 v-model,他可以在组件上使用以实现双向绑定。它可以绑定多种数据结构, 今天总结一下用法
    2023-04-04
  • VsCode里的Vue模板的实现

    VsCode里的Vue模板的实现

    这篇文章主要介绍了VsCode里的Vue模板的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Vue监听localstorage变化的方法详解

    Vue监听localstorage变化的方法详解

    在日常开发中,我们经常使用localStorage来存储一些变量,这些变量会存储在浏览中,对于localStorage来说,即使关闭浏览器,这些变量依然存储着,方便我们开发的时候在别的地方使用,本文就给大家介绍Vue如何监听localstorage的变化,需要的朋友可以参考下
    2023-10-10
  • 简述vue中的config配置

    简述vue中的config配置

    这篇文章主要介绍了vue中的config配置 ,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • vue实现表单未编辑或未保存离开弹窗提示功能

    vue实现表单未编辑或未保存离开弹窗提示功能

    这篇文章主要介绍了vue实现表单未编辑或未保存离开弹窗提示功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 用vue写一个日历

    用vue写一个日历

    这篇文章主要介绍了如何利用vue写一个日历,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • vue.js项目nginx部署教程

    vue.js项目nginx部署教程

    nginx是一个高性能的HTTP和反向代理服务器。这篇文章主要介绍了vue.js项目nginx部署,需要的朋友可以参考下
    2018-04-04
  • vue+elemen实现el-tooltip在文本超出区域后浮现

    vue+elemen实现el-tooltip在文本超出区域后浮现

    el-tooltip组件本身就是悬浮提示功能,在对它进行二次封装时,实现超出的文本浮现,本文就来介绍一下vue+elemen实现el-tooltip在文本超出区域后浮现,感兴趣的可以了解一下
    2023-12-12
  • Vue2+JS实现扫雷小游戏

    Vue2+JS实现扫雷小游戏

    实现小游戏可以锻炼自己的逻辑思维能力,也不会很枯燥,完成时会给自己带来一种满足感。本文就将利用Vue和JS实现简单的扫雷小游戏,需要的可以参考一下
    2022-06-06

最新评论