How to Fix 'ReferenceError: document is not defined' in NextJS with Webpack

Learn how to resolve the "ReferenceError: document is not defined" error in NextJS using Webpack with practical steps and examples.
---
Disclaimer/Disclosure: Some of the content was synthetically produced using various Generative AI (artificial intelligence) tools; so, there may be inaccuracies or misleading information present in the video. Please consider this before relying on the content to make any decisions or take any actions etc. If you still have any concerns, please feel free to write them in a comment. Thank you.
---
How to Fix "ReferenceError: document is not defined" in NextJS with Webpack

When developing with NextJS, a common issue you might face is the "ReferenceError: document is not defined" error. This typically happens because NextJS pre-renders pages on the server by default, and the document object is part of the client-side DOM API, not available during server-side rendering. Here’s how you can resolve this issue using Webpack.

Understanding the Issue

NextJS allows for server-side rendering (SSR) and static site generation (SSG), which means some code runs on the server where the document object, a part of the browser's Window object, doesn't exist. This leads to the "ReferenceError" when it tries to access document during SSR.

Step-by-Step Solution

Conditional Check

The simplest way to avoid this error is by conditionally checking whether document is available (i.e., you are on the client side) before accessing it.

[[See Video to Reveal this Text or Code Snippet]]

Dynamic Import with ssr: false

You can use NextJS's dynamic import with the ssr: false option to load the component only on the client-side.

[[See Video to Reveal this Text or Code Snippet]]

Webpack Configuration

Another way to handle this is by customizing your Webpack configuration. You can set up aliases or add plugins to prevent Webpack from bundling server-specific code with client-side dependencies.

[[See Video to Reveal this Text or Code Snippet]]

Using Plugins

Alternatively, you can use plugins to replace or ignore certain modules during SSR.

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By implementing these solutions, you can address the "ReferenceError: document is not defined" issue in your NextJS application. Whether you opt for conditional checks, dynamic imports, or Webpack configuration, these approaches will ensure that your code remains robust and functional across different rendering environments.