在Vue3中使用的2.15.2，但切换到最新版本，报错 CanvasSelect is not a constructor

[heylight]

请贴一下代码

[Z20163132]

"canvas-select": "^2.21.1",

import CanvasSelect from 'canvas-select'

onMounted(() => { instance = new CanvasSelect('.container'); instance.ctrlRadius = navigator.userAgent.includes('Mobile') ? 6 : 3 instance.MIN_WIDTH = 1 instance.MIN_HEIGHT = 1 instance.on('load', (src) => { // console.log('图片加载完成', src); }) })

[Z20163132]

报错：TypeError: CanvasSelect is not a constructor

[Z20163132]

2.15.2版本使用正常，2.21.1版本使用报错

[heylight]

建议删除node_modules重新安装试试

[Z20163132]

试了，还是不行

[Z20163132]

有其他的解决办法吗？

[heylight]

没有复现你说的问题，请通过debug自行排查

"canvas-select": "^2.21.1",
"vue": "^3.3.11"

<script setup lang="ts">
import { onMounted } from 'vue'
import CanvasSelect from 'canvas-select'
onMounted(() => {
  const instance = new CanvasSelect('.stage')
  instance.ctrlRadius = navigator.userAgent.includes('Mobile') ? 6 : 3
  instance.MIN_WIDTH = 1
  instance.MIN_HEIGHT = 1
  // instance.setImage(
  //   'https://n.sinaimg.cn/www/transform/300/w660h440/20240318/3875-37fb8533570d8661d3f547c7e3b0ddde.jpg'
  // )
  instance.on('load', (src: any) => {
    console.log('图片加载完成', src)
  })
})
</script>

<template>
  <div>
    <canvas class="stage"></canvas>
  </div>
</template>
<style scoped>
.stage {
  width: 500px;
  height: 500px;
  background-color: #ccc;
}
</style>

[Z20163132]

排查不到原因，我在Vue3中没有使用ts

[Z20163132]

安装了2.20.0版本可以，不报错；

2.21.0和2.21.1版本报错

[heylight]

node版本换成18试试呢？ 如果还不行就用CDN吧

<script src="https://unpkg.com/canvas-select@^2/lib/canvas-select.min.js"></script>

[xiaoxuefengnian]

是不是用了老版本的 vite ? 之前一个项目也碰到过。默认使用了 vite@3.1.x，后来升级了下就可以了。

[Z20163132]

升级vite版本后，问题解决了