Uploady Component causes hydration error with React version 18 ( using next js specifically )

[giordifungula]

Recommended - Check out the discussions area before opening a new issue.

Describe the bug
A clear and concise description of what the bug is.
I am migrating old code base to new and latest version of react using next js. We were using the uploady component to contain a component which handles file upload as recommended by the documentation, however, when using react version 18 ( latest version ) and just simply using the causes the following error message:
"Error: Hydration failed because the initial UI does not match what was rendered on the server." .

Note: I have checkout all the codesand box examples, just to see if there is one with react version 18, however, this is not the case. This is why I wanted to create this ticket, because idk if this component compatible with the latest version, or if it is I can better understand how to resolve otherwise.

To Reproduce
Steps to reproduce the behavior:

• Have a next js application installed ( or latest version of react )
• Call the component anywhere in your application.
• You will see an "Error: Hydration failed because the initial UI does not match what was rendered on the server."

Expected behavior

• You will see an "Error: Hydration failed because the initial UI does not match what was rendered on the server."

Versions
Note I migrated back to 0.13.4 when I was resolving because this was the previous version we had setup that was running with react 17, so in case you think downgrading to this older version is maybe causing the issue, it is not.
"@rpldy/upload-button": "0.13.4",
"@rpldy/upload-preview": "0.13.4",
"@rpldy/uploady": "0.13.4",
"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0",

Code
Please provide code sample or better yet, a link to a reproducing repository or best yet, codesandbox (fiddle, etc) where issue can be reproduced easily

[yoavniran]

Hi @giordifungula Did you see the NoPortal prop?

Its there exactly to avoid this SSR related warning. Please give it a try and let me know if you still face the issue

[giordifungula]

Thank you @yoav-cloud , I totally missed this in the docs. Apologies for asking something that was there.
@yoav-cloud quick question, when in production will this work differently ? or should I expect it to work the same? ( in other words, no errors or issues once deployed )? Thank you once again.

[yoavniran]

no problem @giordifungula :)

[AlecRust]

Out of curiosity why isn't this the default? Is there some benefit to the default portal approach?

I'm using React-Uploady in Next.js and was using my own isMounted util to work around this until I discovered this prop.