microlinkhq / microlinkhq/react-json-view

ReferenceError: document is not defined when importing the package in Next.js (SSR / RSC)

Open
#149 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
417
Forks
68
Avg merge
4h 22m
Merged PRs (30d)
8

Description

Environment
  • Package: @microlink/react-json-view (e.g. ^1.31.7)
  • Framework: Next.js (e.g. 16.x with App Router / Turbopack)
  • Node.js: v23.11.1
Description

Importing @microlink/react-json-view with a static top-level import causes the module to be evaluated in a Node.js context during the Next.js build / server render. The package (or one of its dependencies) accesses document at module evaluation time, not only inside a browser-only code path. In Node, document is undefined, which throws:

ReferenceError: document is not defined
Steps to reproduce
  1. Create a Next.js App Router project.

  2. Add a Client Component file with "use client" and a top-level:

    import ReactJsonView from "@microlink/react-json-view";
    
  3. Ensure this module is part of the server bundle graph (e.g. re-exported from a barrel that is imported by a layout or server component tree).

  4. Run next dev or next build and load a route that pulls in that graph.

Expected behavior

The package should be safe to import in SSR environments: no browser globals (document, window, etc.) should run at module top level. Browser-only code should run lazily (e.g. inside useEffect, or behind a conditional typeof document !== "undefined"), or the package should document that it must only be loaded via dynamic import with ssr: false / similar.

Actual behavior

ReferenceError: document is not defined during module evaluation.

Sample stack trace
ReferenceError: document is not defined
  at module evaluation (.../JsonViewer.tsx:5:1)
  ... (import chain through barrel exports / layout)
Workaround used

Lazy-load the component with next/dynamic and { ssr: false }, and isolate the static import in a separate module that is only loaded on the client.

Additional context

This matters for Next.js and any SSR setup where the dependency graph is analyzed on the server—even for files marked "use client", the bundler may still evaluate or include the module in ways that trigger top-level browser APIs.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with JsonViewer.tsx, named in the stack trace, and trace the import chain through the barrel exports. Reproduce the issue in a Next.js App Router project with next dev or next build, then identify which browser API is evaluated in the server bundle. Done means importing the package no longer raises ReferenceError during SSR while browser rendering still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.