Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error on Next 14 with App router #224

Open
riccardolinares opened this issue Apr 4, 2024 · 8 comments
Open

Error on Next 14 with App router #224

riccardolinares opened this issue Apr 4, 2024 · 8 comments

Comments

@riccardolinares
Copy link

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

I'm using Next.js ( [email protected] ) 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
Copy link
Member

thyal commented Apr 4, 2024

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
Copy link
Author

riccardolinares commented Apr 4, 2024 via email

@thyal
Copy link
Member

thyal commented Apr 5, 2024

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
Copy link
Author

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

@riccardolinares
Copy link
Author

Any news about this issue?

@antho1404
Copy link

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
Copy link

I have the same problem with a Remix app

@thyal
Copy link
Member

thyal commented Jun 12, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants