ReferenceError: document is not defined
Unanswered
Pharaoh Hound posted this in #help-forum
Pharaoh HoundOP
Hello everyone,
I'm working on a Next.js application and have come across a persistent ReferenceError: document is not defined issue. Here's what's happening:
The error occurs when running my Next.js app, pointing to an issue with server-side code trying to access document, which should only be available on the client-side.
This error seems to come up when I'm trying to import and use Bootstrap in my application. Context:
The error persists despite the usual client-side checks and ensuring that Bootstrap is not being imported or used directly on the server side.
I've tried using useEffect and conditional typeof window !== 'undefined' checks to safeguard against SSR issues. Not using typescript
I'm working on a Next.js application and have come across a persistent ReferenceError: document is not defined issue. Here's what's happening:
The error occurs when running my Next.js app, pointing to an issue with server-side code trying to access document, which should only be available on the client-side.
This error seems to come up when I'm trying to import and use Bootstrap in my application. Context:
The error persists despite the usual client-side checks and ensuring that Bootstrap is not being imported or used directly on the server side.
I've tried using useEffect and conditional typeof window !== 'undefined' checks to safeguard against SSR issues. Not using typescript
3 Replies
@Pharaoh Hound Hello everyone,
I'm working on a Next.js application and have come across a persistent ReferenceError: document is not defined issue. Here's what's happening:
The error occurs when running my Next.js app, pointing to an issue with server-side code trying to access document, which should only be available on the client-side.
This error seems to come up when I'm trying to import and use Bootstrap in my application. Context:
The error persists despite the usual client-side checks and ensuring that Bootstrap is not being imported or used directly on the server side.
I've tried using useEffect and conditional typeof window !== 'undefined' checks to safeguard against SSR issues. Not using typescript
hi, try create a component and render the component from bootstrap. Then import your component using
dynamic with ssr disable like thisconst ComponentC = dynamic(() => import('../components/C'), { ssr: false })Pharaoh HoundOP
https://stackoverflow.com/questions/69527455/could-not-find-a-declaration-file-for-module-bootstrap-dist-js-bootstrap My problem is similar to this post but answers are not working in my case.
Whiteleg shrimp
This sounds like something that is a problem with bootstrap in general. @Ray 's approach is similar but more elegant than this one: https://blog.logrocket.com/handling-bootstrap-integration-next-js/#why-nextjs-ssr-problem-bootstrap