解决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无法使用requirerequireTransform({fileRegex: /.js$|.vue$|.png$|.ts$|.jpg$/}) //配置requirevue(),],}

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/695256.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

修改Springboot默认序列化工具Jackson的配置

如果我们在Spring Boot应用中手动定义并注入了一个ObjectMapper Bean,那么这个自定义的ObjectMapper实例会替换掉Spring Boot默认配置的ObjectMapper。当Spring容器中存在多个同类型的Bean时,默认情况下最后一个创建的Bean将作为首选Bean(如果…

Tomcat 学习之 Servlet

目录 1 Servlet 介绍 2 创建一个 Servlet 3 web.xml 介绍(不涉及 filter 和 listener 标签) 3.1 display-name 3.2 welcome-file-list 3.3 servlet 3.4 session-config 3.5 error-page 4 Tomcat 如何根据 URL 定位到 Servlet 5 执行 Servlet …

debezium源码之启动快照7步曲

欢迎收藏关注点赞, 持续输出CDC、debezium、flinkcdc内容,比心 代码仓库地址:https://github.com/debezium/debezium/blob/main/debezium-core/src/main/java/io/debezium/relational/RelationalSnapshotChangeEventSource.java 代码版本de…

不破不立,那些年错过的Python

随着OpenAI的发展,Python的重要性不言而喻。不知你是否和我一样,不知道曾经说过多少次我要学Python,都没有执行起来… 近期我在知识库中更新了一波Python教程,选取了这一篇分享给大家。 前言 很多时候我们需要让程序变成交互性的…

Linux系统——nginx服务介绍

一、Nginx——高性能的Web服务端 Nginx的高并发性能优于httpd服务 1.nginx概述 Nginx是由1994年毕业于俄罗斯国立莫斯科鲍曼科技大学的同学为俄罗斯rambler.ru公司开发的,开发工作最早从2002年开始,第一次公开发布时间是2004年10月4日,版本…

CSS基础和选择器

【一】CSS基础 【1】什么是CSS CSS(层叠样式表)是一种用于描述HTML(超文本标记语言)文档外观样式的语言。它通过定义样式规则来控制网页的布局、字体、颜色、背景等外观效果,使网页变得更加美观和可读。 【2】注释语…

第二证券:美国加息对中国股市的影响?美联储加息利好还是利空股市?

美国加息是一种紧缩的钱银政策,会招引出资者添加银行的出资,导致社会上的流动钱银减少,然后间接地导致股市流动资金减少,股市跌落,引起商场上的出资者恐慌,大量卖出,添加商场上的空方力量&#…

电路设计(25)——4位数字频率计的multism仿真及PCB设计

1.设计要求 使用4位数码管,显示输入信号的频率。完成功能仿真后,用AD软件,画出原理图以及PCB。 2.电路设计 输入信号的参数为: 可见,输入为168HZ,测量值为170HZ,误差在可接受的范围内。 3.PCB设…

C++ 和 C#的区别

如是我闻: C#(发音为 “C sharp”)和C是两种流行的编程语言,它们各有特点和用途。下面是这两种语言的一些主要区别: 设计理念和用途: C: 是一种多范式编程语言,支持过程化编程、面向对象编程、泛型编程等。…

小程序怎么开发?怎么开发自己的小程序

一、明确需求与定位 在开发小程序之前,需要明确需求. 首先,明确小程序的定位非常重要。我们需要确定小程序是为了提供便捷的购物体验还是特定领域的服务。明确定位可以帮助我们更好地设计和优化小程序的功能,以符合用户的期望和需求。 其次…

VIO第3讲:基于优化的IMU与视觉信息融合之视觉残差雅可比推导

VIO第3讲&#xff1a;基于优化的IMU与视觉信息融合之视觉残差函数构建 文章目录 VIO第3讲&#xff1a;基于优化的IMU与视觉信息融合之视觉残差函数构建3 视觉重投影残差的 Jacobian3.1 视觉重投影残差① 估计值&#xff08;预测值&#xff09;<1> 推导<2> 引出因子…

分享Video.js观看Web视频流

界面效果 HTML结构 <div class"homePopup" ><div class"search_box animate__animated animate__fadeInDown" style"display: none;"><div class"van-search" style"background: rgba(0, 0, 0, 0);">&…

物业第三方满意度调查抽样方法有哪些

本文由群狼调研&#xff08;湖南售楼中心神秘顾客&#xff09;出品&#xff0c;欢迎转载&#xff0c;请注明出处。在物业服务行业中&#xff0c;了解业主的需求和满意度至关重要。随着市场竞争的加剧&#xff0c;越来越多的物业公司选择通过第三方来进行满意度调查。物业第三方…

[服务器-数据库]MongoDBv7.0.4不支持ipv6访问

文章目录 MongoDBv7.0.4不支持ipv6访问错误描述问题分析错误原因解决方式 MongoDBv7.0.4不支持ipv6访问 错误描述 报错如下描述 Cannot connect to MongoDB.No suitable servers found: serverSelectionTimeoutMS expired: [failed to resolve 2408]问题分析 首先确定其是…

Android14 InputManager-InputReader的处理

IMS启动时会调用InputReader.start()方法 InputReader.cpp status_t InputReader::start() {if (mThread) {return ALREADY_EXISTS;}mThread std::make_unique<InputThread>("InputReader", [this]() { loopOnce(); }, [this]() { mEventHub->wake(); });…

Java SE 入门到精通—基础语法【Java】

敲重点&#xff01; 本篇讲述了比较重要的基础&#xff0c;是必须要掌握的 1.程序入口 在Java中&#xff0c;main方法是程序的入口点&#xff0c;是JVM&#xff08;Java虚拟机&#xff09;执行Java应用程序的起始点。 main方法的方法签名必须遵循下面规范&#xff1a; publ…

【力扣白嫖日记】1987.上级经理已离职的公司员工

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1978.上级经理已离职的公司员工 表&#xff1a;Employees 列名类型employee_idintnamevarcharmanager_idint…

模式匹配算法汇总

单模匹配算法 1. KMP算法 动态规划之 KMP 算法详解 彻底搞懂KMP算法原理 多模匹配 1. AC自动机

DTV的LCN功能介绍

文章目录 LCN简介LCN获取LCN Conflict LCN简介 Logical Channel Number&#xff08;LCN&#xff09;是数字电视系统中用于标识和组织频道的逻辑编号。LCN的目的是为了方便用户浏览和选择频道&#xff0c;使得数字电视接收设备能够根据这些逻辑编号对频道进行排序和显示。 LCN…

【Elasticsearch专栏 02】深入探索:Elasticsearch为什么使用倒排索引而不是正排索引

文章目录 为什么使用倒排索引而不是正排索引&#xff1f;1.正排索引&#xff08;Forward Index&#xff09;2.倒排索引&#xff08;Inverted Index&#xff09;3.小结 为什么使用倒排索引而不是正排索引&#xff1f; Elasticsearch选择使用倒排索引而不是正排索引&#xff0c;…