Not working in nuxt 2

[MooseSaeed]

We are using version 0.9.1 and it works fine, but we're having trouble with youtube-nocookie and the hell of un-used javascript it brings. After upgrading to v1.5.0, I'm getting this error in Nuxt 2 project:

/node_modules/@justinribeiro/lite-youtube/lite-youtube.js                        friendly-errors 16:46:05

Module parse failed: Unexpected token (232:23)                                                         friendly-errors 16:46:05
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.domRefImg.fallback.src = posterUrlJpeg;
|         this.domRefImg.fallback.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);
>         this.domRefImg?.fallback?.setAttribute('alt', `${this.videoPlay}: ${this.videoTitle}`);
|     }
|     initIntersectionObserver() {

And we're just using it like this:

<lite-youtube
    v-if="provider === 'youtube'"
    :videoid="embedId"
></lite-youtube>

<noscript>
    <iframe
    loading="lazy"
    height="315"
    :src="iframeSrc"
    title="video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    ></iframe>
</noscript>

[justinribeiro]

this.domRefImg?.fallback?.setAttribute('alt', ${this.videoPlay}: ${this.videoTitle});

Whichever version of webpack you're using doesn't understand optional chaining. That's what the error message is saying, and isn't an issue with lite-youtube. Consult https://github.com/webpack/webpack/issues/10227 for additional information.

[MooseSaeed]

this.domRefImg?.fallback?.setAttribute('alt', ${this.videoPlay}: ${this.videoTitle});

Whichever version of webpack you're using doesn't understand optional chaining. That's what the error message is saying, and isn't an issue with lite-youtube. Consult webpack/webpack#10227 for additional information.

Nuxt 2 uses webpack 4 and of course it understands optional chaining, Im using it throughout my entire codebase for 5 websites.

[justinribeiro]

of course it understands optional chaining

It understands first party code with chaining, not third party modules. lite-youtube is a third party ESM module; you have to tell webpack that (which is why it's saying "I don't have a loader for this" and why it chokes on the optional chaining because it's not applying the same build config for your code as that module).

[MooseSaeed]

Just in case anyone using nuxt 2 encountered this issue, it can be resolved by adding the package to build.transpile array in nuxt.config.js file.

{
  build: {
    transpile: ['@justinribeiro/lite-youtube']
  }
}

Thanks @justinribeiro for such an awesome package.