ReferenceError: document is not defined

[jacksonkr]

  ● Test suite failed to run

    ReferenceError: document is not defined

      at node_modules/react-json-view/dist/main.js:1:152197
      at node_modules/react-json-view/dist/main.js:1:152144
      at e.exports (node_modules/react-json-view/dist/main.js:1:152646)        
      at Object.<anonymous> (node_modules/react-json-view/dist/main.js:1:147744)
      at t (node_modules/react-json-view/dist/main.js:1:496)
      at Object.<anonymous> (node_modules/react-json-view/dist/main.js:1:55353)      at t (node_modules/react-json-view/dist/main.js:1:496)
      at Object.<anonymous> (node_modules/react-json-view/dist/main.js:1:54127)      at t (node_modules/react-json-view/dist/main.js:1:496)
      at node_modules/react-json-view/dist/main.js:1:853

I spent hours today chasing down an issue with our jest-puppeteer tests and the culprit was this plugin. It seems as though babel can't figure out what document is. I'm not sure where this is in your source or I'd do a PR. If document is referring to the window's document as I suspect then you may be able to leverage window.document to save other developers from this issue.

[iamwjun]

For users using nextjs, you can use next/dynamic for this case
const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false });
<DynamicReactJson src={yourData}
return your json view with data like
hoangdoan267

[jeemok]

any solution for React SSR case?

[jacksonkr]

@jeemok I can't remember how this was resolved exactly but somehow we were able to make document more widely available. I want to say it was with the use something like type: common-js - I'm pretty sure that wasn't it but I remember that being something I was toying with around this time.

[PhilAndrew]

I got this error and I don't know why..... so I'm going to give up on this one sadly.

[SergeBaglyuk]

OK, here is a solution for React SSR issue:
add loadable from here,
then use ReactJson view as dynamically loadable component:

...
import loadable from '@loadable/component';
const ReactJson = loadable(() => import('react-json-view'));

function YourStuff() {
...
  return (
    <React.Fragment>
      ...
      <ReactJson src={yourStuff} />
      ...
    </React.Fragment>) 

[xingxinglieo]

i fllow your solutin, but now issue :
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
i use remix

[xingxinglieo]

OK, here is a solution for React SSR issue: add loadable from here, then use ReactJson view as dynamically loadable component:

...
import loadable from '@loadable/component';
const ReactJson = loadable(() => import('react-json-view'));

function YourStuff() {
...
  return (
    <React.Fragment>
      ...
      <ReactJson src={yourStuff} />
      ...
    </React.Fragment>) 

i resolve it by meself, the issuse because of the differenet of bundle tools how to handle of dynamic import esm,thanks for your solution
if you use remix, try
const ReactJson = loadable( () => new Promise((r, c) => import('react-json-view').then(result => r(result.default), c) ) )

[inojeon]

Another solution is to use lazy react function.

import { lazy } from "react"
...
const LazyReactJson = lazy(() => import("react-json-view"))
...

return (
    <div>
     ...
      <LazyReactJson  src={data} />
     ...
   </div>
)

[ayesilbag]

if you want a json view in a modal..
you can resolve the "ReferenceError: document is not defined" error with the following method

import dynamic from "next/dynamic";

interface Props {
    showModal: boolean;
    data: string;
}
const CustomJsonViewer = ({ data, showModal }: Props) => {
const [ReactJson, setReactJson] = useState<React.ComponentType<ReactJsonViewProps>>();

    useEffect(() => {
        if (typeof window !== "undefined") {
            setReactJson(dynamic(import("react-json-view"), { ssr: false }));
        }
    }, [showModal])
	
return (
        <Modal
	...
            {ReactJson && (
                <ReactJson
                    src={data && JSON.parse(data)}
                   ...
                />
            )}
	 ...	
        </Modal>
    );
}

[Anchel123]

@iamwjun i try this and now it doesn't show on the screen the jsonView
help please 🙏

[rharshit82]

If someone faces this issue with Nextjs App router "use client",
make sure to make the import inside dynamic an arrow function instead of directly using import. Would solve the import not happening.

const DynamicReactJson = dynamic(() => import('react-json-view'), { ssr: false });
<DynamicReactJson src={yourData}

[JakeXu]

For users using nextjs, you can use next/dynamic for this case const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false }); <DynamicReactJson src={yourData} return your json view with data like hoangdoan267

Should use const DynamicReactJson = dynamic(()=> import('react-json-view'), { ssr: false });, it works for me.