SvelteKit开发遇ReferenceError: File is not defined问题求助

这个错误的核心是SvelteKit默认的服务器端渲染（SSR）机制导致的：

• File是浏览器环境独有的Web API，Node.js服务器环境里不存在这个全局对象。
• SvelteKit会先在Node.js服务器上执行页面组件（+page.svelte）的代码做SSR渲染，当服务器端运行到new File([], '')时，找不到File对象，直接抛出ReferenceError。
• 而常规JS/TS或非SSR的Svelte环境中，代码仅在浏览器端运行，自然能正常访问File对象，不会出问题。

这里提供几种实用的修复方式：

1. 仅在浏览器端初始化代码
   用SvelteKit提供的browser变量做环境检测，确保涉及File的代码只在浏览器里执行：

<script lang="ts">
import { browser } from '$app/environment';
import type { FormCreationData } from './types';

let formObject: FormCreationData;

if (browser) {
    formObject = {
        fileToUpload: new File([], ''),
        anotherField: "",
        // 其他字段
    };
} else {
    // 服务器端的占位值，避免类型报错
    formObject = {
        fileToUpload: undefined,
        anotherField: "",
        // 其他字段
    };
}
</script>

2. 延迟初始化到组件挂载后
   利用Svelte的onMount钩子，等组件挂载到浏览器DOM后再创建File对象：

<script lang="ts">
import { onMount } from 'svelte';
import type { FormCreationData } from './types';

let formObject: FormCreationData = {
    fileToUpload: undefined as unknown as File,
    anotherField: "",
    // 其他字段
};

onMount(() => {
    formObject.fileToUpload = new File([], '');
});
</script>

3. 环境判断直接赋值
   通过判断File是否存在，给字段做兼容性赋值：

<script lang="ts">
import type { FormCreationData } from './types';

let formObject: FormCreationData = {
    fileToUpload: typeof File !== 'undefined' ? new File([], '') : undefined as unknown as File,
    anotherField: "",
    // 其他字段
};
</script>

内容的提问来源于stack exchange，提问作者Lior Dahan