Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReferenceError: document is not defined

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:9
Comments:7

Top GitHub Comments

62reactions

iamwjuncommented, Mar 21, 2021

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

8reactions

xingxinglieocommented, Jan 22, 2022

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

Top Results From Across the Web

How to fix ReferenceError: Document is not defined ... - Sabe.io

The most common reason for getting the reference error while on the browser is when you try to access the document object too...

ReferenceError: document is not defined in JavaScript

The "ReferenceError: document is not defined" error occurs for multiple reasons: ... The document relates to the document object which represents a web...

ReferenceError: document is not defined (in plain JavaScript)

Explanation: The error is caused because NextJs renders the page in the server only and in the server document (document is used inside...

How To Fix ReferenceError document is not defined ... - Isotropic

If you are trying to use the document object and receiving a ReferenceError: document is not defined error then there is a good...

How to solve the document is not defined error - Flavio Copes

Here's how to fix the “referenceerror: document is not defined” error that you might have in Node.js or with a tool like Next.js....