为何Svelte本地环境报‘Image is not defined’错误，REPL却正常？

错误原因 #

Image 是浏览器环境独有的全局DOM构造函数，你的本地项目大概率在**服务端渲染（SSR/SSG）**环境下运行了这段代码（比如用了SvelteKit），Node.js环境中没有浏览器的DOM API，所以会抛出这个错误。而Svelte REPL是纯客户端运行环境，因此代码能正常执行。

解决思路 #

方法1：用Svelte的onMount钩子执行代码 #

onMount是Svelte提供的生命周期钩子，里面的代码只会在浏览器端运行，不会在服务端执行：

import { onMount } from 'svelte';

onMount(() => {
  // Preload images
  for (const name in images) {
    (new Image()).src = images[name];
  }
});

方法2：判断浏览器环境再执行代码 #

通过检查window对象是否存在，确保代码只在浏览器环境运行：

if (typeof window !== 'undefined') {
  // Preload images
  for (const name in images) {
    (new Image()).src = images[name];
  }
}

内容的提问来源于stack exchange，提问作者Ziur Olpa