fix(packages/ui,packages/cli,packages/zpress): resolve duplicate React instances in dev server (#90)

* fix(packages/ui,packages/cli,packages/zpress): resolve duplicate React instances in dev server

pnpm's strict isolation caused consumer repos to get two React copies —
one from the consumer's peer dep and one privately installed for @zpress/cli.
Rspress's rspack resolved theme components to a different React instance,
triggering "Invalid hook call" errors and preventing the dev server from loading.

- Add react/react-dom resolve aliases in Rspress builder config
- Move react from dependencies to peerDependencies in @zpress/cli
- Align React peer version in @zpress/kit to ^19.2.5

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(packages/ui): alias react to package directory, not entry file

Rspack uses prefix matching for aliases, so aliasing react to its entry
file (index.js) would break subpath imports like react/jsx-runtime.
Resolve to the package directory instead via react/package.json dirname.

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(packages/cli): restore react as direct dependency for ink ecosystem

ink-gradient and other ink transitive deps import react directly.
With pnpm's strict isolation, moving react to peerDependencies breaks
these transitive imports on Vercel. Keep react in dependencies for
runtime resolution; the webpack alias in @zpress/ui handles browser
deduplication independently.

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(repo,packages/ui): resolve pnpm strict isolation failures for ink-gradient and react alias

- Add packageExtensions for ink-gradient to declare react as a peer dep
  (ink-gradient imports react without declaring it, breaking pnpm strict mode)
- Resolve react alias from @zpress/ui's own context (import.meta.url)
  instead of project root, which may not have react as a direct dependency

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(examples/simple): update config to current sections schema

Replace removed keys (link, from, prefix, titleFrom) with their
current equivalents (path, include).

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: zrosenbauer

.changeset/fix-duplicate-react.md

@@ -0,0 +1,9 @@
+---
+'@zpress/ui': patch
+'@zpress/cli': patch
+'@zpress/kit': patch
+---
+
+fix(packages/ui,packages/cli,packages/zpress): resolve duplicate React instances in consumer repos
+
+Added `react` and `react-dom` resolve aliases to the Rspress builder config so rspack always uses the consumer's single React copy. Moved `react` from direct dependencies to peer dependencies in `@zpress/cli` to prevent pnpm from installing a private copy. Aligned React peer version range in `@zpress/kit` to `^19.2.5`.

examples/simple/zpress.config.ts

@@ -7,22 +7,21 @@ export default defineConfig({
   sections: [
     {
       title: 'Getting Started',
-      link: '/getting-started',
-      from: 'docs/getting-started.md',
+      path: '/getting-started',
+      include: 'docs/getting-started.md',
       icon: 'pixelarticons:speed-fast',
     },
     {
       title: 'API Reference',
-      link: '/api-reference',
-      from: 'docs/api-reference.md',
+      path: '/api-reference',
+      include: 'docs/api-reference.md',
       icon: 'pixelarticons:book-open',
     },
     {
       title: 'Guides',
-      prefix: '/guides',
-      from: 'docs/guides/*.md',
+      path: '/guides',
+      include: 'docs/guides/*.md',
       icon: 'pixelarticons:article',
-      titleFrom: 'frontmatter',
       sort: 'alpha',
     },
   ],

package.json

@@ -64,6 +64,13 @@
     ],
     "overrides": {
       "@rsbuild/core": "2.0.0-beta.9"
+    },
+    "packageExtensions": {
+      "ink-gradient": {
+        "peerDependencies": {
+          "react": "*"
+        }
+      }
     }
   }
 }

packages/ui/src/config.ts

@@ -1,5 +1,6 @@
 import { execSync } from 'node:child_process'
 import { existsSync, readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
 import path from 'node:path'
 
 import type { UserConfig } from '@rspress/core'
@@ -75,6 +76,15 @@ export function createRspressConfig(options: CreateRspressConfigOptions): UserCo
   const isVscode = vscode === true
   const headScriptBody = buildHeadScriptBody({ colorMode, themeName, vscode: isVscode })
 
+  // Force a single React instance across all compiled theme components.
+  // Without this alias, Rspress's rspack may resolve react from the
+  // @zpress/ui dist/theme directory (deep inside pnpm's .pnpm store),
+  // producing a second copy that triggers "Invalid hook call" errors.
+  // Resolve from this package's context (react is a peer dep of @zpress/ui).
+  const selfRequire = createRequire(import.meta.url)
+  const reactAlias = path.dirname(selfRequire.resolve('react/package.json'))
+  const reactDomAlias = path.dirname(selfRequire.resolve('react-dom/package.json'))
+
   return {
     root: paths.contentDir,
     outDir: paths.distDir,
@@ -130,6 +140,10 @@ export function createRspressConfig(options: CreateRspressConfigOptions): UserCo
       },
       resolve: {
         alias: {
+          // Deduplicate React — pnpm isolation can cause rspack to resolve
+          // different physical copies from theme components vs Rspress internals.
+          react: reactAlias,
+          'react-dom': reactDomAlias,
           // Allow generated MDX files in .zpress/content/ to import
           // zpress React components used in landing pages.
           '@zpress/ui/theme': path.resolve(import.meta.dirname, 'theme', 'index.tsx'),

packages/zpress/package.json

@@ -53,8 +53,8 @@
   },
   "peerDependencies": {
     "@rspress/core": "catalog:",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
   },
   "engines": {
     "node": ">=24.0.0"