javascript - SvelteKit - "ReferenceError: File er ikke definert"


Et raskt problem jeg støtte på mens jeg utviklet en nettapp ved å bruke SvelteKit (og ved utvidelse, Vite):

Inne i <script>-taggen i min +page.svelte-fil prøvde jeg å definere et tomt plassholder-File-objekt på følgende måte:

    let formObject: FormCreationData = {
        fileToUpload: new File([], ''),
        anotherField: "",
        ...
    };

Mens det bør fungere i vanlig JS/TS (og Svelte hvis du ikke bruker SvelteKit), gir det nå følgende feil:

ReferenceError: File is not defined
    at +page.svelte:13:14

Hvorfor er dette tilfelle?

Svar #1

Siden SvelteKit implementerer server-side rendering (SSR) - koden som er på +page.svelte-filen må kjøre både på klientnettlesere og Vite-serveren.

Klassen File er kun tilgjengelig i nettlesere, så den vil ikke være i stand til å oppfylle dette kravet (Du vet kanskje at Node.js tilbyr fs-modulen for å muliggjøre filoperasjoner i stedet).

Dette betyr at det finnes to måter å muligens løse dette problemet på:

  1. Deaktiver SSR ved å bruke variabelen ssr i +page.ts/js-filen:

    export const ssr = false;
    
  2. Finn en måte å definere File-objektet på et punkt hvor koden kjøres i nettleseren (Dette kan gjøres ved å sjekke browser-variabelen under $app/environment-modulen, eller inne i en av de støttede Svelte-hookene, som onMount()).