Use Uppy with TypeScript and Vue2. Unexpected token 'export'

416 Views Asked by At

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?

0

There are 0 best solutions below