Error on Next 14 with App router

[riccardolinares]

Hi,
I'm getting an error with a node module imported from @whereby.com/browser-sdk/embed.

I'm using Next.js ( next@14.1.4 ) with App directory and @whereby.com/browser-sdk version 2.6.0

It seems like the node module @ungap/create-content is not updated to support server/client components yet.

Here is the full error:

node_modules/@ungap/create-content/esm/index.js (56:1) @ eval ⨯ ReferenceError: document is not defined at __webpack_require__ (/Users/riccardolinares/Projects/comestai/.next/server/webpack-runtime.js:33:42) at __webpack_require__ (/Users/riccardolinares/Projects/comestai/.next/server/webpack-runtime.js:33:42) at __webpack_require__ (/Users/riccardolinares/Projects/comestai/.next/server/webpack-runtime.js:33:42) at __webpack_require__ (/Users/riccardolinares/Projects/comestai/.next/server/webpack-runtime.js:33:42) at __webpack_require__ (/Users/riccardolinares/Projects/comestai/.next/server/webpack-runtime.js:33:42) at __webpack_require__ (/Users/riccardolinares/Projects/comestai/.next/server/webpack-runtime.js:33:42) at eval (./src/components/whereby/room.tsx:7:88) at (ssr)/./src/components/whereby/room.tsx (/Users/riccardolinares/Projects/comestai/.next/server/app/room/[roomUrl]/page.js:162:1) at __webpack_require__ (/Users/riccardolinares/Projects/comestai/.next/server/webpack-runtime.js:33:42) null

How can I solve it?

[thyal]

Hello 👋
This line ReferenceError: document is not defined makes me think the issue is that this is being rendered in a server component. That won't work unfortunately, as we are dependent on browser API's. Can you try to add "use client"; in the top of the file that you are using the embed element in?

Side note: The repository for our browser-sdk has changed, and now lives in this monorepo: https://github.com/whereby/sdk

[riccardolinares]

I was already using a client component :/

[thyal]

I just tried this myself in a new nextjs 14 app, and can confirm I get the same error in console. I've created a ticket for this, thanks for the heads up!

However I'm able to use it and join a room, even with the error - does that not work on your side?

[riccardolinares]

It works on local development, but I have a strict error handling so it will not work in production environment 😅

[riccardolinares]

Any news about this issue?

[antho1404]

One quick fix in my case that worked is to import the script only when the client is mounted

useEffect(() => {
  import("@whereby.com/browser-sdk/embed");
}, []);

and removing the import "@whereby.com/browser-sdk/embed";

[chrisbujok]

I have the same problem with a Remix app

[thyal]

Sorry for the delay here. I've played around with this now, and I have found a solution. Basically, the embed element requires browser API's, and nextjs does some pre-rendering even of client components. See more info here: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

The way you can get around this is to use dynamic imports.
Let's say you have the embed element in a component, something like this:

"use client";

import "@whereby.com/browser-sdk/embed";

export default function Room() {
  return (
    <main>
      <whereby-embed room={"https://your-subdomain.whereby.com/room"} />
    </main>
  );
}

This can then be imported in a page like this:

import dynamic from "next/dynamic";

const Room = dynamic(() => import("./room"), { ssr: false });

export default function Home() {
  return (
    <main>
      <Room />
    </main>
  );
}

This will make sure it's rendered on the client only, and the error goes away. Let me know if this solves it for you!
I'm currently writing a guide on browser-sdk usage with Next.js, and will make sure this is included.

I haven't had time to look in to Remix yet, I'm guessing it's something similar, but I will do some testing.