vue.js - Bruk Uppy med TypeScript og Vue2. Uventet token 'export'


Jeg har prøvd å få Uppy til å fungere i mitt Vue TypeScript-prosjekt i noen timer nå. Jeg bruker Vue2 med klassekomponenter og Nuxt.

Jeg har allerede prøvd å gi Uppy via en getter (siden dokumentasjonen sier det),

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
      }
    });

samt et attributt.

  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
      }
    });

Hele filen min ser slik ut

<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>

Allerede etter kompilering får jeg en advarsel i konsollen: WARN in ./node_modules/@uppy/vue/lib/dashboard.js "export 'h' (importert som 'Vue') ble ikke funnet i 'vue'

Men når jeg prøver å laste siden, får jeg feilen at export er et uventet token

Dessverre har jeg ingen flere ideer om hva jeg kunne gjøre galt. Har noen av dere noen ideer?

Relaterte artikler