4

I've been trying to get Uppy working in my Vue TypeScript project for a few hours now. I am using Vue2 with the class components and Nuxt.

I have already tried to provide Uppy via a getter (since the documentation says so),

get uppy() {
    return Uppy<Uppy.StrictTypes>({
      restrictions: {
        allowedFileTypes: ["image/*"],
        maxNumberOfFiles: 1
      }
    }).use(ImageEditor, {
      id: "ImageEditor",
      quality: 0.8,
      cropperOptions: {
        viewMode: 1,
        aspectRatio: 1,
        background: false,
        autoCropArea: 1,
        responsive: true
      },
      actions: {
        revert: true,
        rotate: true,
        flip: true,
        zoomIn: true,
        zoomOut: true,
        cropSquare: true,
        cropWidescreen: true,
        cropWidescreenVertical: true
      }
    });

as well as an attribute.

  private uppy =  Uppy<Uppy.StrictTypes>({
      restrictions: {
        allowedFileTypes: ["image/*"],
        maxNumberOfFiles: 1
      }
    }).use(ImageEditor, {
      id: "ImageEditor",
      quality: 0.8,
      cropperOptions: {
        viewMode: 1,
        aspectRatio: 1,
        background: false,
        autoCropArea: 1,
        responsive: true
      },
      actions: {
        revert: true,
        rotate: true,
        flip: true,
        zoomIn: true,
        zoomOut: true,
        cropSquare: true,
        cropWidescreen: true,
        cropWidescreenVertical: true
      }
    });

My entire file looks like this

<template>
  <div>
    <dashboard
      :uppy="uppy"
      :plugins="['ImageEditor']"
    />
  </div>
</template>

<script lang="ts">
import Uppy from "@uppy/core";
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";
import "@uppy/image-editor/dist/style.css";
import { Dashboard } from "@uppy/vue";
import ImageEditor from "@uppy/image-editor";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    Dashboard
  }
})
export default class uppyUpload extends Vue {
  private uppy =  Uppy<Uppy.StrictTypes>({
      restrictions: {
        allowedFileTypes: ["image/*"],
        maxNumberOfFiles: 1
      }
    }).use(ImageEditor, {
      id: "ImageEditor",
      quality: 0.8,
      cropperOptions: {
        viewMode: 1,
        aspectRatio: 1,
        background: false,
        autoCropArea: 1,
        responsive: true
      },
      actions: {
        revert: true,
        rotate: true,
        flip: true,
        zoomIn: true,
        zoomOut: true,
        cropSquare: true,
        cropWidescreen: true,
        cropWidescreenVertical: true
      }
    });

  beforeDestroy(): void {
    this.uppy.close();
  }
}
</script>

Already after compiling I get an warning in the console: WARN in ./node_modules/@uppy/vue/lib/dashboard.js "export 'h' (imported as 'Vue') was not found in 'vue'

However, when I try to load the page, I get the error that export is a unexpected token Unexpected token 'export'

Unfortunately, I have no more idea what I could do wrong. Do any of you have any ideas?

Florian Falk
  • 214
  • 4
  • 17
  • Have you found a solution for this? – moritz May 05 '22 at 13:34
  • Hi have you found a solution for this? I'm also facing the same error. – Nan Da May 12 '22 at 03:54
  • Unfortunately not. We decided to program our own component, because we had some difficulties with Uppy in other places. And unfortunately there doesn't really seem to be an alternative. We will also make our component open source. However, there is no timetable for this yet. – Florian Falk Aug 05 '22 at 15:02

0 Answers0