Modal breaks SSR

[kolpav]

Hello,

Using Modal with SSR specifically using next.js breaks SSR for some reason. Any ideas why that might be? I am not sure if it is specific to semantic or next.js

Steps

git clone https://github.com/kolpav/semantic-ui-ssr-bug
cd semantic-ui-ssr-bug
yarn
yarn dev

Expected Result

Should not break SSR

Actual Result

Breaks SSR

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) v data-reactid="2"><span data-reactid="3
 (server) v data-reactid="2"><!-- react-empty: 3 -

Version

0.67.2

Testcase

https://github.com/kolpav/semantic-ui-ssr-bug

[levithomason]

Thanks for the repro case, we'll check on this as soon as we can. If you are debugging, this is probably related to the Portal. The Portal renders a new subtree into the document body in order to achieve the necessary markup for Modals.

I don't know next.js, but you might google around for other users' issues with the portal pattern for now.

[kolpav]

For now it is possible to avoid breaking SSR by using react-no-ssr like this

[johndevor]

+1

[levithomason]

Hey folks, thanks for showing support. It would be most helpful if you could use the react button opposed to posting a comment. Comments trigger emails and notifications for us.

The reactions are also a little more clear as to what you are giving a thumbs up to.

[vilvadot]

Any update on this? Experiencing exactly the same issue on version 0.75.1

[levithomason]

Please post a new issue against the latest release 0.77.0.