Svelte项目中页面跳转后出现ReferenceError: mapkit未定义问题求助

问题分析 #

直接访问/map页面时MapKit正常加载，但从其他页面跳转过来时出现ReferenceError: mapkit is not defined，核心原因是：

• 单页应用（SPA）跳转时，svelte:head中注入的MapKit脚本可能不会被重新加载，或者onMount钩子执行时脚本还未加载完成，导致全局的mapkit对象不存在。

解决方案 #

通过动态加载MapKit脚本并等待加载完成，确保初始化代码只在脚本加载成功后执行，修改后的map.svelte代码如下：

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

    onMount(async () => {
        // 先检查全局是否已加载mapkit
        if (!window.mapkit) {
            // 动态创建脚本并等待加载完成
            await new Promise((resolve) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js';
                script.onload = resolve;
                document.head.appendChild(script);
            });
        }

        // 初始化MapKit并创建地图实例
        mapkit.init({
            authorizationCallback: (done) => {
                fetch('/api/gettoken')
                    .then(res => res.json())
                    .then(done);
            }
        });
        const map = new mapkit.Map('map');
    });
</script>

<div id="map" />

额外说明 #

• 移除了原map.svelte中的svelte:head脚本注入，改用动态加载的方式，避免SPA跳转时脚本加载的时序问题。
• 如果你的应用中多个页面都需要用到MapKit，也可以选择在根组件的svelte:head中全局注入脚本，但动态加载能减少初始页面的加载体积，更适合仅在/map页面使用的场景。

内容的提问来源于stack exchange，提问作者R Barnes