v2 Class constructor CropperCanvas cannot be invoked without 'new'

[laterdays]

Describe the bug Class constructor CropperCanvas cannot be invoked without 'new'

To Reproduce

import CropperCanvas from '@cropper/element-canvas';
import CropperImage from '@cropper/element-image';
import CropperHandle from '@cropper/element-handle';
import CropperShade from '@cropper/element-shade';
import CropperSelection from '@cropper/element-selection';

 <cropper-canvas class="h-400px" background>
        <cropper-image id="image" :src="****" alt="Picture" />
        <cropper-shade hidden />
        <cropper-handle action="select" plain />
        <cropper-selection id="cropperSelection" initial-aspect-ratio="1.5" initial-coverage="0.5" movable resizable>
          <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)" />
          <cropper-handle action="n-resize" />
          <cropper-handle action="e-resize" />
          <cropper-handle action="s-resize" />
          <cropper-handle action="w-resize" />
          <cropper-handle action="ne-resize" />
          <cropper-handle action="nw-resize" />
          <cropper-handle action="se-resize" />
          <cropper-handle action="sw-resize" />
        </cropper-selection>
      </cropper-canvas>

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[laterdays]

Failed to resolve component: cropper-canvas

[fengyuanchen]

For on-demand usage, in order to enable these custom elements, you need to manually call the $define static method of each Class constructor.

import CropperCanvas from '@cropper/element-canvas';
import CropperImage from '@cropper/element-image';
import CropperHandle from '@cropper/element-handle';
// ...

CropperCanvas.$define();
CropperImage.$define();
CropperHandle.$define();
// ...

[TerryXu-97]

after manually call the $define static method of each Class constructor still appear the issue in vue component

[fengyuanchen]

@F-OlO-Y For Vue, you should tell Vue that all <cropper-* /> elements are custom elements. See Using Custom Elements in Vue