During SSR build, I got an "ReferenceError: self is not defined"

[jy95]

Hello,

When improving my playground component, I encountered an issue.
When I do a "npm start", everything run smoothly but "npm build" throws me what you see in screenshot.

But obviously, nothing I tried to escape SSR issue work ...

import React from "react"
import Layout from "@theme/Layout"
import BrowserOnly from "@docusaurus/BrowserOnly"
import ErrorBoundary from "@docusaurus/ErrorBoundary"

function PlaygroundInner(): JSX.Element {
  const PlaygroundInnerComponent = require("@site/src/pages/components/PlaygroundInner").default;
  return <PlaygroundInnerComponent />
}

function PlaygroundComponent(): JSX.Element {
  // No SSR for the live preview
  // See https://github.com/facebook/docusaurus/issues/5747
  return (
    <BrowserOnly fallback={<div>Loading...</div>}>
      {() => (
        <>
          <ErrorBoundary
            fallback={({ error, tryAgain }) => (
              <div>
                <p>
                  Playground component crashed because of error: {error.message}
                  .
                </p>
                <button onClick={tryAgain}>Try Again!</button>
              </div>
            )}
          >
            <PlaygroundInner />
          </ErrorBoundary>
        </>
      )}
    </BrowserOnly>
  )
}

export default function Playground(): JSX.Element {
  return (
    <Layout
      title={`Playground`}
      description="Playground of docusaurus-json-schema-plugin"
    >
      <PlaygroundComponent />
    </Layout>
  )
}

Any ideas ?

Thanks in advance

Source : jy95/docusaurus-json-schema-plugin#35