veryfront 0.0.86 → 0.0.88

package/src/src/cli/index/types.ts

@@ -18,6 +18,8 @@ export interface GenerateCommandArgs {
   _: (string | number)[];
 }
 
+export type ServerMode = "combined" | "proxy" | "renderer";
+
 export interface ParsedArgs {
   _: (string | number)[];
   port?: number;
@@ -41,5 +43,8 @@ export interface ParsedArgs {
   j?: boolean;
   with?: string[];
   w?: string[];
+  /** Server mode: combined (default), proxy, or renderer */
+  mode?: ServerMode;
+  m?: ServerMode;
   [key: string]: unknown;
 }

package/src/src/config/loader.ts

@@ -8,7 +8,8 @@ import { isBun } from "../platform/compat/runtime.js";
 import { serverLogger } from "../utils/logger/logger.js";
 import { getReactImportMap, REACT_DEFAULT_VERSION } from "../utils/constants/cdn.js";
 import { DEFAULT_CACHE_DIR } from "../utils/constants/server.js";
-import { setReactVersion } from "../transforms/esm/package-registry.js";
+// React version is now passed per-request via TransformOptions.reactVersion
+// No longer using global singleton: import { setReactVersion } from "#veryfront/transforms/esm/package-registry.ts";
 import { buildConfigCacheKey } from "../cache/keys.js";
 import { DEFAULT_PORT } from "./defaults.js";
 import { createFileSystem } from "../platform/compat/fs.js";
@@ -198,10 +199,10 @@ function validateAndCacheConfig(userConfig: unknown, cacheKey: string): Veryfron
 
   const merged = mergeConfigs(userConfig as Partial<VeryfrontConfig>);
 
-  // Apply React version from config (sets global default for transforms)
+  // React version is now passed per-request via TransformOptions.reactVersion
+  // Config stores it at merged.react.version, accessed wherever needed
   if (merged.react?.version) {
-    setReactVersion(merged.react.version);
-    serverLogger.debug("[CONFIG] React version set from config", { version: merged.react.version });
+    serverLogger.debug("[CONFIG] React version from config", { version: merged.react.version });
   }
 
   configCacheByProject.set(cacheKey, { revision: cacheRevision, config: merged });

package/src/src/html/utils.ts

@@ -97,8 +97,8 @@ interface CdnUrlTemplates {
 const CDN_URL_TEMPLATES: Record<CdnProvider, CdnUrlTemplates> = {
   "esm.sh": {
     react: (v) => `https://esm.sh/react@${v}?target=es2022`,
-    reactDom: (v) => `https://esm.sh/react-dom@${v}?target=es2022`,
-    reactDomClient: (v) => `https://esm.sh/react-dom@${v}/client?target=es2022`,
+    reactDom: (v) => `https://esm.sh/react-dom@${v}?external=react&target=es2022`,
+    reactDomClient: (v) => `https://esm.sh/react-dom@${v}/client?external=react&target=es2022`,
     jsxRuntime: (v) => `https://esm.sh/react@${v}/jsx-runtime?target=es2022`,
     jsxDevRuntime: (v) => `https://esm.sh/react@${v}/jsx-dev-runtime?target=es2022`,
     veryfrontAgentReact: (v) =>

package/src/src/modules/component-registry/registry.ts

@@ -1,7 +1,7 @@
 import { serverLogger as logger } from "../../utils/index.js";
 import { basename, join } from "../../platform/compat/path/index.js";
 import type { RuntimeAdapter } from "../../platform/adapters/base.js";
-import type * as React from "react";
+import type * as React from "../../../deps/esm.sh/react@19.1.1.js";
 import { withSpan } from "../../observability/tracing/otlp-setup.js";
 
 export interface ComponentExports {

package/src/src/modules/import-map/default-import-map.ts

@@ -1,10 +1,6 @@
 import * as dntShim from "../../../_dnt.shims.js";
 import type { ImportMapConfig } from "./types.js";
-import { isDeno } from "../../platform/compat/runtime.js";
-import {
-  getDenoNpmReactMap,
-  getReactImportMap,
-} from "../../transforms/esm/package-registry.js";
+import { getReactImportMap } from "../../transforms/esm/package-registry.js";
 
 function ensureTrailingSlash(path: string): string {
   return path.endsWith("/") ? path : `${path}/`;
@@ -45,33 +41,15 @@ function getVeryfrontSsrImportMap(): Record<string, string> {
   };
 }
 
-/**
- * Get React import map for SSR in Deno.
- * Uses npm: specifiers which Deno handles natively with automatic deduplication.
- * See: https://deno.com/blog/not-using-npm-specifiers-doing-it-wrong
- *
- * This replaces the previous shared-*.ts approach which required manual re-exports.
- */
-export function getDenoReactImportMap(): Record<string, string> {
-  return getDenoNpmReactMap();
-}
-
 /**
  * Get the default import map for SSR transforms.
- *
- * For Deno SSR: Uses npm: specifiers with automatic deduplication.
- * For other runtimes: Uses esm.sh URLs with external=react.
+ * Uses esm.sh URLs consistently (NO npm: specifiers per plan requirements).
  */
 export function getDefaultImportMap(): ImportMapConfig {
-  const reactMap = isDeno ? getDenoReactImportMap() : getReactImportMap();
+  const reactMap = getReactImportMap();
   const veryfrontMap = getVeryfrontSsrImportMap();
 
-  // For Deno SSR, add scopes so that esm.sh modules with external=react
-  // resolve their bare `react` imports to npm: specifiers.
-  const scopes = isDeno ? { "https://esm.sh/": getDenoReactImportMap() } : undefined;
-
   return {
     imports: { ...veryfrontMap, ...reactMap },
-    scopes,
   };
 }

package/src/src/modules/import-map/loader.ts

@@ -3,15 +3,16 @@ import { dirname, join } from "../../platform/compat/path/index.js";
 import type { RuntimeAdapter } from "../../platform/adapters/base.js";
 import { getConfig } from "../../config/index.js";
 import type { ImportMapConfig } from "./types.js";
-import { getDefaultImportMap, getDenoReactImportMap } from "./default-import-map.js";
+import { getDefaultImportMap } from "./default-import-map.js";
 import { mergeImportMaps } from "./merger.js";
 import { withSpan } from "../../observability/tracing/otlp-setup.js";
-import { isDeno } from "../../platform/compat/runtime.js";
+import { getReactImportMap } from "../../transforms/esm/package-registry.js";
 
 function normalizeImportMapForRuntime(importMap: ImportMapConfig): ImportMapConfig {
   const normalizeValue = (value: string): string => {
     if (!value.startsWith("npm:")) return value;
 
+    // Convert npm: specifiers to esm.sh URLs (should not happen with new code)
     const spec = value.slice(4);
     const [base, query] = spec.split("?");
     const url = `https://esm.sh/${base}`;
@@ -23,7 +24,7 @@ function normalizeImportMapForRuntime(importMap: ImportMapConfig): ImportMapConf
     ? Object.fromEntries(Object.entries(importMap.imports).map(([k, v]) => [k, normalizeValue(v)]))
     : undefined;
 
-  let scopes = importMap.scopes
+  const scopes = importMap.scopes
     ? Object.fromEntries(
       Object.entries(importMap.scopes).map(([scope, mappings]) => [
         scope,
@@ -34,31 +35,14 @@ function normalizeImportMapForRuntime(importMap: ImportMapConfig): ImportMapConf
     )
     : undefined;
 
-  // CRITICAL: For Deno SSR, always use shared-*.ts files for React.
-  // Project configs may have esm.sh URLs which would create multiple React instances.
   // Override React mappings AFTER all other processing to ensure single instance.
-  // Also remove any "react/" prefix match since we have explicit mappings.
-  if (isDeno && imports) {
-    const reactMap = getDenoReactImportMap();
-    // Remove any esm.sh "react/" prefix mapping that would break subpath resolution
+  // Remove any "react/" prefix match since we have explicit mappings.
+  if (imports) {
+    const reactMap = getReactImportMap();
     delete imports["react/"];
     imports = { ...imports, ...reactMap };
   }
 
-  // For Deno SSR, ensure esm.sh scope has React mappings to shared-*.ts files.
-  // This is critical because esm.sh modules with external=react have bare `react`
-  // imports that need to resolve to our shared React instance.
-  if (isDeno) {
-    const reactMap = getDenoReactImportMap();
-    const esmShScope = scopes?.["https://esm.sh/"] ?? {};
-    // Remove any "react/" prefix match from scope as well
-    delete esmShScope["react/"];
-    scopes = {
-      ...scopes,
-      "https://esm.sh/": { ...esmShScope, ...reactMap },
-    };
-  }
-
   return { imports, scopes };
 }
 

package/src/src/modules/import-map/resolver.ts

@@ -60,21 +60,26 @@ export function resolveImport(
   if (isEsmShUrl(specifier)) {
     const esmShPackage = extractEsmShPackage(specifier);
     if (esmShPackage) {
+      const subpath = extractEsmShSubpath(specifier);
+
+      // Always check for explicit subpath mapping first (e.g., "react/jsx-runtime")
+      // This takes priority over appending subpath to base package mapping
+      if (subpath) {
+        const fullKey = esmShPackage + subpath; // e.g., "react/jsx-runtime"
+        const subpathMapping = scopedImports?.[fullKey] ?? importMap.imports?.[fullKey];
+        if (subpathMapping) return subpathMapping;
+      }
+
       const mapping = scopedImports?.[esmShPackage] ?? importMap.imports?.[esmShPackage];
       if (mapping) {
-        const subpath = extractEsmShSubpath(specifier);
         if (!subpath) return mapping;
 
-        // If mapping target is a file path (not HTTP URL or npm: specifier), look for explicit subpath mapping
-        // e.g., "react" → local file but "react/jsx-runtime" → different local file
-        // npm: specifiers are URL-like and should have subpaths appended
+        // If mapping target is a file path (not HTTP URL or npm: specifier),
+        // fall back to base mapping since explicit subpath wasn't found above
         const isFilePath = !mapping.startsWith("http://") && !mapping.startsWith("https://") &&
           !mapping.startsWith("npm:");
         if (isFilePath) {
-          const fullKey = esmShPackage + subpath; // e.g., "react/jsx-runtime"
-          const subpathMapping = scopedImports?.[fullKey] ?? importMap.imports?.[fullKey];
-          // Use explicit subpath mapping if available, otherwise fall back to base mapping
-          return subpathMapping ?? mapping;
+          return mapping;
         }
 
         return mapping + subpath;

package/src/src/modules/react-loader/component-loader.ts

@@ -1,5 +1,5 @@
 import { join } from "../../platform/compat/path/index.js";
-import type * as React from "react";
+import type * as React from "../../../deps/esm.sh/react@19.1.1.js";
 import type { RuntimeAdapter } from "../../platform/adapters/base.js";
 import { transformToESM } from "../../transforms/esm/index.js";
 import type { TransformOptions } from "../../transforms/esm/types.js";
@@ -34,6 +34,7 @@ export function loadComponentFromSource(
           adapter,
           dev,
           contentSourceId: options?.contentSourceId,
+          reactVersion: options?.reactVersion,
         });
         return loader.loadModule(filePath, source);
       }
@@ -44,6 +45,7 @@ export function loadComponentFromSource(
         moduleServerUrl: options?.moduleServerUrl ?? "/_vf_modules",
         vendorBundleHash: options?.vendorBundleHash,
         ssr: false,
+        reactVersion: options?.reactVersion,
       };
 
       const transformedCode = await transformToESM(

package/src/src/modules/react-loader/extract-component.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 { createError, toError } from "../../errors/veryfront-error.js";
 
 export function extractComponent(

package/src/src/modules/react-loader/ssr-module-loader/loader.ts

@@ -8,13 +8,12 @@
 import * as dntShim from "../../../../_dnt.shims.js";
 
 
-import { isAbsolute, join } from "../../../platform/compat/path/index.js";
-import { cwd } from "../../../platform/compat/process.js";
-import type * as React from "react";
+import { join } from "../../../platform/compat/path/index.js";
+import type * as React from "../../../../deps/esm.sh/react@19.1.1.js";
 import { transformToESM } from "../../../transforms/esm/index.js";
 import type { TransformOptions } from "../../../transforms/esm/types.js";
 import { TRANSFORM_CACHE_VERSION } from "../../../transforms/esm/package-registry.js";
-import { buildSSRModuleCacheKey, buildSSRModuleProjectKey } from "../../../cache/keys.js";
+import { buildSSRModuleCacheKey } from "../../../cache/keys.js";
 import {
   type CrossProjectImport,
   type MissingImport,
@@ -23,6 +22,7 @@ import {
 import { createFileSystem } from "../../../platform/compat/fs.js";
 import { createError, toError } from "../../../errors/veryfront-error.js";
 import { rendererLogger as logger } from "../../../utils/index.js";
+import { hashCodeHex } from "../../../utils/hash-utils.js";
 import { getApiBaseUrlEnv } from "../../../config/env.js";
 import { injectContext, withSpan } from "../../../observability/tracing/otlp-setup.js";
 import { SpanNames } from "../../../observability/tracing/span-names.js";
@@ -49,7 +49,8 @@ import {
   transformSemaphore,
 } from "./cache/index.js";
 import type { ModuleCacheEntry, SSRModuleLoaderOptions } from "./types.js";
-import { getCacheBaseDir, getHttpBundleCacheDir } from "../../../utils/cache-dir.js";
+import { getHttpBundleCacheDir, getMdxEsmCacheDir } from "../../../utils/cache-dir.js";
+import { lookupMdxEsmCache } from "../../../transforms/mdx/esm-module-loader/cache/index.js";
 import { ensureHttpBundlesExist } from "../../../transforms/esm/http-cache.js";
 import { LRUCache } from "../../../utils/lru-wrapper.js";
 
@@ -263,10 +264,12 @@ export class SSRModuleLoader {
         `Missing contentSourceId for SSR module cache (project: ${this.options.projectId}, file: ${filePath})`,
       );
     }
+    // Include reactVersion in cache key to ensure different versions don't share cached modules
+    const reactVersion = this.options.reactVersion ?? "default";
     return buildSSRModuleCacheKey(
       TRANSFORM_CACHE_VERSION,
       this.options.projectId,
-      `${this.options.contentSourceId}:${filePath}`,
+      `${this.options.contentSourceId}:${reactVersion}:${filePath}`,
     );
   }
 
@@ -361,6 +364,7 @@ export class SSRModuleLoader {
           dev: this.options.dev,
           ssr: true,
           apiBaseUrl: this.options.apiBaseUrl,
+          reactVersion: this.options.reactVersion,
         };
 
         const filePathWithExt = syntheticFilePath.endsWith(ext)
@@ -532,6 +536,34 @@ export class SSRModuleLoader {
       }
     }
 
+    // Check MDX-ESM cache to share modules with MDX loader and avoid duplicate React contexts
+    if (this.options.projectId && this.options.contentSourceId) {
+      const baseCacheDir = getMdxEsmCacheDir();
+      const projectKey = hashCodeHex(this.options.projectId);
+      const sourceKey = hashCodeHex(this.options.contentSourceId);
+      const mdxCacheDir = join(baseCacheDir, projectKey, sourceKey);
+
+      const mdxCachedPath = await lookupMdxEsmCache(
+        filePath,
+        mdxCacheDir,
+        this.options.projectDir,
+        contentHash,
+      );
+      if (mdxCachedPath) {
+        const entry: ModuleCacheEntry = { tempPath: mdxCachedPath, contentHash };
+        globalModuleCache.set(contentCacheKey, entry);
+        globalModuleCache.set(filePathCacheKey, entry);
+
+        logger.debug("[SSR-MODULE-LOADER] Reusing MDX-ESM cache", {
+          file: filePath.slice(-40),
+          cachedPath: mdxCachedPath.slice(-60),
+        });
+
+        await this.ensureDependenciesExist(code, filePath, depth);
+        return;
+      }
+    }
+
     const existingTransform = globalInProgress.get(inProgressKey);
     if (existingTransform) {
       try {
@@ -626,6 +658,7 @@ export class SSRModuleLoader {
           dev: this.options.dev,
           ssr: true,
           apiBaseUrl: this.options.apiBaseUrl,
+          reactVersion: this.options.reactVersion,
         };
 
         let transformed = await withSpan(
@@ -940,26 +973,12 @@ export class SSRModuleLoader {
     }
   }
 
-  /**
-   * Fast sync hash for small strings (project IDs, etc.)
-   * Use hashContentAsync for large file content.
-   */
-  private hashCode(str: string): string {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-      const char = str.charCodeAt(i);
-      hash = (hash << 5) - hash + char;
-      hash = hash & hash;
-    }
-    return Math.abs(hash).toString(16);
-  }
-
   /**
    * Async hash for large content using Web Crypto API.
-   * Doesn't block event loop for large files.
+   * Falls back to sync hash for small files.
    */
   private async hashContentAsync(content: string): Promise<string> {
-    if (content.length < 10000) return this.hashCode(content);
+    if (content.length < 10000) return hashCodeHex(content);
 
     try {
       const data = new TextEncoder().encode(content);
@@ -970,7 +989,7 @@ export class SSRModuleLoader {
         .map((b) => b.toString(16).padStart(2, "0"))
         .join("");
     } catch {
-      return this.hashCode(content);
+      return hashCodeHex(content);
     }
   }
 
@@ -990,33 +1009,28 @@ export class SSRModuleLoader {
   }
 
   private async ensureTmpDir(): Promise<string> {
-    let projectDir = this.options.projectDir;
     const { projectId, contentSourceId } = this.options;
 
     if (!projectId) {
-      throw new Error(`Missing projectId for SSR temp directory (projectDir: ${projectDir})`);
+      throw new Error(
+        `Missing projectId for SSR temp directory (projectDir: ${this.options.projectDir})`,
+      );
     }
     if (!contentSourceId) {
       throw new Error(`Missing contentSourceId for SSR temp directory (project: ${projectId})`);
     }
 
-    if (!projectDir.startsWith("/")) {
-      projectDir = join(cwd(), projectDir);
-    }
-
-    const cacheBaseDir = getCacheBaseDir();
-    const baseDir = isAbsolute(cacheBaseDir) ? cacheBaseDir : join(cwd(), cacheBaseDir);
-
-    const cacheKey = `${baseDir}|${
-      buildSSRModuleProjectKey(projectDir, projectId)
-    }|${contentSourceId}`;
+    // Use the same cache directory as MDX-ESM loader to share module instances.
+    // This prevents issues like React context being created twice in separate files.
+    const baseCacheDir = getMdxEsmCacheDir();
+    const projectKey = hashCodeHex(projectId);
+    const sourceKey = hashCodeHex(contentSourceId);
+    const cacheKey = `${baseCacheDir}|${projectKey}|${sourceKey}`;
 
     const existingDir = globalTmpDirs.get(cacheKey);
     if (existingDir) return existingDir;
 
-    const projectKey = this.hashCode(projectId);
-    const sourceKey = this.hashCode(contentSourceId);
-    const tmpDir = join(baseDir, "veryfront-ssr", projectKey, sourceKey);
+    const tmpDir = join(baseCacheDir, projectKey, sourceKey);
 
     await this.fs.mkdir(tmpDir, { recursive: true });
     globalTmpDirs.set(cacheKey, tmpDir);

package/src/src/modules/react-loader/ssr-module-loader/types.ts

@@ -16,6 +16,8 @@ export interface SSRModuleLoaderOptions {
   apiBaseUrl?: string;
   /** Content source ID for cache isolation (branch name or release ID) */
   contentSourceId?: string;
+  /** React version for transforms (defaults to DEFAULT_REACT_VERSION) */
+  reactVersion?: string;
 }
 
 export interface ModuleCacheEntry {

package/src/src/modules/react-loader/types.ts

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import type * as React from "../../../deps/esm.sh/react@19.1.1.js";
 
 export interface LoadComponentOptions {
   projectId?: string;
@@ -9,6 +9,8 @@ export interface LoadComponentOptions {
   ssr?: boolean;
   /** Content source ID for cache isolation (branch name or release ID) */
   contentSourceId?: string;
+  /** React version for transforms (from project config) */
+  reactVersion?: string;
 }
 
 export interface ComponentSource {

package/src/src/modules/react-loader/unified-loader.ts

@@ -6,6 +6,7 @@ import { rendererLogger as logger } from "../../utils/index.js";
 import { withSpan } from "../../observability/tracing/otlp-setup.js";
 import { getProjectTmpDir } from "./temp-directory.js";
 import type { ComponentMap, ComponentSource, LoadComponentOptions } from "./types.js";
+import { DEFAULT_REACT_VERSION } from "../../transforms/esm/package-registry.js";
 
 type TransformedComponent = { name: string; code: string };
 
@@ -21,8 +22,9 @@ export function loadComponentsUnified(
       const projectId = options?.projectId ?? projectDir;
       const dev = options?.dev ?? true;
       const moduleServerUrl = options?.moduleServerUrl;
+      const reactVersion = options?.reactVersion;
 
-      const transformOpts: TransformOptions = { projectId, dev, moduleServerUrl };
+      const transformOpts: TransformOptions = { projectId, dev, moduleServerUrl, reactVersion };
       const transformedComponents = await transformAllComponents(
         components,
         projectDir,
@@ -38,7 +40,7 @@ export function loadComponentsUnified(
       try {
         await writeComponentFiles(tmpDir, transformedComponents, adapter);
 
-        const entryCode = generateEntryPoint(transformedComponents);
+        const entryCode = generateEntryPoint(transformedComponents, reactVersion);
         await adapter.fs.writeFile(join(tmpDir, "entry.js"), entryCode);
 
         return await importUnifiedComponents(tmpDir, transformedComponents);
@@ -74,7 +76,8 @@ async function writeComponentFiles(
   );
 }
 
-function generateEntryPoint(components: TransformedComponent[]): string {
+function generateEntryPoint(components: TransformedComponent[], reactVersion?: string): string {
+  const version = reactVersion ?? DEFAULT_REACT_VERSION;
   const imports = components
     .map((comp) => `import { default as ${comp.name} } from './${comp.name}.js'`)
     .join("\n");
@@ -82,7 +85,7 @@ function generateEntryPoint(components: TransformedComponent[]): string {
   const exports = components.map((comp) => comp.name).join(", ");
 
   return `
-    import * as React from 'https://esm.sh/react@18.3.1?target=es2022'
+    import * as React from 'https://esm.sh/react@${version}?target=es2022'
     ${imports}
 
     export { ${exports} }

package/src/src/modules/server/module-batch-handler.ts

@@ -50,6 +50,8 @@ export interface BatchHandlerOptions {
    * When not set, users can import from any directory in the project.
    */
   allowedImportDirs?: string[];
+  /** React version for transforms (from project config) */
+  reactVersion?: string;
 }
 
 /** Maximum number of modules that can be batched in one request */
@@ -103,6 +105,7 @@ export function handleModuleBatch(req: dntShim.Request, options: BatchHandlerOpt
         branch,
         dev = false,
         allowedImportDirs,
+        reactVersion,
       } = options;
 
       const projectKey = projectId || projectSlug || "default";
@@ -148,6 +151,7 @@ export function handleModuleBatch(req: dntShim.Request, options: BatchHandlerOpt
               projectSlug,
               branch,
               projectId,
+              reactVersion,
             });
 
             const transformDurationMs = performance.now() - moduleStart;
@@ -247,6 +251,7 @@ async function loadAndTransformModule(
     projectSlug?: string;
     branch?: string | null;
     projectId?: string;
+    reactVersion?: string;
   },
 ): Promise<string | null> {
   const basePath = modulePath.replace(/\.js$/, "");
@@ -295,12 +300,14 @@ async function transformModule(
     projectSlug?: string;
     branch?: string | null;
     projectId?: string;
+    reactVersion?: string;
   },
 ): Promise<string> {
   let code = await transformToESM(source, sourceFile, projectDir, adapter, {
     projectId: options.projectId ?? projectDir,
     dev: options.dev,
     ssr: options.ssr,
+    reactVersion: options.reactVersion,
   });
 
   if (options.ssr) {

package/src/src/modules/server/module-server.ts

@@ -47,6 +47,8 @@ export interface ModuleServerOptions {
    * When not set, users can import from any directory in the project.
    */
   allowedImportDirs?: string[];
+  /** React version for transforms (from project config) */
+  reactVersion?: string;
 }
 
 /** Serve transformed module at /_vf_modules/* path */
@@ -65,6 +67,7 @@ export function serveModule(req: dntShim.Request, options: ModuleServerOptions):
         dev = true,
         projectUUID,
         allowedImportDirs,
+        reactVersion,
       } = options;
 
       const effectiveProjectId = projectUUID ?? projectId;
@@ -141,7 +144,7 @@ export function serveModule(req: dntShim.Request, options: ModuleServerOptions):
             `_snippets/${hash}.tsx`,
             projectDir,
             adapter,
-            { projectId: effectiveProjectId, dev, ssr: isSSR },
+            { projectId: effectiveProjectId, dev, ssr: isSSR, reactVersion },
           );
 
           if (isSSR && transformedCode) {
@@ -230,6 +233,7 @@ export function serveModule(req: dntShim.Request, options: ModuleServerOptions):
             dev,
             ssr: isSSR,
             moduleServerUrl: `http://${url.host}`,
+            reactVersion,
           });
 
           if (isSSR && code) {
@@ -308,6 +312,7 @@ export function serveModule(req: dntShim.Request, options: ModuleServerOptions):
             dev,
             ssr: isSSR,
             studioEmbed,
+            reactVersion,
           };
 
           code = await transformToESM(source, sourceFile, projectDir, adapter, transformOpts);

package/src/src/modules/server/ssr-import-rewriter.ts

@@ -1,6 +1,4 @@
-import { getDenoNpmReactMap, getReactVersion } from "../../transforms/esm/package-registry.js";
-import { isDeno } from "../../platform/compat/runtime.js";
-import { getLocalReactPaths } from "../../platform/compat/react-paths.js";
+import { getReactImportMap, getReactVersion } from "../../transforms/esm/package-registry.js";
 
 export interface SSRRewriteOptions {
   /** Project slug for multi-project routing */
@@ -37,26 +35,23 @@ function shouldKeepBareSpecifier(specifier: string): boolean {
 }
 
 function resolveReactForRuntime(specifier: string, version?: string): string | null {
-  // Always rewrite React imports to explicit specifiers for SSR modules.
-  // Dynamic imports from temp files don't have access to deno.json import map,
-  // so we must use explicit specifiers to ensure a single React instance.
-  // For Deno: use npm: specifiers (auto-deduplicated by Deno's npm cache)
-  // For Node/Bun: use local node_modules paths
-  const reactMap = isDeno ? getDenoNpmReactMap(version) : getLocalReactPaths();
+  // Always rewrite React imports to esm.sh URLs for SSR modules.
+  // NO npm: specifiers - use esm.sh URLs only for consistent React instance.
+  const v = version ?? getReactVersion();
+  const reactMap = getReactImportMap(v);
 
   const mapped = reactMap[specifier];
   if (mapped) return mapped;
 
   // Handle React subpath imports not in the map
-  const v = version ?? getReactVersion();
   if (specifier.startsWith("react/")) {
     const subpath = specifier.slice("react/".length);
-    return isDeno ? `npm:react@${v}/${subpath}` : `react/${subpath}`;
+    return `https://esm.sh/react@${v}/${subpath}?external=react&target=es2022`;
   }
 
   if (specifier.startsWith("react-dom/")) {
     const subpath = specifier.slice("react-dom/".length);
-    return isDeno ? `npm:react-dom@${v}/${subpath}` : `react-dom/${subpath}`;
+    return `https://esm.sh/react-dom@${v}/${subpath}?external=react&target=es2022`;
   }
 
   return null;
@@ -69,11 +64,8 @@ function rewriteBareImports(code: string, version?: string): string {
     if (reactUrl) return `from "${reactUrl}"`;
     if (shouldKeepBareSpecifier(specifier)) return `from "${specifier}"`;
 
-    // For third-party packages: Deno uses npm: specifiers, Node/Bun use esm.sh
-    if (isDeno) {
-      return `from "npm:${specifier}"`;
-    }
-    return `from "https://esm.sh/${specifier}?deps=react@${v},react-dom@${v}&target=es2022"`;
+    // For third-party packages: Use esm.sh with external=react
+    return `from "https://esm.sh/${specifier}?external=react&target=es2022"`;
   });
 }
 

package/src/src/react/compat/hooks-adapter.ts

@@ -1,6 +1,6 @@
 import * as dntShim from "../../../_dnt.shims.js";
 import { 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 { getReactVersionInfo, hasFeature } from "./version-detector/index.js";
 
 export interface FormStatus {

package/src/src/react/compat/ssr-adapter/response-builder.ts

@@ -1,5 +1,5 @@
 import * as dntShim from "../../../../_dnt.shims.js";
-import * as React from "react";
+import * as React from "../../../../deps/esm.sh/react@19.1.1.js";
 import { getReactVersionInfo } from "../version-detector/index.js";
 import { wrapInHTML } from "./html-wrapper.js";
 import { renderToStreamAdapter } from "./stream-renderer.js";