快捷導(dǎo)航

vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問(wèn)題解決辦法

更新時(shí)間：2024年06月04日 09:12:15 作者：狂野小青年

這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問(wèn)題的解決辦法,文中通過(guò)代碼將解決的辦法介紹的非常詳細(xì),對(duì)同樣遇到這個(gè)問(wèn)題的朋友具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

項(xiàng)目場(chǎng)景：

vue3+ts+vite項(xiàng)目打包

問(wèn)題描述

// codemirror 編輯器的相關(guān)資源
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:...

原因分析：

報(bào)錯(cuò)意思是導(dǎo)入的js文件沒(méi)有默認(rèn)導(dǎo)出

解決方案：

有兩種方法

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';

為這個(gè)js文件添加一個(gè)默認(rèn)導(dǎo)出

不太推薦這個(gè)方法，雖然比較簡(jiǎn)單

2.安裝@rollup/plugin-commonjs插件，vite-plugin-require-transform插件

@rollup/plugin-commonjs可以將commonjs模塊轉(zhuǎn)換層es6模塊

但只會(huì)對(duì)require生效

所以需要將導(dǎo)入改為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無(wú)法使用require
    requireTransform({
      fileRegex: /.js$|.vue$|.png$|.ts$|.jpg$/
    }) //配置require
    vue(),
  ],
 }

（3）將main.ts中的導(dǎo)入改為require

// codemirror 編輯器的相關(guān)資源
const Codemirror = require('codemirror');

總結(jié)

到此這篇關(guān)于vite打包出現(xiàn) "default" is not exported by "node_modules/...問(wèn)題解決辦法的文章就介紹到這了,更多相關(guān)vite打包default is not exported by node_modules/...內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解Vue.js3.0 組件是如何渲染為DOM的
這篇文章主要介紹了詳解Vue.js3.0 組件是如何渲染為DOM的，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue3中v-model的用法詳解
vue 提供了很多自定義指令，大大方便了我們的開(kāi)發(fā)，其中最常用的也就是 v-model，他可以在組件上使用以實(shí)現(xiàn)雙向綁定。它可以綁定多種數(shù)據(jù)結(jié)構(gòu), 今天總結(jié)一下用法
2023-04-04
VsCode里的Vue模板的實(shí)現(xiàn)
這篇文章主要介紹了VsCode里的Vue模板的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
Vue監(jiān)聽(tīng)localstorage變化的方法詳解
在日常開(kāi)發(fā)中,我們經(jīng)常使用localStorage來(lái)存儲(chǔ)一些變量,這些變量會(huì)存儲(chǔ)在瀏覽中,對(duì)于localStorage來(lái)說(shuō),即使關(guān)閉瀏覽器,這些變量依然存儲(chǔ)著,方便我們開(kāi)發(fā)的時(shí)候在別的地方使用,本文就給大家介紹Vue如何監(jiān)聽(tīng)localstorage的變化,需要的朋友可以參考下
2023-10-10
簡(jiǎn)述vue中的config配置
這篇文章主要介紹了vue中的config配置 ,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-01-01
vue實(shí)現(xiàn)表單未編輯或未保存離開(kāi)彈窗提示功能
這篇文章主要介紹了vue實(shí)現(xiàn)表單未編輯或未保存離開(kāi)彈窗提示功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
用vue寫(xiě)一個(gè)日歷
這篇文章主要介紹了如何利用vue寫(xiě)一個(gè)日歷，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
2020-11-11
vue.js項(xiàng)目nginx部署教程
nginx是一個(gè)高性能的HTTP和反向代理服務(wù)器。這篇文章主要介紹了vue.js項(xiàng)目nginx部署,需要的朋友可以參考下
2018-04-04
vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)
el-tooltip組件本身就是懸浮提示功能,在對(duì)它進(jìn)行二次封裝時(shí),實(shí)現(xiàn)超出的文本浮現(xiàn),本文就來(lái)介紹一下vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn),感興趣的可以了解一下
2023-12-12
Vue2+JS實(shí)現(xiàn)掃雷小游戲
實(shí)現(xiàn)小游戲可以鍛煉自己的邏輯思維能力，也不會(huì)很枯燥，完成時(shí)會(huì)給自己帶來(lái)一種滿足感。本文就將利用Vue和JS實(shí)現(xiàn)簡(jiǎn)單的掃雷小游戲，需要的可以參考一下
2022-06-06