Server-Side-Rendering React Issues #4514
Unanswered
amangalampalli
asked this question in
Q&A
Replies: 2 comments 9 replies
-
Hi, This is a common error when you are trying to use a lib that does not support server-rendering. In such case, extra care must be taken to ensure that this lib is not used/initialized on the server, by using a lazy require instead of a top-level ES module import. The same applies to any static site generator like Gatsby, Next, Docusaurus... You'll find more infos here: #3670 |
Beta Was this translation helpful? Give feedback.
5 replies
-
You still import react-mic at the top of testing.
This means the lib executes its initialization code as soon as it's
imported.
If this init code tries to access window on the server, it fails.
Use require("react-mic") inside BrowserOnly to ensure that this init code
is run later, only in the browser.
Le ven. 26 mars 2021 à 21:17, Aditya Mangalampalli ***@***.***>
a écrit :
… So I was able to follow what you had suggested above. However, that still
seems to throw an error on build, The confusing part is why the module is
even rendering in the first place despite given the clause to render in a
browser only. Another weird "side-effect" that results in this method is
when loading the website in the browser (using yarn start), the page
fails to load because apparently nothing is rendered when the browser is
present.
The testing.jsx can be found here:
https://github.com/Alpheron/GazeDetect-Website/blob/5497bd18ac1c6de27aff042bbfb93608d597c6e1/src/pages/testing.jsx
A similar structure has been implemented for all the other usages of
problematic libraries that reference window, but all of them seem to
break with the same error. Is my implementation correct or am I missing
something to avoid this window not found error.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#4514 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAFW6PU7PJ2STZVYMSIYIPDTFTTVBANCNFSM4ZYRR44A>
.
|
Beta Was this translation helpful? Give feedback.
4 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello,
I was working on a project where I needed to use Docusaurus. For this project, I had to use
react-p5
andreact-mic
. It seems that they are both built for static-site only and throw this error:For some reason these errors cause the rest of the builds and everything after that to fail as well. To clarify, the Client side builds just fine but the server-side fails to do so. A link to my repository can be found here: https://github.com/Alpheron/GazeDetect-Website
Please let me know how to proceed. I've tried about everything from this forum: https://stackoverflow.com/questions/60419263/react-build-reference-error-window-is-not-defined-how-to-only-run-on-client but nothing so far has seemed to work.
Thank you for your time.
Thanks,
Aditya
Beta Was this translation helpful? Give feedback.
All reactions