When using "window.addEventListener" the build fails for server side

🐛 Bug Report

When building the doc website, the build is failing for the server if there is a use for the window since it doesn’t exist in the server.

To Reproduce

(Write your steps here:)

1. Create a custom page
2. Add an event using window.addEventListener
3. Run npm run build or yarn build

Expected behaviour

The build is completed with success.

Actual Behavior

The build fails for the server (but it is completed for the client and it works fine with npm run start

Reproducible Demo

Code used for the custom page

import React, { useRef } from "react";
import Layout from "@theme/Layout";
import useBaseUrl from "@docusaurus/useBaseUrl";

const Page = props => {
  const { location, history } = props;

  const iframeSrc = useBaseUrl("storybook-frame") + location.search;
  const title = useRef("Storybook");

  window.addEventListener("message", onMessage, false);
  function onMessage(message) {
    if (message.data.source === "CUSTOM_IFRAME") {
      title.current = message.data.kind
        .replace(/-/gi, " ")
        .replace("  ", " - ");
      history.pushState("", title.current, "?path=/story/" + message.data.kind);
    }
  }

  return (
    <Layout title={title.current}>
      <main id="storybook-frame" style={{ width: "100%", height: "calc(100vh - 100px)", position: "relative" }}>
        <iframe 
          src={iframeSrc}
          title="Storybook"
          style={{ width: "100%", height: "100%", border: 0, position: "absolute", overflow: "hidden" }}
          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
        />
      </main>
    </Layout>
  );
};

export default Page;

[maksnester]

There’s no window on the server, naturally it will fail.

It’s also an issue for me. I tried to create some live demo by using jsx components. And my component has an import of some component that has an import of browser-only code.

// some.mdx
import MyFancyDemo from './MyFancyDemo'

<MyFancyDemo />

// MyFancyDemo.jsx
import problem from 'browser-only-library'

How to overcome that? I’m fine with having JSX components not being server-rendered.

UPD: found answers here

https://github.com/facebook/docusaurus/issues/2494 https://v2.docusaurus.io/docs/docusaurus-core/#browseronly

[prma85]

You need to use both useEffect() AND the window check within it.

Oh yeah, I mean, I did it, but I got an error from server build, but since it is minified I am assuming that the error came from the same file. BTW, is there a way to build without minification? Like docusaurus build --development?