fix: use default JSON import for react-grab/package.json version (webpack 5 / Next.js 15)

[hoklims]

Problem

react-scan currently fails to bundle in any project using Webpack 5 with strict ESM JSON modules — most visibly Next.js 15.5 + React 19. The dev server returns 500s with:

⨯ ../../node_modules/react-scan/dist/index.mjs
Can't import the named export 'version' (imported as 'REACT_GRAB_VERSION') from default-exporting module (only default export is available)

Import trace for requested module:
  ../../node_modules/react-scan/dist/index.mjs
  ./src/components/ReactScanInit.tsx

This bites any consumer that:

• mounts react-scan from a Server-Component-side layout via dynamic import("react-scan")
• runs Next.js 15.5+ (webpack 5, default config)
• uses React 19 (whose package.json exports field is stricter)

It does not fire on Vite/esbuild today, but Webpack's stricter handling is the correct interpretation of the spec — named imports from JSON modules aren't standard, so other bundlers may follow suit.

Root cause

packages/scan/src/web/utils/check-react-grab-version.ts does:

import { version as REACT_GRAB_VERSION } from "react-grab/package.json";

JSON modules expose { default: <object> } under the ESM module spec — there's no named version export. Webpack 5 enforces this strictly; the import becomes a hard error in dev and a silent undefined after tree-shake in some prod builds.

Fix

Default import + property access, which is the universal shape across bundlers:

import REACT_GRAB_PKG from "react-grab/package.json";
const REACT_GRAB_VERSION = REACT_GRAB_PKG.version;

Compatible with:

• Webpack 5 (Next.js 15, CRA, Storybook with default config)
• Rollup
• esbuild
• Vite
• swc / Bun
• Rolldown

No behavioural change — REACT_GRAB_VERSION is the same string at runtime.

Verification

Reproduction (Next.js 15.5.18 + React 19 + Webpack):

// app/components/ReactScanInit.tsx
"use client";
import { useEffect } from "react";
export function ReactScanInit() {
  useEffect(() => {
    void import("react-scan").then(({ scan }) => scan({ enabled: true }));
  }, []);
  return null;
}

Before this patch: page returns 500 + ModuleDependencyError in the dev console.
After this patch (verified locally by patching node_modules/react-scan/dist/{index,core/all-environments}.mjs with the same fix): page renders, react-scan loads, the dev toolbar appears.

Notes

• The fix lives in source (packages/scan/src/web/utils/check-react-grab-version.ts). The compiled output bundles need a rebuild to propagate (running the repo's build pipeline should pick it up cleanly — no other file changes needed).
• Same pattern is currently safe across the rest of the codebase; I didn't find another import { … } from "<pkg>/package.json" case.
• Filed because the failure mode is silent for ESM users and a 500 for Webpack users, both of which feel like real footguns.

Happy to iterate if you'd rather encode this differently (e.g. read the version from a version.ts constant generated at build time).

---

Note

Low Risk
Low risk: a tiny import-shape change to avoid Webpack 5/strict ESM JSON module bundling errors, with no behavioral change beyond ensuring REACT_GRAB_VERSION is defined.

Overview
Fixes Webpack 5/Next.js strict ESM JSON compatibility by switching react-grab/package.json version access from a named import to a default JSON import + .version (check-react-grab-version.ts).

This prevents bundling/runtime failures where JSON modules only expose a default export, while keeping the existing version-check behavior unchanged.

^{Reviewed by Cursor Bugbot for commit fba10c2. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

@hoklims is attempting to deploy a commit to the Million Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

Fixes bundling failures in strict ESM JSON-module environments (notably Webpack 5 / Next.js 15) by changing how react-grab/package.json’s version is imported, avoiding unsupported named JSON exports.

Changes:

• Replace named JSON import ({ version }) with a default JSON import.
• Read version via property access and keep the rest of the version-check logic unchanged.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.