Svelte-Kit默认骨架项目构建时animejs报错如何解决？

报错原因 #

SvelteKit默认开启服务端渲染（SSR），服务端运行代码时不存在浏览器专属的window/document对象：

• 直接导入animejs时，库初始化就会尝试访问window，触发第一个ReferenceError
• 导入ES版本的animejs时，Node.js服务端默认按CommonJS规范加载模块，识别不了ES模块的export语法，触发第二个语法错误

解决方案 #

方案1：在onMount生命周期中动态导入animejs（推荐） #

onMount仅会在客户端浏览器环境执行，不会在服务端运行，可完全避免环境不匹配的问题，代码修改如下：

<script>
    import { onMount } from 'svelte';

    let heroTimeline;
    let heroAnimation = {
        targets: "#hero grow",
        opacity: {
            value: [0, 1],
            duration: 800,
            easing: 'easeOutExpo',
        },
        scale: {
            value: [0, 1],
            duration: 1000,
            easing: 'easeOutElastic(1, .8)',
        }
    }

    onMount(async () => {
        // 动态导入仅在客户端执行，不会触发服务端报错
        const anime = (await import('animejs')).default;
        heroTimeline = anime.timeline({autoplay: true});
        // 所有和anime相关的执行逻辑都放在onMount内即可
        heroTimeline.add(heroAnimation);
    })
</script>

方案2：禁用当前页面/组件的SSR #

如果该页面所有逻辑都不需要服务端渲染，可以直接关闭SSR，原有代码无需修改即可正常运行：

• 若为页面组件，在页面同级目录新建+page.js文件，添加如下配置：

export const ssr = false;

• 若为单个通用组件，直接在组件顶部添加配置项即可：

<svelte:options ssr={false} />
<script>
    import anime from 'animejs';
    // 原有逻辑保持不变
</script>

内容的提问来源于stack exchange，提问作者Alex Davies