Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal 3.7.x break in Next.js

See original GitHub issue

Description

Since Next.js is SSR, it will not recognize the document

Need to modify this line 34 on Modal.js

var MODAL_CONTAINER = document.body;

into

var MODAL_CONTAINER = (typeof window !== 'undefined') ? document.body : null;

I know, the modal might not work in Next.js anyway, but I still can use the rest of components in react-materialize without breaking.

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:13 (6 by maintainers)

Top GitHub Comments

2reactions

sunaryohadicommented, Apr 22, 2020

To avoid broken on the first run (while loading on NextJS) …

I change Modal.js at line 197 (compiled version line 225)

  root: document.body,

into

  root: typeof window !== 'undefined' ? document.body : null,

and it’s working ok. I think It’s also should be ok for regular react anyway.

I still can use the Modal, using Non-SSR technique when I use it on NextJS.

as reference on NextJS: https://github.com/zeit/next.js/issues/7400

0reactions

alextrasterocommented, Apr 23, 2020

ouch, fixed in next patch version

Top Results From Across the Web

Modal component with Next.js - Dev Recipes

In this tutorial, I will show you how to create a basic Modal component from scratch in a Next.js application.

Release Notes - The PHP Framework For Web Artisans

Minor and patch releases should never contain breaking changes. When referencing the Laravel framework or its components from your application or package, you ......

Components - Bootstrap

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Modal component is not showing up in Next.JS - Stack Overflow

I'm using Tailwind CSS in my project and the table page is part of bigger page that contains a sidebar. You can find...

Changelog - Cypress Documentation

Component Testing is now generally available for projects using React, Next.js, Angular, and Vue! Component tests allow you to see and test your...