2

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.

enter image description here

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

2
4

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.

1
  • I added some sample data and it works. Thanks! Jun 25 '20 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.