Lightning Web Components Playground - issue with imported JS files

Question

I'm trying to load a component that utilizes the YouTube embedded player JS files. I've included a subfolder in the basicYouTubePlayer folder called YouTubeJS, and included the files in that folder.

However, when the playground attempts to run the code, I get this error:

'YouTubePath1' is not exported by root/basicYouTubePlayer/YouTubeJS/iframe_api.js

Here is the basicYouTubePlayer.js code:

import { LightningElement, api } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import {YouTubePath1} from './YouTubeJS/iframe_api.js';
import {YouTubePath2} from './YouTubeJS/widget_api.js';

export default class BasicYouTubePlayer extends LightningElement {
    @api youTubeId;
    player;

    renderedCallback() {
        if (!this.youTubeId) {
            return;
        }

        if (window.YT) {
            if (this.player) {
                this.player.cueVideoById(this.youTubeId);
            } else {
                this.onYouTubeIframeAPIReady();
            }
        } else {
            Promise.all([
                loadScript(this, YouTubePath1),
                loadScript(this, YouTubePath2)
            ])
                .then(() => {
                    this.onYouTubeIframeAPIReady();
                })
                .catch(error => {
                    this.showErrorToast(error);
                });
        }
    }

    onPlayerError(e) {
        let explanation = '';
        if (e.data === 2) {
            explanation = 'Invalid YouTube ID';
        } else if (e.data === 5) {
            explanation =
                'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.';
        } else if (e.data === 100) {
            explanation =
                'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.';
        } else if (e.data === 101 || e.data === 150) {
            explanation =
                'The owner of the requested video does not allow it to be played in embedded players.';
        }

        this.showErrorToast(explanation);
    }

    showErrorToast(explanation) {
        const evt = new ShowToastEvent({
            title: 'Error loading YouTube player',
            message: explanation,
            variant: 'error'
        });
        this.dispatchEvent(evt);
    }

    onYouTubeIframeAPIReady() {
        const containerElem = this.template.querySelector('.wrapper');
        const playerElem = document.createElement('DIV');
        playerElem.className = 'player';
        containerElem.appendChild(playerElem);

        this.player = new window.YT.Player(playerElem, {
            height: '390',
            width: '100%',
            videoId: this.youTubeId,
            events: {
                onError: this.onPlayerError.bind(this)
            }
        });
    }
}

How would I change my code to address this issue?

Playground

Answer 1

I fixed your code by adding the following two lines to each of the YT scripts:

const YT1 = window.YT;
export { YT1 as YT };

And then patching your controller:

import { YT as YoutubePath1 } from './YouTubeJS/iframe_api.js';
import { YT as YouTubePath2 } from './YouTubeJS/widget_api.js';

Some additional work may be necessary, as I'm not familiar with the APIs, but at least the compilation errors are gone now.

I've saved the new version in your Playground.