解决Vue3+Vite使用富文本插件quill-image-resize-module打包时报错image-resize.min.js没有默认导出

报错信息

'default' is not exported by node_modules/quill-image-resize-module/image-resize.min.js, imported by src/views/space/components/RichTextModal.vue
file: /Users/biululala/memospace/src/views/space/components/RichTextModal.vue:8:7
 6: import "@vueup/vue-quill/dist/vue-quill.snow.css";
 7: import { ImageDrop } from "quill-image-drop-module";
 8: import ImageResize from "quill-image-resize-module";
           ^
 9: const _sfc_main = /* @__PURE__ */ _defineComponent({
10:   __name: "RichTextModal",
error during build:
Error: 'default' is not exported by node_modules/quill-image-resize-module/image-resize.min.js, imported by src/views/space/components/RichTextModal.vue
    at error (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:12543:16)
    at Module.traceVariable (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:12902:29)
    at ModuleScope.findVariable (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:11554:39)
    at FunctionScope.findVariable (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at ChildScope.findVariable (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at Identifier.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:7553:40)
    at CallExpression.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at CallExpression.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:9049:15)
    at ExpressionStatement.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5383:23)
    at BlockStatement.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at FunctionExpression.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5383:23)
    at Property.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5383:23)
    at ObjectExpression.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at CallExpression.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at CallExpression.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:9049:15)
    at VariableDeclarator.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5383:23)
    at VariableDeclaration.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at Program.bind (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at Module.bindReferences (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:12539:18)
    at Graph.sortModules (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:23108:20)
    at Graph.build (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:22986:14)
    at async /Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:23680:13
    at async catchUnfinishedHookActions (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:23162:20)
    at async rollupInternal (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/rollup/dist/shared/rollup.js:23677:5)
    at async doBuild (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/vite/dist/node/chunks/dep-689425f3.js:41710:24)
    at async build (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/vite/dist/node/chunks/dep-689425f3.js:41552:16)
    at async CAC.<anonymous> (/Users/biululala/Desktop/BWG/alpha环境最新代码/memospace的副本/node_modules/vite/dist/node/cli.js:738:9)
error Command failed with exit code 1.

排查过程

1. 查看quill-image-resize-module源码,正确导出了ImageResize

2. 搜索引擎检索出来的都是引入的报错,可以将ImageResize改为imageResize,未解决

3. 将默认导入改为按需导入,未解决

4. 卸载依赖重装,未解决

5. 上github查找是否有类似问题,解决

最终解决

直接引入

// import resizeImage from 'quill-image-resize-module';
import 'quill-image-resize-module/image-resize.min.js';

// Quill.register('modules/imageResize', resizeImage);

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值