Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI.

fkhadra / react-toastify

React notification made easy 🚀 !

MIT License

12.33k stars 676 forks source link

Closed oskarhertzman closed 5 months ago

oskarhertzman commented 5 months ago

Do you want to request a feature or report a bug?

Report a bug with react-toastify@v10.0.1

What is the current behavior?

Getting a next.js server warning log:

What is the expected behavior?

Not getting a server warning log about useLayoutEffect usage on the server.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Chrome: 120.0.6099.216 React: 18.2.0 Next.js: 14.0.4

khsily commented 5 months ago

I made a pr for this on #1044. Please Check it out!

You can do dynamic importing just for now to bypass this issue.

const ToastContainer = dynamic(() => import('react-toastify').then((mod) => mod.ToastContainer), {
    ssr: false,
});

fkhadra commented 5 months ago

Deploying the fix as soon as the build is green

fkhadra commented 5 months ago