Server-Side-Rendering React Issues

[amangalampalli]

Hello,
I was working on a project where I needed to use Docusaurus. For this project, I had to use react-p5 and react-mic. It seems that they are both built for static-site only and throw this error:

Docusaurus Node/SSR could not render static page with path=/testing because of error: window is not defined
Docusaurus Node/SSR could not render static page with path=/docs/calibration/calibrationModule because of error: window is not defined
Docusaurus Node/SSR could not render static page with path=/docs/multiconglomerate/excercise because of error: performance is not defined

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

[slorber]

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

[amangalampalli]

So I was able to find that you had written this: mac-s-g/react-json-view#121 (comment) sometime back. However, where would these methods go in order to properly avoid all the errors? Would they belong in the webpack.config.js or some other file?

[slorber]

You should wrap all the problematic React components before using them in pages or MDX.

https://github.com/Alpheron/GazeDetect-Website/blob/master/src/pages/testing.jsx

Your "testing" page imports window, this is not something that can work. You can read "window" but only inside the component, because what's inside will only be executed on the client, and "window" does not exist on the server.

https://github.com/Alpheron/GazeDetect-Website/blob/master/docs/calibration/module/video.js

I guess a webcam component does not make sense on the server so it may be the reason for this failure.

You should also wrap this component in and use require("react-webcam") inside BrowserOnly callback.

import Webcam from "react-webcam"; can't work if the library tries to read window/document on its initialization code.

I can't tell for sure which lib is the problematic one. It might also be tensorflow or react-p5.

Remove MDX comps from your calibrationModule doc and build again until it works, so that you find out which library does not support server-side rendering due to reading window/document/browser apis.

[amangalampalli]

So it turns out the original libraries causing the issue is react-p5, react-webcam, and react-mic. I see that this the solution you had mentioned in another comment thread has been written in TypeScript. Is there a Javascript version of the same code? Well, mainly this method:

function BrowserOnly({
  children,
  fallback,
}: {
  children?: () => JSX.Element;
  fallback?: JSX.Element;
}): JSX.Element | null {
  if (!ExecutionEnvironment.canUseDOM || children == null) {
    return fallback || null;
  }

  return <>{children()}</>;
}

The other BrowserOnly method seems to be working fine. Please let me know when possible.

EDIT:

I have recently taken some code from the docusaurus source implementation for react-json and have tried to incorporate it into my website, but unfortunately with no such luck.

The new testing.jsx file: https://github.com/Alpheron/GazeDetect-Website/blob/master/src/pages/testing.jsx
The Utility file BrowserOnly: https://github.com/Alpheron/GazeDetect-Website/blob/master/src/utilities/BrowserOnly.tsx

[slorber]

Is there a Javascript version of the same code

Just remove the TS types after : and it's the JS.

You don't need to copy BrowserOnly, this utility is already provided in Docusaurus.

Your testing page still does not work because your own code tries to use window on the server in the constructor.

You'd rather try something like:

class TestingUnsafe extends React.Component {
  // ...
}

export default class Testing extends React.Component {
  render() {
    return (
       <BrowserOnly>
         {() => <TestingUnsafe/>}
       </BrowserOnly>
    )
  }
}

This prevents TestingUnsafe from being run on the server.

[amangalampalli]

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?

[slorber]

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

[amangalampalli]

Your new solution does work with the Server-Side-Rendering window not found. However, any module that ends up using that new solution no longer properly renders in the web-browser when running yarn start. When doing some debugging, it seems as if the module just does not run at all. I do not think it is an issue with the module as they were running just fine before surrounding them with BrowserOnly. While this is applicable to all the modules that needed to be surrounded with BrowserOnly, testing.jsx is the clearest example of such issue. There are no errors when building but it just does not render. Is there something wrong with my approach?

https://github.com/Alpheron/GazeDetect-Website/blob/8f98259b80833cc465c30358ef3c9d98cbe3f29a/src/pages/testing.jsx

[slorber]

It is your code that explicitly want to render nothing.
You are not returning the component <TestingUnsafe />; here: https://github.com/Alpheron/GazeDetect-Website/blob/8f98259b80833cc465c30358ef3c9d98cbe3f29a/src/pages/testing.jsx#L116

Please join our Discord chat, the community will be able to help you easily for such issues

[amangalampalli]

Sorry I had not mentioned that earlier, I had tried some setup like this:

export default class Testing extends React.Component {
  render() {
    return (
      <BrowserOnly>
        {() => {
          console.log("entered");
          require("react-mic");
          return (
            <TestingUnsafe />
          ) ;
        }}
      </BrowserOnly>
    );
  }

This ended up throwing an exception it would say that <TestingUnsafe/> depended on react-mic and that react-mic was undefined. When I did something like this:

return (
            require("react-mic"),
            <TestingUnsafe />
          ) ;

It still resulted in the same error. How exactly is that small section supposed to be written in a way that the module can still see the library being loaded into it?

[slorber]

All this is not really related to docusaurus, this is basic React/JS/JSX knowledge, that's why I tell you to join Discord because many frontend devs would be able to help you figure this out easily.

require("react-mic") is not enough by itself, it requires the lib and initializes it, but this lib is not available for use in your code.

You really have do do something like:

const MyReactMic = require("react-mic").default;

<MyReactMic>

The name MyReactMic does not matter, we don't use global namespaces in JS anymore, and ReactMic is not anymore some magical name that you can use anywhere for free in your code: you have to choose the explicit name of components you import and plan to use.