veryfront 0.0.86 → 0.0.88

package/src/src/rendering/orchestrator/module-loader/index.ts

@@ -9,8 +9,7 @@
 import { parallelMap, rendererLogger as logger } from "../../../utils/index.js";
 import type { RuntimeAdapter } from "../../../platform/adapters/base.js";
 import { getLocalAdapter } from "../../../platform/adapters/registry.js";
-import { generateHash } from "./cache.js";
-import { findLocalLibFile, findSourceFile } from "../file-resolver/index.js";
+import { findSourceFile } from "../file-resolver/index.js";
 import { transformToESM } from "../../../transforms/esm-transform.js";
 import { getProjectTmpDir } from "../../../modules/react-loader/index.js";
 import {
@@ -19,10 +18,17 @@ import {
   initializeTransformCache,
   setCachedTransformAsync,
 } from "../../../transforms/esm/transform-cache.js";
-import { hashString } from "../../../cache/hash.js";
 import { TRANSFORM_DISTRIBUTED_TTL_SEC } from "../../../utils/constants/cache.js";
 import { ensureHttpBundlesExist } from "../../../transforms/esm/http-cache.js";
-import { getHttpBundleCacheDir } from "../../../utils/cache-dir.js";
+import { getHttpBundleCacheDir, getMdxEsmCacheDir } from "../../../utils/cache-dir.js";
+import { join } from "../../../platform/compat/path/index.js";
+import { hashCodeHex } from "../../../utils/hash-utils.js";
+import { TRANSFORM_CACHE_VERSION } from "../../../transforms/esm/package-registry.js";
+import {
+  getModulePathCache,
+  lookupMdxEsmCache,
+  saveModulePathCache,
+} from "../../../transforms/mdx/esm-module-loader/cache/index.js";
 
 // Re-export utilities
 export { createEsmCache, createModuleCache, generateHash } from "./cache.js";
@@ -57,10 +63,13 @@ const TRANSFORM_CACHE_TTL_SECONDS = TRANSFORM_DISTRIBUTED_TTL_SEC;
 export interface ModuleLoaderConfig {
   projectDir: string;
   projectId?: string;
+  contentSourceId?: string;
   adapter: RuntimeAdapter;
   mode: "development" | "production";
   moduleCache: Map<string, string>;
   esmCache: Map<string, string>;
+  /** React version for transforms (from project config) */
+  reactVersion?: string;
 }
 
 function getModuleCacheKey(filePath: string, projectId?: string, projectDir?: string): string {
@@ -97,19 +106,14 @@ async function resolveAliasImport(
   imp: AliasImport,
   projectDir: string,
   adapter: RuntimeAdapter,
-  localAdapter: RuntimeAdapter,
+  _localAdapter: RuntimeAdapter,
 ): Promise<ResolvedDep> {
   const relativePath = imp.path.substring(2); // Remove @/ prefix
 
-  if (relativePath.startsWith("lib/")) {
-    const depFilePath = await findLocalLibFile(relativePath, localAdapter);
-    return { ...imp, relativePath, depFilePath, isLocalLib: true };
-  }
-
-  let depFilePath = await findSourceFile(relativePath, projectDir, adapter);
-  if (!depFilePath) {
-    depFilePath = await findSourceFile(`components/${relativePath}`, projectDir, adapter);
-  }
+  // @/ alias always resolves to project directory
+  // Try exact path first, then components/ subdirectory
+  const depFilePath = await findSourceFile(relativePath, projectDir, adapter) ??
+    await findSourceFile(`components/${relativePath}`, projectDir, adapter);
 
   return { ...imp, relativePath, depFilePath, isLocalLib: false };
 }
@@ -131,12 +135,26 @@ export async function transformModuleWithDeps(
   config: ModuleLoaderConfig,
   useLocalAdapter = false,
 ): Promise<string> {
-  const { moduleCache, projectDir, projectId, adapter, mode } = config;
+  const { moduleCache, projectDir, projectId, contentSourceId, adapter, mode } = config;
   const cacheKey = getModuleCacheKey(filePath, projectId, projectDir);
 
   const cachedPath = moduleCache.get(cacheKey);
   if (cachedPath) return cachedPath;
 
+  // Check MDX-ESM cache to share modules with SSR loader (prevents duplicate React contexts)
+  if (projectId && contentSourceId) {
+    const baseCacheDir = getMdxEsmCacheDir();
+    const projectKey = encodeURIComponent(projectId);
+    const sourceKey = encodeURIComponent(contentSourceId);
+    const mdxCacheDir = join(baseCacheDir, projectKey, sourceKey);
+
+    const mdxCachedPath = await lookupMdxEsmCache(filePath, mdxCacheDir, projectDir);
+    if (mdxCachedPath) {
+      moduleCache.set(cacheKey, mdxCachedPath);
+      return mdxCachedPath;
+    }
+  }
+
   const readAdapter = useLocalAdapter ? localAdapter : adapter;
   let fileContent = decodeFileContent(await readAdapter.fs.readFile(filePath));
 
@@ -193,7 +211,7 @@ export async function transformModuleWithDeps(
     });
   }
 
-  const contentHash = hashString(fileContent);
+  const contentHash = hashCodeHex(fileContent);
   const effectiveProjectId = projectId ?? projectDir;
   const scopedPath = `${effectiveProjectId}:${filePath}`;
   const transformCacheKey = generateTransformCacheKey(scopedPath, contentHash, true); // ssr=true
@@ -210,6 +228,7 @@ export async function transformModuleWithDeps(
         projectId: effectiveProjectId,
         dev: mode === "development",
         ssr: true,
+        reactVersion: config.reactVersion,
       });
     },
     TRANSFORM_CACHE_TTL_SECONDS,
@@ -231,6 +250,7 @@ export async function transformModuleWithDeps(
         projectId: effectiveProjectId,
         dev: mode === "development",
         ssr: true,
+        reactVersion: config.reactVersion,
       });
       setCachedTransformAsync(
         transformCacheKey,
@@ -246,10 +266,19 @@ export async function transformModuleWithDeps(
     }
   }
 
-  const hash = await generateHash(filePath);
-  const tempFilePath = `${tmpDir}/mod-${hash}.js`;
+  // Use TRANSFORMED hash for filename (matches SSR loader behavior)
+  const transformedHash = hashCodeHex(transformedCode).slice(0, 8);
+
+  const relativePath = filePath.startsWith(projectDir)
+    ? filePath.slice(projectDir.length).replace(/^\/+/, "")
+    : filePath.replace(/^\/+/, "");
 
-  await ensureDir(localAdapter, tmpDir);
+  const jsPath = relativePath.replace(/\.(tsx?|jsx|mdx)$/, `.${transformedHash}.js`);
+  const tempFilePath = join(tmpDir, jsPath);
+
+  // Ensure directory exists (might be nested like lib/ or components/)
+  const tempDir = tempFilePath.substring(0, tempFilePath.lastIndexOf("/"));
+  await ensureDir(localAdapter, tempDir);
 
   try {
     await localAdapter.fs.writeFile(tempFilePath, transformedCode);
@@ -262,10 +291,52 @@ export async function transformModuleWithDeps(
     throw error;
   }
 
+  // Register in MDX-ESM cache index so other loaders can find this module
+  if (contentSourceId) {
+    const normalizedPath = `_vf_modules/${relativePath.replace(/\.(tsx?|jsx|mdx)$/, ".js")}`;
+    const mdxCacheKey = `v${TRANSFORM_CACHE_VERSION}:${normalizedPath}`;
+    const cache = await getModulePathCache(tmpDir);
+    cache.set(mdxCacheKey, tempFilePath);
+    // Persist to disk so MDX loader can find it
+    saveModulePathCache(tmpDir).catch((err) => {
+      logger.debug("[ModuleLoader] Failed to save module cache", { error: String(err) });
+    });
+    logger.debug("[ModuleLoader] Registered module in MDX-ESM cache", {
+      file: filePath.slice(-40),
+      mdxCacheKey,
+      tempFilePath: tempFilePath.slice(-60),
+    });
+  }
+
   moduleCache.set(cacheKey, tempFilePath);
   return tempFilePath;
 }
 
+/**
+ * Get the cache directory for module transforms.
+ * Uses MDX-ESM cache when contentSourceId is available, otherwise falls back to project tmp dir.
+ * This ensures modules are shared between orchestrator and MDX loader to prevent duplicate contexts.
+ */
+async function getModuleCacheDir(config: ModuleLoaderConfig): Promise<string> {
+  const { projectId, contentSourceId, projectDir } = config;
+
+  if (projectId && contentSourceId) {
+    const baseCacheDir = getMdxEsmCacheDir();
+    const projectKey = encodeURIComponent(projectId);
+    const sourceKey = encodeURIComponent(contentSourceId);
+    const cacheDir = join(baseCacheDir, projectKey, sourceKey);
+
+    // Ensure directory exists
+    const { createFileSystem } = await import("../../../platform/compat/fs.js");
+    await createFileSystem().mkdir(cacheDir, { recursive: true });
+
+    return cacheDir;
+  }
+
+  // Fallback for cases without contentSourceId
+  return getProjectTmpDir(projectId ?? projectDir);
+}
+
 /**
  * Load a module by path, transforming it and its dependencies.
  *
@@ -274,7 +345,7 @@ export async function transformModuleWithDeps(
  * @returns The loaded module
  */
 export async function loadModule(filePath: string, config: ModuleLoaderConfig): Promise<any> {
-  const tmpDir = await getProjectTmpDir(config.projectId ?? config.projectDir);
+  const tmpDir = await getModuleCacheDir(config);
   const localAdapter = await getLocalAdapter();
 
   const tempFilePath = await transformModuleWithDeps(filePath, tmpDir, localAdapter, config);

package/src/src/rendering/orchestrator/pipeline.ts

@@ -253,6 +253,7 @@ export class RenderPipeline {
     setupSSRGlobals();
 
     this.moduleLoaderConfig.projectId = projectId;
+    this.moduleLoaderConfig.contentSourceId = options?.contentSourceId;
 
     if (this.config.mode === "development") {
       clearSSRModuleCacheForProject(projectId);
@@ -523,6 +524,7 @@ export class RenderPipeline {
 
     const projectId = options?.projectId ?? this.config.projectDir;
     this.moduleLoaderConfig.projectId = projectId;
+    this.moduleLoaderConfig.contentSourceId = options?.contentSourceId;
 
     if (this.config.mode === "development") {
       clearSSRModuleCacheForProject(projectId);

package/src/src/rendering/orchestrator/ssr-orchestrator.ts

@@ -1,6 +1,6 @@
 import * as dntShim from "../../../_dnt.shims.js";
 import { rendererLogger as logger } from "../../utils/index.js";
-import type * as React from "react";
+import type * as React from "../../../deps/esm.sh/react@19.1.1.js";
 import { createError, toError } from "../../errors/veryfront-error.js";
 import { withSpan } from "../../observability/tracing/otlp-setup.js";
 import { SpanNames } from "../../observability/tracing/span-names.js";
@@ -47,7 +47,7 @@ export class SSROrchestrator {
   ): Promise<SSRRenderingResult> {
     logger.debug("[SSROrchestrator] performSSRRendering called", {
       elementType: getElementTypeName(pageElement),
-      hasChildren: !!pageElement?.props?.children,
+      hasChildren: !!(pageElement?.props as Record<string, unknown>)?.children,
     });
 
     const validatedElement = this.config.elementValidator.ensureValidReactElement(

package/src/src/rendering/page-renderer.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "../../deps/esm.sh/react@19.1.1.js";
 import { rendererLogger as logger } from "../utils/index.js";
 import { ErrorCode, VeryfrontError } from "../errors/index.js";
 import { createDefaultMDXComponents } from "./utils/index.js";

package/src/src/rendering/page-rendering.ts

@@ -1,6 +1,6 @@
 import { rendererLogger as logger } from "../utils/index.js";
 import { ErrorCode, VeryfrontError } from "../errors/index.js";
-import type * as BundledReact from "react";
+import type * as BundledReact from "../../deps/esm.sh/react@19.1.1.js";
 import type { RuntimeAdapter } from "../platform/adapters/base.js";
 import type { EntityInfo, MdxBundle, MDXComponents, MDXModule, PageBundle } from "../types/index.js";
 import { mdxRenderer } from "../transforms/mdx/index.js";

package/src/src/rendering/rsc/server-renderer/component-detector.ts

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import type * as React from "../../../../deps/esm.sh/react@19.1.1.js";
 import type { ClientComponentMeta } from "../types.js";
 
 export type RSCComponent = React.ComponentType<any> & {

package/src/src/rendering/rsc/server-renderer/rsc-renderer.ts

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import type * as React from "../../../../deps/esm.sh/react@19.1.1.js";
 import { serverLogger as logger } from "../../../utils/index.js";
 import { withSpan } from "../../../observability/tracing/otlp-setup.js";
 import type { ClientComponentMeta, RSCPayload, RSCRendererOptions } from "../types.js";

package/src/src/rendering/rsc/server-renderer/tree-processor.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "../../../../deps/esm.sh/react@19.1.1.js";
 import { serverLogger as logger } from "../../../utils/index.js";
 import { renderToStringAdapter } from "../../../react/index.js";
 import type { ClientComponentMeta, RSCNode } from "../types.js";
@@ -64,15 +64,25 @@ export async function processElement(
   clientManifest: Map<string, ClientComponentMeta>,
   clientRefs: Map<string, string>,
 ): Promise<RSCNode> {
-  const { type, props } = element;
+  const { type } = element;
+  // Cast props for React 19 compatibility (props is unknown in R19 types)
+  const props = element.props as Record<string, unknown>;
 
   if (type === React.Fragment) {
-    const children = await renderChildren(props.children, clientManifest, clientRefs);
+    const children = await renderChildren(
+      props.children as React.ReactNode,
+      clientManifest,
+      clientRefs,
+    );
     return { type: "fragment", children };
   }
 
   if (typeof type === "string") {
-    const processedChildren = await renderChildren(props.children, clientManifest, clientRefs);
+    const processedChildren = await renderChildren(
+      props.children as React.ReactNode,
+      clientManifest,
+      clientRefs,
+    );
 
     if (processedChildren.every((child) => child.type === "html")) {
       const html = await renderToStringAdapter(element);

package/src/src/rendering/snippet-renderer.ts

@@ -247,8 +247,8 @@ export function renderSnippet(
         }
 
         const [{ renderToString }, React] = await Promise.all([
-          import("react-dom/server"),
-          import("react"),
+          import("../../deps/esm.sh/react-dom@19.1.1/server.js"),
+          import("../../deps/esm.sh/react@19.1.1.js"),
         ]);
 
         const element = React.createElement(MDXContent, {

package/src/src/rendering/ssr/component-registry.ts

@@ -5,7 +5,7 @@
 
 import { dirname, join } from "../../platform/compat/path-helper.js";
 import { DEFAULT_DASHBOARD_PORT, rendererLogger as logger } from "../../utils/index.js";
-import * as React from "react";
+import * as React from "../../../deps/esm.sh/react@19.1.1.js";
 import type { RuntimeAdapter } from "../../platform/adapters/base.js";
 import { VirtualModuleSystem } from "../virtual-module-system.js";
 import { loadComponentFromSource } from "../../modules/react-loader/component-loader.js";

package/src/src/rendering/ssr-renderer.ts

@@ -15,7 +15,7 @@ import {
 import { isCompiledBinary, rendererLogger as logger } from "../utils/index.js";
 import { withSpan } from "../observability/tracing/otlp-setup.js";
 import { SpanNames } from "../observability/tracing/span-names.js";
-import type * as React from "react";
+import type * as React from "../../deps/esm.sh/react@19.1.1.js";
 import { streamToString } from "./utils/index.js";
 import { setupSSRGlobals } from "./ssr-globals.js";
 

package/src/src/rendering/utils/react-helpers.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "../../../deps/esm.sh/react@19.1.1.js";
 import type { MDXComponents } from "../../types/index.js";
 
 export const normalizeChild = (() => {

package/src/src/server/build-app-route-renderer.ts

@@ -9,7 +9,7 @@ import { getProjectReact, renderToStringAdapter } from "../react/index.js";
 import { loadComponentFromSource } from "../modules/react-loader/index.js";
 import { CompilationError } from "../errors/index.js";
 
-type ReactComponentLike = import("react").ComponentType<{ children?: import("react").ReactNode }>;
+type ReactComponentLike = import("../../deps/esm.sh/react@19.1.1.js").ComponentType<{ children?: import("react").ReactNode }>;
 
 async function fileExists(adapter: RuntimeAdapter, filePath: string): Promise<boolean> {
   try {
@@ -70,7 +70,7 @@ export async function renderAppRouteToHTML(args: {
     throw new CompilationError("Invalid page component", { pageFile, type: typeof Page });
   }
 
-  let element: import("react").ReactNode = React.createElement(Page as ReactComponentLike);
+  let element: import("../../deps/esm.sh/react@19.1.1.js").ReactNode = React.createElement(Page as ReactComponentLike);
 
   for (let i = layouts.length - 1; i >= 0; i--) {
     const layoutPath = layouts[i];

package/src/src/server/handlers/request/rsc/handlers/render-handler.ts

@@ -1,5 +1,5 @@
 import * as dntShim from "../../../../../../_dnt.shims.js";
-import type * as React from "react";
+import type * as React from "../../../../../../deps/esm.sh/react@19.1.1.js";
 import { serverLogger as logger } from "../../../../../utils/index.js";
 import { RSCProductionOptimizer } from "../../../../../rendering/rsc/production-optimizer.js";
 import type { RSCRenderer } from "../../../../../rendering/rsc/server-renderer/index.js";

package/src/src/server/handlers/request/ssr/error-page-fallback.ts

@@ -1,5 +1,5 @@
 import * as dntShim from "../../../../../_dnt.shims.js";
-import type * as React from "react";
+import type * as React from "../../../../../deps/esm.sh/react@19.1.1.js";
 import type { HandlerContext } from "../../types.js";
 import type { ResponseBuilder } from "../../../../security/index.js";
 import { join as joinPath } from "../../../../platform/compat/path/index.js";
@@ -181,7 +181,7 @@ async function renderErrorPage(
   error?: Error,
   pathname?: string,
 ): Promise<dntShim.Response> {
-  const React = await import("react");
+  const React = await import("../../../../../deps/esm.sh/react@19.1.1.js");
   const { renderToStringAdapter } = await import(
     "../../../../react/compat/ssr-adapter/index.js"
   );

package/src/src/server/handlers/request/ssr/not-found-fallback.ts

@@ -46,7 +46,7 @@ export async function tryNotFoundFallback(
 
     if (!NotFoundComp) return null;
 
-    const React = await import("react");
+    const React = await import("../../../../../deps/esm.sh/react@19.1.1.js");
     const { renderToStringAdapter } = await import(
       "../../../../react/compat/ssr-adapter/index.js"
     );

package/src/src/transforms/esm/http-bundler.ts

@@ -156,47 +156,137 @@ export function createHTTPPlugin(): Plugin {
 }
 
 /**
- * Ensure esm.sh URLs have ?external=react for SSR.
- * This makes them import React as a bare specifier, which deno.json resolves.
+ * Ensure esm.sh URLs have external=react,react-dom for SSR.
+ * This makes them import React as bare specifiers, which the import map resolves.
  *
  * Uses two esm.sh features:
- * - `external=react` - Don't bundle React, let import map resolve it
+ * - `external=react,react-dom` - Don't bundle React/ReactDOM, let import map resolve them
  * - `deps=react@X,react-dom@X` - Pin dependency versions to prevent mismatches
+ *
+ * Logic for external handling:
+ * 1. If no `external=` param → add `external=react,react-dom`
+ * 2. If `external=X` exists but no `react` → append `,react,react-dom`
+ * 3. If has `react` but no `react-dom` → append `,react-dom`
+ * 4. If has both `react` AND `react-dom` → leave alone
+ *
+ * @param code - Source code to process
+ * @param _cacheDir - Unused (kept for API compatibility)
+ * @param hash - Hash for logging
+ * @param reactVersion - React version for deps param (defaults to REACT_VERSION)
  */
 export function bundleHttpImports(
   code: string,
   _cacheDir: string,
   hash: string,
+  reactVersion?: string,
 ): string | Promise<string> {
   const has = hasHttpImports(code);
   logger.debug(`${LOG_PREFIX} Check: hasHttp=${has}, hash=${hash.slice(0, 8)}`);
   if (!has) return code;
 
+  const version = reactVersion ?? REACT_VERSION;
+
   return replaceSpecifiers(code, (specifier) => {
+    // Handle relative esm.sh paths like "/react-dom?target=es2022" or "/hoist-non-react-statics@..."
+    // These are returned by esm.sh stub modules and need to be converted to full URLs
+    if (specifier.startsWith("/") && !specifier.startsWith("//")) {
+      const fullUrl = `https://esm.sh${specifier}`;
+      // Recursively process as full URL (will add external params if needed)
+      const isReactPackage = /^\/react(-dom)?(@|\/|\?|$)/.test(specifier);
+      if (isReactPackage) {
+        // React packages - just ensure target and return full URL
+        if (!specifier.includes("target=")) {
+          const joiner = specifier.includes("?") ? "&" : "?";
+          return `${fullUrl}${joiner}target=es2022`;
+        }
+        return fullUrl;
+      }
+      // Non-React packages - add external params
+      const params: string[] = [];
+      if (!specifier.includes("target=")) params.push("target=es2022");
+      if (!specifier.includes("external=")) params.push("external=react,react-dom");
+      if (!specifier.includes("deps=")) params.push(`deps=react@${version},react-dom@${version}`);
+      if (params.length === 0) return fullUrl;
+      const joiner = specifier.includes("?") ? "&" : "?";
+      return `${fullUrl}${joiner}${params.join("&")}`;
+    }
+
     const isEsmSh = specifier.startsWith("https://esm.sh/") ||
       specifier.startsWith("http://esm.sh/");
     const isVfEsm = specifier.startsWith("https://esm.veryfront.com/");
     if (!isEsmSh && !isVfEsm) return null;
 
+    // Don't modify React/ReactDOM package URLs themselves
     const isReactPackage = /\/react(-dom)?(@|\/|$)/.test(specifier);
+    if (isReactPackage) {
+      // Just ensure target is set for React packages
+      if (!specifier.includes("target=")) {
+        const joiner = specifier.includes("?") ? "&" : "?";
+        return `${specifier}${joiner}target=es2022`;
+      }
+      return null;
+    }
 
+    // For non-React packages: ensure external=react,react-dom and deps
     const params: string[] = [];
 
     if (!specifier.includes("target=")) {
       params.push("target=es2022");
     }
 
-    // Only add external and deps to non-React packages
-    // Use external=react to not bundle React (let import map resolve it)
-    // Use deps=react@X,react-dom@X to pin dependency versions
-    if (!isReactPackage) {
-      if (!specifier.includes("external=react")) {
-        params.push("external=react");
+    // Handle external param - ensure both react AND react-dom are externalized
+    const hasExternal = specifier.includes("external=");
+    const hasReactExternal = specifier.includes("external=react") ||
+      /external=[^&]*\breact\b/.test(specifier);
+    const hasReactDomExternal = /external=[^&]*react-dom/.test(specifier);
+
+    if (!hasExternal) {
+      // No external param - add both
+      params.push("external=react,react-dom");
+    } else if (!hasReactExternal) {
+      // Has external but no react - append react,react-dom
+      // This requires modifying existing param, so we'll use URL parsing
+      try {
+        const url = new URL(specifier);
+        const existing = url.searchParams.get("external") || "";
+        url.searchParams.set("external", `${existing},react,react-dom`);
+        // Return full modified URL and skip other param additions
+        if (!specifier.includes("target=")) {
+          url.searchParams.set("target", "es2022");
+        }
+        if (!specifier.includes("deps=")) {
+          url.searchParams.set("deps", `react@${version},react-dom@${version}`);
+        }
+        logger.debug(`${LOG_PREFIX} ${specifier} -> ${url.toString()}`);
+        return url.toString();
+      } catch {
+        // Fallback: just add as new param (may create duplicate)
+        params.push("external=react,react-dom");
       }
-      if (!specifier.includes("deps=")) {
-        params.push(`deps=react@${REACT_VERSION},react-dom@${REACT_VERSION}`);
+    } else if (!hasReactDomExternal) {
+      // Has react but not react-dom - append react-dom
+      try {
+        const url = new URL(specifier);
+        const existing = url.searchParams.get("external") || "";
+        url.searchParams.set("external", `${existing},react-dom`);
+        if (!specifier.includes("target=")) {
+          url.searchParams.set("target", "es2022");
+        }
+        if (!specifier.includes("deps=")) {
+          url.searchParams.set("deps", `react@${version},react-dom@${version}`);
+        }
+        logger.debug(`${LOG_PREFIX} ${specifier} -> ${url.toString()}`);
+        return url.toString();
+      } catch {
+        // Fallback
+        params.push("external=react-dom");
       }
     }
+    // else: has both react and react-dom - no external changes needed
+
+    if (!specifier.includes("deps=")) {
+      params.push(`deps=react@${version},react-dom@${version}`);
+    }
 
     if (params.length === 0) return null;
 

package/src/src/transforms/esm/http-cache.ts

@@ -12,6 +12,7 @@ import * as dntShim from "../../../_dnt.shims.js";
 import { createFileSystem, exists } from "../../platform/compat/fs.js";
 import { isAbsolute, join } from "../../platform/compat/path/index.js";
 import { cwd } from "../../platform/compat/process.js";
+import { isDeno } from "../../platform/compat/runtime.js";
 import { rendererLogger as logger } from "../../utils/index.js";
 import { simpleHash } from "../../utils/hash-utils.js";
 import { LRUCache } from "../../utils/lru-wrapper.js";
@@ -19,8 +20,7 @@ import { withSpan } from "../../observability/tracing/otlp-setup.js";
 import { SpanNames } from "../../observability/tracing/span-names.js";
 import { resolveImport } from "../../modules/import-map/resolver.js";
 import type { ImportMapConfig } from "../../modules/import-map/types.js";
-import { isDeno } from "../../platform/compat/runtime.js";
-import { getDenoNpmReactMap, getReactImportMap, REACT_VERSION } from "./package-registry.js";
+import { getReactImportMap, REACT_VERSION } from "./package-registry.js";
 import { parseImports, replaceSpecifiers } from "./lexer.js";
 import { CacheBackends, createDistributedCacheAccessor } from "../../cache/backend.js";
 import {
@@ -61,13 +61,23 @@ function isHttpUrl(specifier: string): boolean {
 /**
  * Check if a URL is for React core packages.
  *
- * Previously, React modules were NOT cached to prevent multiple React instances.
- * Now with npm: specifiers for Deno (which auto-deduplicate) and consistent
- * esm.sh URLs with external=react for other runtimes, all code uses the same
- * React instance.
+ * React core modules (react, react-dom) must NOT be cached/bundled.
+ * Instead, all packages use external=react and import from the same esm.sh URL.
+ * This prevents multiple React instances which causes "useContext is null" errors.
  */
-function isReactCoreUrl(_url: string): boolean {
-  return false;
+function isReactCoreUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    if (!parsed.hostname.includes("esm.sh")) return false;
+
+    // Extract package name from esm.sh pathname
+    // Formats: /react@version, /v150/react@version, /stable/react@version
+    const pathname = parsed.pathname.replace(/^\/(v\d+|stable)\//, "/");
+    const match = pathname.match(/^\/(react|react-dom)(@[\d.]+)?(?:\/|$|\?)/);
+    return match !== null;
+  } catch {
+    return false;
+  }
 }
 
 function isExternalScheme(specifier: string): boolean {
@@ -135,26 +145,8 @@ function resolveBareSpecifier(
   importMap: ImportMapConfig,
   reactVersion: string = REACT_VERSION,
 ): string {
-  // For Deno SSR: Resolve React to npm: specifiers for automatic deduplication.
-  // Deno's native npm resolution ensures all modules share the same React instance.
-  // See: https://deno.com/blog/not-using-npm-specifiers-doing-it-wrong
-  if (isDeno) {
-    const denoReactMap = getDenoNpmReactMap(reactVersion);
-    const denoMatch = denoReactMap[specifier];
-    if (denoMatch) return denoMatch;
-
-    // For unknown react/* or react-dom/* subpaths, construct npm: specifiers
-    if (specifier.startsWith("react/") && !specifier.startsWith("react-dom")) {
-      const subpath = specifier.slice("react/".length);
-      return `npm:react@${reactVersion}/${subpath}`;
-    }
-    if (specifier.startsWith("react-dom/")) {
-      const subpath = specifier.slice("react-dom/".length);
-      return `npm:react-dom@${reactVersion}/${subpath}`;
-    }
-  }
-
-  // For non-Deno runtimes: Use esm.sh URLs with consistent versioning.
+  // Use esm.sh URLs for React - NO npm: specifiers per plan requirements.
+  // All packages use external=react to share the same React instance.
   const reactMap = getReactImportMap(reactVersion);
   const reactMapped = reactMap[specifier];
   if (reactMapped) return reactMapped;
@@ -336,6 +328,13 @@ async function resolveSpecifier(
     if (!baseUrl || !isHttpUrl(baseUrl)) return null;
 
     const resolved = new URL(specifier, baseUrl).toString();
+
+    // For React core URLs: return the full esm.sh URL (not cached, to prevent multiple instances)
+    // This transforms relative paths like "/react-dom?..." to "https://esm.sh/react-dom?..."
+    if (isReactCoreUrl(resolved)) {
+      return normalizeHttpUrl(resolved);
+    }
+
     const cached = await cacheHttpModule(resolved, options);
     return cached ? `file://${cached}` : null;
   }