Error on next.js with project with app folder #951
Description
Do you want to request a feature or report a bug?
This issue is a bug report
What is the current behavior?
On nextjs new app folder routing that uses server components, the toast causes an error.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:
Create a nextjs project with app directory in a page.tsx with "use client" render the toast container. There is an error thrown by nextjs.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <div> in <div>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
What is the expected behavior?
Compatibility with the nextjs app folder or some option to prevent client rendering the root
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 18, MS edge, Windows, Nextjs 13 with app folder