Svelte调用Youtube Iframe API报tag未定义错误解决方案

核心问题是变量作用域不匹配：你把tag变量声明在了onMount的回调函数内部，回调外的代码无法访问到函数内声明的局部变量，运行到给tag.src赋值的行时就会抛出未定义错误。
另外你的代码还有两个逻辑问题：

• onMount是组件级生命周期钩子，不能写在<script context="module">模块块中，模块块代码在组件首次实例化前就会执行，无法绑定组件生命周期
• 操作document、window的逻辑如果放在模块块顶层，在SSR场景下会直接报错，因为服务端没有浏览器环境

把所有API加载、DOM操作逻辑全部移入普通脚本块的onMount回调内，保证作用域一致、执行时机正确，修复后的完整代码如下：

<script>
    import { onMount } from 'svelte';
    export let videoId;
    let playerInstance = null;

    onMount(() => {
        // 已加载过API就直接初始化播放器，避免重复插入脚本
        if (window.YT && window.YT.Player) {
            initPlayer();
            return;
        }

        // 动态加载iframe API脚本
        const tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        const firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 注册API加载完成回调
        window.onYouTubeIframeAPIReady = initPlayer;

        function initPlayer() {
            playerInstance = new window.YT.Player('youtube-container', {
                height: '390',
                width: '640',
                videoId: videoId
            });
        }
    });
</script>

<div>
    YT-Component VID: {videoId}
    <div id="youtube-container" />
</div>

• 移除了错误放置在context="module"块中的生命周期逻辑，将所有浏览器环境相关代码移入onMount内
• 把tag变量的声明、属性赋值、DOM插入逻辑放在同一个函数作用域下，从根源解决未定义报错
• 增加了API重复加载判断，避免多组件实例使用时重复插入script标签
• 预留了播放器挂载容器节点，API加载完成后会自动渲染对应videoId的YouTube播放器

内容的提问来源于stack exchange，提问作者Emrah Gnl