nextjs error - ReferenceError: document is not defined error

[hanumanjiblog]

nextjs error - ReferenceError: document is not defined error, please fix this bug

[hostedposted]

You need to dynamically load it. Try something like this:

import dynamic from "next/dynamic"
dynamic(() => import("tw-elements"), { ssr: false })

[Chetan-B-B]

This works

---

const {} = dynamic(import("tw-elements"), { ssr: false });

---

[SirArchibald97]

I had this issue and the above solution worked however the element I was using then stopped working?

I am using the accordion example found at the top of this page.

[Heldeenn]

I had this issue and the above solution worked however the element I was using then stopped working?

I am using the accordion example found at the top of this page.

I'm using "require" instead of "import" and it works just fine. I don't understand why though.

import dynamic from "next/dynamic";
dynamic(require("tw-elements"), { ssr: false });

[hex-grammer]

This works

const {} = dynamic(import("tw-elements"), { ssr: false });

I almost giveup using tw-elements until i got your comment. Thankyou so much🤩👍🏻

[Trochonovitz]

Hi, we just have launched bunch of integration tutorials - both with CSR and SSR frameworks. If you have more questions about integration or you still got some problems with particular components, let us know by adding new issue / topic in discussions section (if there are some unclear informations or just want let us know about something).

Next.js integration tutorial.

[SMSDev1]

I still get this error. I've been through the Next.js integration tutorial and its not massively helpful. I don't think the _app.js file is made by default. Even with the above I get "initTE' is not exported from tw-elements. I find that the tw-elements.d.ts file just contains 'declare module "tw-elements' which is a bit odd to me?

Just created a new project to follow the Next.js integration tutorial and I get the same errors Attempted import error: 'Datepicker' is not exported from 'tw-elements' (imported as 'Datepicker').

@Trochonovitz