-
Notifications
You must be signed in to change notification settings - Fork 3
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
Comments
Hello 👋 Side note: The repository for our browser-sdk has changed, and now lives in this monorepo: https://github.com/whereby/sdk |
I was already using a client component :/
|
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? |
It works on local development, but I have a strict error handling so it will not work in production environment 😅 |
Any news about this issue? |
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 |
I have the same problem with a Remix app |
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. "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 haven't had time to look in to Remix yet, I'm guessing it's something similar, but I will do some testing. |
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?
The text was updated successfully, but these errors were encountered: