javascript - SvelteKit - "ReferenceError: Filea ei ole määritelty"

Nopea ongelma, johon törmäsin kehittäessäni web-sovellusta käyttäen SvelteKitiä (ja sivutuotteena Viteä):

Yritin määritellä tyhjän paikkamerkki-File-objektin seuraavasti +page.svelte-tiedostoni <script>-tunnisteen sisällä:

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

Vaikka sen pitäisi toimia normaalissa JS/TS:ssä (ja Svelteissä, jos et käytä SvelteKit:iä), se nyt heittää seuraavan virheen:

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

Miksi asia on näin?

Vastaus #1

Koska SvelteKit toteuttaa palvelinpuolen renderöinnin (SSR) - Koodin, joka on tiedostossa +page.svelte, on suoritettava sekä asiakasselaimissa että Vite-palvelimella.

File-luokka on saatavilla vain selaimissa, joten se ei pysty täyttämään tätä vaatimusta (Saatat tietää, että Node.js tarjoaa fs-moduulin tiedostotoimintojen mahdollistamiseksi sen sijaan).

Tämä tarkoittaa, että tämän ongelman korjaamiseen on kaksi mahdollista tapaa:

1. Poista SSR käytöstä käyttämällä muuttujaa ssr tiedostossa +page.ts/js:

   export const ssr = false;
   

2. Löydä tapa määritellä File-objekti kohdassa, jossa koodi ajetaan selaimessa (Tämä voidaan tehdä tarkistamalla browser-muuttuja $app/environment-moduulin alla, tai yhden tuetuista Svelte-hookeista sisällä, kuten onMount()).