vue3 引入canvas-select 启动后报错require is not defined

[Promiseee]

import CanvasSelect from "canvas-select";

export 'default' (imported as 'CanvasSelect') was not found in 'canvas-select' (module has no exports)

Uncaught runtime errors: × ERROR require is not defined ReferenceError: require is not defined at eval (webpack-internal:///./node_modules/canvas-select/lib/canvas-select.min.js:2:1) at ./node_modules/canvas-select/lib/canvas-select.min.js (http://localhost:8080/js/src_components_ImageListNew_vue.js:116:1) at webpack_require (http://localhost:8080/js/app.js:177:32) at fn (http://localhost:8080/js/app.js:428:21) at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ImageListNew.vue?vue&type=script&scope=true&setup=true&lang=js:8:71) at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ImageListNew.vue?vue&type=script&scope=true&setup=true&lang=js (http://localhost:8080/js/src_components_ImageListNew_vue.js:18:1) at webpack_require (http://localhost:8080/js/app.js:177:32) at fn (http://localhost:8080/js/app.js:428:21) at eval (webpack-internal:///./src/components/ImageListNew.vue?vue&type=script&scope=true&setup=true&lang=js:5:237) at ./src/components/ImageListNew.vue?vue&type=script&scope=true&setup=true&lang=js (http://localhost:8080/js/src_components_ImageListNew_vue.js:62:1)

[heylight]

1. 尝试升级一下vite
2. 直接cdn引用CanvasSelect

[Promiseee]

您好 请教一下 我的图片格式是 `data:image/png;base64, 报这个错是因为图片太大了吗

[Xigla]

感觉不像，你可以下载源码调试一下。index.html 里改下图片地址就行

[DongMenKant]

您好 请教一下 我的图片格式是 `data:image/png;base64, 报这个错是因为图片太大了吗

是因为calcStep递归函数进入死循环了，可以增加return条件或递归次数限制来解决。如果是在项目组件中创建了CanvasSelect对象instance，记得在onBeforeUnmount时调用instance.destroy()进行销毁，即可避免。

[309710274]

请问你这个问题解决了吗？我也碰到这个问题

[LiGang258]

您好 请教一下 我的图片格式是 `data:image/png;base64, 报这个错是因为图片太大了吗

是因为calcStep递归函数进入死循环了，可以增加return条件或递归次数限制来解决。如果是在项目组件中创建了CanvasSelect对象instance，记得在onBeforeUnmount时调用instance.destroy()进行销毁，即可避免。

react项目里面 在清理函数里面使用instance.destroy();也无效啊