Revert removal of browsers only

Signed-off-by: Josh-Cena <[email protected]>

packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx

@@ -6,15 +6,30 @@
  */
 
 import React from 'react';
-import ReactJson from 'react-json-view';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import type {Props} from '@theme/DebugJsonView';
+import type {ReactJsonViewProps} from 'react-json-view';
 
 // avoids "react-json-view" to display  "root"
 const RootName = false;
 
+// Seems ReactJson does not work with SSR
+// https://github.com/mac-s-g/react-json-view/issues/121
+const BrowserOnlyReactJson = (props: ReactJsonViewProps) => {
+  return (
+    <BrowserOnly>
+      {() => {
+        // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+        const ReactJson = require('react-json-view').default;
+        return <ReactJson {...props} />;
+      }}
+    </BrowserOnly>
+  );
+};
+
 function DebugJsonView({src, collapseDepth}: Props): JSX.Element {
   return (
-    <ReactJson
+    <BrowserOnlyReactJson
       // Type defined by react-json-view
       // eslint-disable-next-line @typescript-eslint/ban-types
       src={src as object}