javascript - SvelteKit - "ReferenceError: File nu este definit"

O problemă rapidă cu care m-am confruntat în timp ce dezvoltam o aplicație web folosind SvelteKit (și, prin extensie, Vite):

În interiorul etichetei <script> din fișierul meu +page.svelte am încercat să definesc un obiect File gol ca substitut în următorul mod:

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

Deși ar trebui să funcționeze în JS/TS normal (și în Svelte dacă nu folosești SvelteKit), acum generează următoarea eroare:

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

De ce este acest lucru așa?

Răspuns #1

Deoarece SvelteKit implementează redarea pe partea serverului (SSR) - Codul care se află în fișierul +page.svelte trebuie să ruleze atât pe browserele client, cât și pe serverul Vite.

Clasa File este disponibilă doar în browsere, deci nu va putea îndeplini această cerință (Poate știți că Node.js oferă modulul fs pentru a permite în schimb operațiuni cu fișiere).

Aceasta înseamnă că există două moduri de a rezolva posibil această problemă:

1. Dezactivați SSR folosind variabila ssr în fișierul +page.ts/js:

   export const ssr = false;
   

2. Găsiți o modalitate de a defini obiectul File într-un punct în care codul rulează în browser (Acest lucru se poate face verificând variabila browser din modulul $app/environment, sau în interiorul unuia dintre hook-urile Svelte suportate, cum ar fi onMount()).