search

viclafouch / mui-file-input

A file input designed for the React library MUI
https://viclafouch.github.io/mui-file-input/
MIT License
77 stars 17 forks source link

SSR errors #6

Closed jaydenseric closed 1 year ago

jaydenseric commented 1 year ago

Describe the bug

This React component can't be server side rendered for 2 reasons I've discovered so far:

  1. The use of the File global that is present in browsers but not (yet) in Node.js, without guarding with typeof File:

    https://github.com/viclafouch/mui-file-input/blob/d94b1910a6ba19a7ce5c849fbc79e63be2c4a47c/src/shared/helpers/file.ts#L8

    This causes a React SSR error like this:

    ReferenceError: File is not defined

  2. The input element ID is random, and differs between the server and client renders:

    https://github.com/viclafouch/mui-file-input/blob/d94b1910a6ba19a7ce5c849fbc79e63be2c4a47c/src/components/Input/Input.tsx#L15-L17

    This causes a React post-SSR hydration error like this:

    next-dev.js?3515:20 Warning: Prop id did not match. Server: "_iosez6rge" Client: "_ah0owq8nl"

To Reproduce

Import and use the React component MuiFileInput in a Next.js page, and attempt to load that page in a web browser.

Expected behavior

The page server side renders without React rendering and post-SSR hydration errors.

Screenshots

N/A.

Desktop (please complete the following information):

N/A.

Smartphone (please complete the following information):

N/A.

Additional context

N/A.

viclafouch commented 1 year ago

Hello @jaydenseric !

Thanks for the catch !

Fixed in https://github.com/viclafouch/mui-file-input/releases/tag/v2.0.0