Currently, I am building a react app with Docusaurus and I am having a problem building the app. The error message says:
[0] [ERROR] Docusaurus Node/SSR could not render static page with path /adminTools because of following error:
[0] ReferenceError: window is not defined
[0] at Object.50671 (main:136486:44)
[0] at __webpack_require__ (main:224909:42)
[0] at Object.389 (main:136493:18)
[0] at __webpack_require__ (main:224909:42)
[0] at Module.95191 (main:58341:32)
[0] at __webpack_require__ (main:224909:42)
[0] at main:12784:4156
[0] [INFO] It looks like you are using code that should run on the client-side only.
[0] To get around it, try using `<BrowserOnly>` (https://docusaurus.io/docs/docusaurus-core/#browseronly) or `ExecutionEnvironment` (https://docusaurus.io/docs/docusaurus-core/#executionenvironment).
[0] It might also require to wrap your client code in `useEffect` hook and/or import a third-party library dynamically (if any).
[0] ✔ Server: Compiled with some errors in 28.91s
[0]
[0]
[0] Error: Server-side rendering fails due to the error above.
I believe this is a problem with my adminTools components, as I use axios requests within them to update state in my componentDidMount function. I believe this is wrong, and am unsure of why and was hoping someone could help me solve this! I am not 100% with lifecycle, which is why I am asking for some sort of clarification as to what I am doing wrong.
This might also be a webpack issue, but again I am unsure.
Any help is appreciated!
Thanks.
componentWillUnmount() {
if(typeof window !== 'undefined'){
window.location.reload();
}
}
I solved it! After some looking, I stumbled upon this overflow post: React build - Reference error: Window is not Defined - How to only run on client side
This person had a similar issue, and I found that by using loadable((), I was able to fix the problem.
Check out their docs! Loadable Docs