Image-Editor in Vue.js (Vue 3.x): TypeError: Cropper2 is not a constructor

[GonzaloHirschToptal]

I'm working on a Vite app that implements Uppy and one of the features we want to include is the Image Editor. I'm using @uppy/vue in order to integrate the Dashboard without having to implement it myself.

The dashboard works properly, but when clicking the edit button I get the error TypeError: Cropper2 is not a constructor, and any subsequent edits to the image trigger errors.

My configuration is:

<template>
  <dashboard
    :uppy="uppy"
    :plugins="['ImageEditor']"
    :props="{
      theme: 'light',
      metaFields: [{ id: 'name', name: 'Name', placeholder: 'File name' }],
    }"
  />
</template>

<script>
import { Dashboard } from "@uppy/vue";
import ImageEditor from "@uppy/image-editor";
import Uppy from "@uppy/core";

export default {
  name: "UppyUpload",
  components: {
    Dashboard
  },
  computed: {
    uppy: () =>
      new Uppy().use(ImageEditor, {
        quality: 0.8,
        cropperOptions: {
          viewMode: 1,
          background: false,
          autoCropArea: 1,
          responsive: true,
          croppedCanvasOptions: {}
        },
        actions: {
          revert: true,
          rotate: true,
          granularRotate: true,
          flip: true,
          zoomIn: true,
          zoomOut: true,
          cropSquare: true,
          cropWidescreen: true,
          cropWidescreenVertical: true
        }
      })
  },
  beforeUnmount() {
    this.uppy.close();
  }
};
</script>

Versions are:

"@uppy/core": "^2.0.2",
"@uppy/image-editor": "^1.0.1",
"@uppy/vue": "^0.4.0",
"vue": "3.2.11",

[aduh95]

Could you share the full stack trace please?

[GonzaloHirschToptal]

Could you share the full stack trace please?

It's a console error from the browser. Whenever the Image Loader loads an image to edit I get this error and the Dashboard becomes unresponsive.

Uncaught (in promise) TypeError: Cropper2 is not a constructor
    at Editor.componentDidMount (Editor.js:50)
    at index.js:274
    at Array.some (<anonymous>)
    at index.js:272
    at Array.some (<anonymous>)
    at z (index.js:267)
    at S (render.js:64)
    at UIPlugin.js:84
    at UIPlugin.js:37
    
componentDidMount | @ | Editor.js:50
  | (anonymous) | @ | index.js:274
  | (anonymous) | @ | index.js:272
  | z | @ | index.js:267
  | S | @ | render.js:64
  | (anonymous) | @ | UIPlugin.js:84
  | (anonymous) | @ | UIPlugin.js:37
  | Promise.then (async) |   |  
  | (anonymous) | @ | UIPlugin.js:31
  | update | @ | UIPlugin.js:144
  | (anonymous) | @ | index.js:368
  | iteratePlugins | @ | index.js:1146
  | updateAll | @ | index.js:367
  | (anonymous) | @ | index.js:328
  | (anonymous) | @ | index.js:50
  | _publish2 | @ | index.js:49
  | setState | @ | index.js:35
  | setState | @ | index.js:379
  | setPluginState | @ | BasePlugin.js:30
  | Dashboard.openFileEditor | @ | index.js:165
  | onClick | @ | index.js:163
  | I | @ | props.js:153

Upon inspection of the referenced lines, it seems that the line throwing an error is:
this.cropper = new Cropper(this.imgElement, opts.cropperOptions);