errors in Next.js due to export

konradbjk commented 1 year ago

While running yarn dev I am getting the below error. Installed the package via yarn.

error - /Users/konrad/Projects/go4ngo-landing-page/node_modules/@justinribeiro/lite-youtube/lite-youtube.js:1
export class LiteYTEmbed extends HTMLElement {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1084:15)
    at Module._compile (node:internal/modules/cjs/loader:1119:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1057:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.@justinribeiro/lite-youtube (/Users/konrad/Projects/go4ngo-landing-page/.next/server/pages/index.js:504:18)
    at __webpack_require__ (/Users/konrad/Projects/go4ngo-landing-page/.next/server/webpack-runtime.js:33:42) {
  page: '/'
}

justinribeiro commented 1 year ago

I suspect this is because the loader thinks it's a common js module, when it's ESM. The release today (v1.5.0) should resolve this. Give it a spin, let me know.

andrew-braun commented 1 year ago

Same issue here! Running latest version of lite-youtube (1.5.0) and latest Next.js (13.1.6) Was able to get it to load without errors by dynamically importing it in useEffect--didn't work with Next's top-level dynamic import.

  useEffect(() => {
    async function importYoutubeLite() {
      const youtubeLite = import("@justinribeiro/lite-youtube");
    }
    importYoutubeLite();
  }, []);

Not my favorite workaround, but it works!

justinribeiro / lite-youtube

errors in Next.js due to export #83