fix(mcp): resolve React duplicate module error with dedupe config

Fixes a React runtime error where `useRef` was null due to multiple React instances being bundled. ## Changes Made - **Vite configuration**: Added `resolve.dedupe` for `react` and `react-dom` in `examples/mcp/vite.config.ts` to ensure only one instance of React is used during bundling - **React version constraints**: Changed from exact versions (`19.2.3`) to flexible ranges (`^19.0.0`) in `examples/mcp/package.json` to improve compatibility - **Build entry point**: Added new `build-app-html-entry.ts` file and updated `tsup.config.ts` to include it as a build target - **Package exports**: Added `./build-app-html` export path in `packages/mcp/package.json` - **Minor fixes**: Updated Next.js type reference path in stripe-app example The root cause was React being duplicated in the bundle, causing hooks like `useRef` to fail when components tried to access React's internal state from the wrong instance. The `dedupe` configuration ensures Vite resolves all React imports to the same module instance. Fixes #190
2026-10-03 12:28:17 +08:00 · 2026-03-09 19:53:57 -05:00
7 changed files with 32 additions and 52 deletions
@@ -16,8 +16,8 @@
    "@json-render/shadcn": "workspace:*",
    "@modelcontextprotocol/ext-apps": "^1.2.0",
    "@modelcontextprotocol/sdk": "^1.27.1",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
    "zod": "^4.3.6"
  },
  "devDependencies": {
@@ -5,6 +5,9 @@ import tailwindcss from "@tailwindcss/vite";

 export default defineConfig({
  plugins: [react(), tailwindcss(), viteSingleFile()],
+  resolve: {
+    dedupe: ["react", "react-dom"],
+  },
  build: {
    outDir: "dist",
    emptyOutDir: false,
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -42,6 +42,11 @@
      "types": "./dist/app.d.ts",
      "import": "./dist/app.mjs",
      "require": "./dist/app.js"
+    },
+    "./build-app-html": {
+      "types": "./dist/build-app-html-entry.d.ts",
+      "import": "./dist/build-app-html-entry.mjs",
+      "require": "./dist/build-app-html-entry.js"
    }
  },
  "files": [
@@ -0,0 +1,11 @@
+/**
+ * Server-side utility for building self-contained MCP App HTML.
+ *
+ * This entry point does NOT depend on React and is safe to import
+ * in Node.js / server environments.
+ *
+ * @packageDocumentation
+ */
+
+export { buildAppHtml } from "./build-app-html.js";
+export type { BuildAppHtmlOptions } from "./build-app-html.js";
@@ -1,7 +1,7 @@
 import { defineConfig } from "tsup";

 export default defineConfig({
-  entry: ["src/index.ts", "src/app.ts"],
+  entry: ["src/index.ts", "src/app.ts", "src/build-app-html-entry.ts"],
  format: ["cjs", "esm"],
  dts: true,
  sourcemap: true,
@@ -536,16 +536,16 @@ importers:
        version: link:../../packages/shadcn
      '@modelcontextprotocol/ext-apps':
        specifier: ^1.2.0
-        version: 1.2.0(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(zod@4.3.6)
+        version: 1.2.0(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
      '@modelcontextprotocol/sdk':
        specifier: ^1.27.1
        version: 1.27.1(zod@4.3.6)
      react:
-        specifier: 19.2.3
-        version: 19.2.3
+        specifier: ^19.0.0
+        version: 19.2.4
      react-dom:
-        specifier: 19.2.3
-        version: 19.2.3(react@19.2.3)
+        specifier: ^19.0.0
+        version: 19.2.4(react@19.2.4)
      zod:
        specifier: ^4.3.6
        version: 4.3.6
@@ -600,7 +600,7 @@ importers:
        version: 0.563.0(react@19.2.4)
      next:
        specifier: 16.1.6
-        version: 16.1.6(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      radix-ui:
        specifier: ^1.4.3
        version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -947,7 +947,7 @@ importers:
        version: 6.0.103(zod@4.3.6)
      next:
        specifier: ^16.1.6
-        version: 16.1.6(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      react:
        specifier: ^19.1.0
        version: 19.2.4
@@ -15019,14 +15019,6 @@ snapshots:

  '@mixmark-io/domino@2.2.0': {}

-  '@modelcontextprotocol/ext-apps@1.2.0(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(zod@4.3.6)':
-    dependencies:
-      '@modelcontextprotocol/sdk': 1.27.1(zod@4.3.6)
-      zod: 4.3.6
-    optionalDependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-
  '@modelcontextprotocol/ext-apps@1.2.0(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)':
    dependencies:
      '@modelcontextprotocol/sdk': 1.27.1(zod@4.3.6)
@@ -17941,7 +17933,7 @@ snapshots:
  '@stripe/ui-extension-tools@0.0.1(@babel/core@7.29.0)(babel-jest@27.5.1(@babel/core@7.29.0))':
    dependencies:
      '@types/jest': 28.1.8
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@2.6.1))(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)
      '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@4.9.5)
      eslint: 8.57.1
      eslint-plugin-react: 7.37.5(eslint@8.57.1)
@@ -18467,7 +18459,7 @@ snapshots:
      '@types/node': 22.19.6
    optional: true

-  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@2.6.1))(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)':
+  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)':
    dependencies:
      '@eslint-community/regexpp': 4.12.2
      '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@4.9.5)
@@ -23804,32 +23796,6 @@ snapshots:
      - '@babel/core'
      - babel-plugin-macros

-  next@16.1.6(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
-    dependencies:
-      '@next/env': 16.1.6
-      '@swc/helpers': 0.5.15
-      baseline-browser-mapping: 2.9.14
-      caniuse-lite: 1.0.30001764
-      postcss: 8.4.31
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      styled-jsx: 5.1.6(react@19.2.4)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 16.1.6
-      '@next/swc-darwin-x64': 16.1.6
-      '@next/swc-linux-arm64-gnu': 16.1.6
-      '@next/swc-linux-arm64-musl': 16.1.6
-      '@next/swc-linux-x64-gnu': 16.1.6
-      '@next/swc-linux-x64-musl': 16.1.6
-      '@next/swc-win32-arm64-msvc': 16.1.6
-      '@next/swc-win32-x64-msvc': 16.1.6
-      '@opentelemetry/api': 1.9.0
-      babel-plugin-react-compiler: 1.0.0
-      sharp: 0.34.5
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-
  node-abi@3.87.0:
    dependencies:
      semver: 7.7.3
@@ -25904,11 +25870,6 @@ snapshots:
      client-only: 0.0.1
      react: 19.2.3

-  styled-jsx@5.1.6(react@19.2.4):
-    dependencies:
-      client-only: 0.0.1
-      react: 19.2.4
-
  sucrase@3.35.1:
    dependencies:
      '@jridgewell/gen-mapping': 0.3.13