Closed jaydenseric closed 1 year ago
Describe the bug
This React component can't be server side rendered for 2 reasons I've discovered so far:
The use of the File global that is present in browsers but not (yet) in Node.js, without guarding with typeof File:
File
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
The input element ID is random, and differs between the server and client renders:
input
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"
id
To Reproduce
Import and use the React component MuiFileInput in a Next.js page, and attempt to load that page in a web browser.
MuiFileInput
Expected behavior
The page server side renders without React rendering and post-SSR hydration errors.
Screenshots
N/A.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Hello @jaydenseric !
Thanks for the catch !
Fixed in https://github.com/viclafouch/mui-file-input/releases/tag/v2.0.0
Describe the bug
This React component can't be server side rendered for 2 reasons I've discovered so far:
The use of the
File
global that is present in browsers but not (yet) in Node.js, without guarding withtypeof File
:https://github.com/viclafouch/mui-file-input/blob/d94b1910a6ba19a7ce5c849fbc79e63be2c4a47c/src/shared/helpers/file.ts#L8
This causes a React SSR error like this:
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:
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.