Búsqueda de sitios web

vue.js - Usar Uppy con TypeScript y Vue2. Token inesperado 'export'


He estado intentando que Uppy funcione en mi proyecto de Vue TypeScript durante unas horas. Estoy usando Vue2 con componentes de clase y Nuxt.

Ya he intentado proporcionar Uppy a través de un getter (ya que la documentación lo dice),

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í como un atributo.

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

Mi archivo completo se ve así

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

Ya después de compilar obtengo una advertencia en la consola: WARN in ./node_modules/@uppy/vue/lib/dashboard.js "export 'h' (importado como 'Vue') no se encontró en 'vue'

Sin embargo, cuando intento cargar la página, obtengo el error de que export es un token inesperado

Desafortunadamente, no tengo más idea de qué podría estar haciendo mal. ¿Alguno de ustedes tiene alguna idea?

Artículos relacionados