question-mark
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.

SSR: Specifying `multiple` prop results in hydrate error

See original GitHub issue

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

  • I found a bug
  • I want to propose a feature

What is the current behavior? While using server-side rendering, if the multiple prop is specified then an error is produced when calling hydrate():

Warning: Prop `multiple` did not match. Server: "false" Client: "true"

Upon investigation, this is related to the fix implemented in https://github.com/react-dropzone/react-dropzone/issues/775 which causes the component’s multiple prop at https://github.com/react-dropzone/react-dropzone/blob/8abd6ec7a780fbcfcf5b0ffd7642935998029005/src/index.js#L712 to always evaluate to false on the server (since there is no document on the server).

If the current behavior is a bug, please provide the steps to reproduce.

  1. Render the component via nextjs or some other custom SSR solution.
  2. Specify the multiple prop when using the component.
  3. Open console and load the page. On hydration it should give the error specified above.

What is the expected behavior? There should be no difference in the component’s props upon hydration.

If this is a feature request, what is motivation or use case for changing the behavior? N/A

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

Versions used:

  • react-dropzone v10.1.0
  • React v16.8.6
  • nodejs v10.15.1

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
okonetcommented, Apr 6, 2019

🎉 This issue has been resolved in version 10.1.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

1reaction
rolandjitsucommented, Apr 6, 2019

I guess we could do that. Looking at accept, there’s also browsers that don’t support it, yet we haven’t received any reports of it being an issue.

I wonder why was the check introduced, I will try to check the commit history and find out if it was an issue before removing it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-hydration-error - Next.js
The first render is called Hydration which is a feature of React. This can cause the React tree to be out of sync...
Read more >
Debugging and fixing hydration issues - somewhat abstract
Console output showing warning that says "Prop 'src' did not match" along ... This is one of many hydration errors that can show...
Read more >
dom-expressions/community - Gitter
Suspense component will receive props name ssr to determine to next DOM node ... if ssr props are not set, Suspense do sync...
Read more >
React 18: Hydration failed because the initial UI does not ...
I have been experiencing the same problem lately with NextJS and i am not sure if my observations are applicable to other libraries....
Read more >
SSR | TanStack Query Docs
SSR. React Query supports two ways of prefetching data on the server and passing that ... with <Hydrate> and pass it the dehydratedState...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found