remote-components 0.0.40 → 0.0.42

package/dist/next/host/client/index.cjs

@@ -301,14 +301,14 @@ var RemoteComponentsError = class extends Error {
   }
 };
 function multipleRemoteComponentsError(url) {
-  return new Error(
+  return new RemoteComponentsError(
     `Multiple Remote Components found at "${url}". When a page exposes multiple Remote Components you must specify the "name" prop to select which one to load.`
   );
 }
-function failedToFetchRemoteComponentError(url, error) {
+function failedToFetchRemoteComponentError(url, { status, statusText }, help = "Is the URL correct and accessible?") {
   return new RemoteComponentsError(
-    `Failed to fetch Remote Component from "${url}". Is the URL correct and accessible?`,
-    { cause: error instanceof Error ? error : new Error(String(error)) }
+    `Failed to fetch Remote Component from "${url}". ${help}`,
+    { cause: new Error(`${status} ${statusText}`) }
   );
 }
 
@@ -319,6 +319,18 @@ var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
 var ReactDOM = __toESM(require("react-dom"), 1);
 var ReactDOMClient = __toESM(require("react-dom/client"), 1);
 
+// src/shared/utils/logger.ts
+var PREFIX = "remote-components";
+var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
+function logDebug(location2, message) {
+  if (DEBUG) {
+    console.debug(`[${PREFIX}:${location2}]: ${message}`);
+  }
+}
+function logWarn(location2, message) {
+  console.warn(`[${PREFIX}:${location2}]: ${message}`);
+}
+
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
@@ -433,28 +445,62 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
 
 // src/shared/webpack/shared-modules.ts
 function applySharedModules(bundle, resolve) {
+  logDebug(
+    "SharedModules",
+    `applySharedModules called for bundle: "${bundle}"`
+  );
+  logDebug(
+    "SharedModules",
+    `Shared modules to resolve: ${Object.keys(resolve)}`
+  );
   const self = globalThis;
   if (self.__remote_webpack_require__?.[bundle]) {
     const modulePaths = Object.keys(
       self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
     );
+    logDebug(
+      "SharedModules",
+      `Available module paths in __remote_webpack_require__[${bundle}]: ${modulePaths}`
+    );
     for (const [key, value] of Object.entries(resolve)) {
       let ids = modulePaths.filter((p) => p === key);
       if (ids.length === 0) {
         ids = modulePaths.filter((p) => p.includes(key));
       }
+      if (ids.length === 0) {
+        logDebug(
+          "SharedModules",
+          `No matching module path found for shared module "${key}"`
+        );
+      }
       for (let id of ids) {
         const webpackBundle = self.__remote_webpack_require__[bundle];
         if (webpackBundle.m) {
           if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
-            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
+            const mappedId = `${self.__remote_webpack_module_map__[bundle][id]}`;
+            logDebug(
+              "SharedModules",
+              `Mapped module id: "${id}" -> "${mappedId}"`
+            );
+            id = mappedId;
           }
           webpackBundle.m[id] = (module2) => {
             module2.exports = value;
           };
+        } else {
+          logWarn(
+            "SharedModules",
+            `webpackBundle.m is not available for bundle "${bundle}"`
+          );
         }
       }
     }
+  } else {
+    logWarn("SharedModules", `No webpack require found for bundle "${bundle}"`);
+    logDebug(
+      "SharedModules",
+      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
+    );
   }
 }
 
@@ -575,52 +621,7 @@ function getBundleKey(bundle) {
   return escapeString(bundle);
 }
 
-// src/shared/client/webpack-adapter.ts
-async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}) {
-  const self = globalThis;
-  if (!self.__remote_bundle_url__) {
-    self.__remote_bundle_url__ = {};
-  }
-  self.__remote_bundle_url__[bundle ?? "default"] = url;
-  self.__webpack_get_script_filename__ = () => null;
-  if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
-    if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
-      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
-      self.__original_webpack_require__ = self.__webpack_require__;
-    }
-    self.__webpack_chunk_load__ = createChunkLoader(runtime);
-    self.__webpack_require__ = createModuleRequire(runtime);
-    self.__webpack_require_type__ = runtime;
-    if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
-      const remoteBundle = bundle ?? "default";
-      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
-      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
-    }
-  }
-  if (runtime === RUNTIME_TURBOPACK) {
-    await Promise.all(
-      scripts.map((script) => {
-        if (script.src) {
-          return self.__webpack_chunk_load__?.(script.src, bundle);
-        }
-        return Promise.resolve(void 0);
-      })
-    );
-  }
-  await initializeSharedModules(
-    bundle ?? "default",
-    // include all core modules as shared
-    {
-      react: async () => (await import("react")).default,
-      "react-dom": async () => (await import("react-dom")).default,
-      "react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
-      "react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
-      "react-dom/client": async () => (await import("react-dom/client")).default,
-      ...shared
-    },
-    remoteShared
-  );
-}
+// src/shared/client/chunk-loader.ts
 function createChunkLoader(runtime) {
   return function __turbopack_chunk_load__(chunkId, scriptBundle) {
     const self = globalThis;
@@ -735,46 +736,232 @@ async function handleTurbopackChunk(code, bundle, url) {
     await Promise.all(loadChunkLists);
   }
 }
-function createModuleRequire(runtime) {
-  return (id) => {
-    const self = globalThis;
-    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
-      bundle: "default",
-      id
-    };
-    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
-    try {
-      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
-        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
+
+// src/shared/client/turbopack-module.ts
+function handleTurbopackModule(bundle, moduleId, id) {
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`];
+  const moduleInit = findModuleInit(modules, moduleId);
+  const exports = {};
+  const moduleExports = { exports };
+  if (!self.__remote_components_turbopack_modules__) {
+    self.__remote_components_turbopack_modules__ = {};
+  }
+  if (!self.__remote_components_turbopack_modules__[bundle]) {
+    self.__remote_components_turbopack_modules__[bundle] = {};
+  }
+  if (self.__remote_components_turbopack_modules__[bundle][moduleId]) {
+    return self.__remote_components_turbopack_modules__[bundle][moduleId];
+  }
+  if (typeof moduleInit !== "function") {
+    throw new Error(
+      `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
+    );
+  }
+  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  if (!self.__remote_components_turbopack_global__) {
+    self.__remote_components_turbopack_global__ = {};
+  }
+  if (!self.__remote_components_turbopack_global__[bundle]) {
+    self.__remote_components_turbopack_global__[bundle] = {};
+  }
+  const allModules = modules?.flat() ?? [];
+  moduleInit(
+    createTurbopackContext(
+      bundle,
+      exports,
+      moduleExports,
+      allModules,
+      moduleInit,
+      id,
+      self
+    ),
+    moduleExports,
+    exports
+  );
+  if (self.__remote_components_turbopack_modules__[bundle][moduleId] !== moduleExports.exports) {
+    self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  }
+  return moduleExports.exports;
+}
+function findModuleInit(modules, moduleId) {
+  const allModules = modules?.flat() ?? [];
+  if (typeof allModules[1] === "string" || typeof allModules[1] === "number") {
+    const normalizedId = /^[0-9]+$/.test(moduleId) ? Number(moduleId) : moduleId;
+    let moduleIdIndex = allModules.indexOf(normalizedId);
+    if (moduleIdIndex === -1) {
+      moduleIdIndex = allModules.findIndex(
+        (bundleEntry) => typeof bundleEntry === "string" && bundleEntry.startsWith(moduleId) || bundleEntry === normalizedId
+      );
+    }
+    if (moduleIdIndex !== -1) {
+      while (typeof allModules[moduleIdIndex] !== "function" && moduleIdIndex < allModules.length) {
+        moduleIdIndex++;
       }
-      const sharedModule = getSharedModule(bundle ?? "default", moduleId ?? id);
-      if (sharedModule) {
-        return sharedModule;
+      return allModules[moduleIdIndex];
+    }
+  } else {
+    return allModules.find(
+      (bundleEntry) => typeof bundleEntry === "object" && bundleEntry !== null && moduleId in bundleEntry
+    )?.[moduleId];
+  }
+  return void 0;
+}
+function createTurbopackContext(bundle, exports, moduleExports, allModules, moduleInit, id, self) {
+  return {
+    // HMR not implemented for Remote Components
+    k: {
+      register() {
+      },
+      registerExports() {
+      },
+      signature() {
+        return (fn) => fn;
       }
-      if (bundle && moduleId) {
-        return handleTurbopackModule(bundle, moduleId, id);
+    },
+    // ESM exports setup
+    s(bindings, esmId) {
+      let mod = exports;
+      if (typeof esmId === "string" || typeof esmId === "number") {
+        if (!self.__remote_components_turbopack_modules__) {
+          self.__remote_components_turbopack_modules__ = {};
+        }
+        if (!self.__remote_components_turbopack_modules__[bundle]) {
+          self.__remote_components_turbopack_modules__[bundle] = {};
+        }
+        if (!self.__remote_components_turbopack_modules__[bundle][esmId]) {
+          self.__remote_components_turbopack_modules__[bundle][esmId] = {};
+        }
+        mod = self.__remote_components_turbopack_modules__[bundle][esmId];
       }
-      throw new Error(`Module "${id}" not found.`);
-    } catch (requireError) {
-      if (typeof self.__original_webpack_require__ !== "function") {
-        throw new RemoteComponentsError(
-          `Module "${id}" not found in remote component bundle "${bundle}".`,
-          {
-            cause: requireError instanceof Error ? requireError : void 0
+      Object.defineProperty(mod, "__esModule", { value: true });
+      if (Array.isArray(bindings)) {
+        let i = 0;
+        while (i < bindings.length) {
+          const propName = bindings[i++];
+          const tagOrFunc = bindings[i++];
+          if (typeof tagOrFunc === "number") {
+            Object.defineProperty(mod, propName, {
+              value: bindings[i++],
+              enumerable: true,
+              writable: false
+            });
+          } else {
+            const getterFn = tagOrFunc;
+            if (typeof bindings[i] === "function") {
+              const setterFn = bindings[i++];
+              Object.defineProperty(mod, propName, {
+                get: getterFn,
+                set: setterFn,
+                enumerable: true
+              });
+            } else {
+              Object.defineProperty(mod, propName, {
+                get: getterFn,
+                enumerable: true
+              });
+            }
           }
-        );
+        }
       }
-      try {
-        return self.__original_webpack_require__(id);
-      } catch (originalError) {
-        throw new RemoteComponentsError(
-          `Module "${id}" not found in remote component bundle "${bundle}".`,
-          { cause: originalError instanceof Error ? originalError : void 0 }
+    },
+    // import
+    i(importId) {
+      let mod;
+      if (typeof importId === "string") {
+        const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(
+          importId
+        )?.groups ?? {};
+        const normalizedId = importId.replace(
+          /\s+<export(?<specifier>.*)>$/,
+          ""
         );
+        mod = self.__webpack_require__?.(`[${bundle}] ${normalizedId}`);
+        if (mod && exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
+          if (exportSource === "*") {
+            mod[exportName] = mod;
+          } else {
+            mod[exportName] = mod[exportSource];
+          }
+        }
+      } else {
+        mod = self.__webpack_require__?.(`[${bundle}] ${importId}`);
       }
-    }
+      if (typeof mod !== "object" || mod === null) {
+        mod = { default: mod };
+      } else if (!("default" in mod) && mod.toString() !== "[object Module]") {
+        try {
+          mod.default = mod;
+        } catch {
+        }
+      }
+      return mod;
+    },
+    // require
+    r(requireId) {
+      return self.__webpack_require__?.(`[${bundle}] ${requireId}`);
+    },
+    // value exports
+    v(value) {
+      if (typeof value === "function") {
+        exports.default = value((vid) => {
+          return self.__webpack_require__?.(`[${bundle}] ${vid}`);
+        });
+      } else {
+        moduleExports.exports = value;
+      }
+    },
+    // async module initializer
+    async a(mod) {
+      let result;
+      await mod(
+        () => {
+        },
+        (value) => result = value
+      );
+      exports.default = result;
+    },
+    // async module loader
+    async A(Aid) {
+      const mod = self.__webpack_require__?.(`[${bundle}] ${Aid}`);
+      return mod.default(
+        (parentId) => self.__webpack_require__?.(`[${bundle}] ${parentId}`)
+      );
+    },
+    // chunk loader
+    l(url) {
+      const moduleInitIndex = allModules.indexOf(moduleInit);
+      if (moduleInitIndex !== -1) {
+        const scriptIndex = allModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
+        if (scriptIndex !== -1) {
+          const script = allModules[scriptIndex];
+          const scriptSrc = script.getAttribute("data-turbopack-src") || "";
+          const nextIndex = scriptSrc.indexOf("/_next");
+          const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
+          const bundleUrl = `[${bundle}] ${baseUrl}/_next/${url}`;
+          return self.__webpack_chunk_load__?.(bundleUrl, bundle);
+        }
+      }
+      throw new Error(
+        `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
+      );
+    },
+    // global object for this bundle
+    g: self.__remote_components_turbopack_global__?.[bundle],
+    m: moduleExports,
+    e: exports
   };
 }
+
+// src/shared/client/turbopack-patterns.ts
+var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
+var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|e)\.A\((?<sharedModuleId>[0-9]+)\)/;
+var ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
+var ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb>parentImport|t)=>Promise\.all\(\["[^"]+"\]\.map\((?<mapCb>chunk|t)=>\k<ctx>\.l\(\k<mapCb>\)\)\)\.then\(\(\)=>\k<vCb>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+
+// src/shared/client/shared-modules.ts
 async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
   const self = globalThis;
   self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
@@ -791,14 +978,12 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
         return false;
       }
       const funcCode = idOrFunc.toString();
-      return /[a-z]\.TURBOPACK_REMOTE_SHARED/.test(funcCode);
+      return REMOTE_SHARED_MARKER_RE.test(funcCode);
     });
     if (sharedModuleInitializerIndex > 0) {
       const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
       const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
-      const { sharedModuleId } = /\.TURBOPACK_REMOTE_SHARED=await e\.A\((?<sharedModuleId>[0-9]+)\)/.exec(
-        sharedModuleInitializerCode
-      )?.groups ?? {};
+      const { sharedModuleId } = REMOTE_SHARED_ASSIGNMENT_RE.exec(sharedModuleInitializerCode)?.groups ?? {};
       if (sharedModuleId) {
         const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
           bundle,
@@ -810,33 +995,11 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
     }
     if (sharedModuleInitializer) {
       const { shared } = await sharedModuleInitializer;
-      const sharedModuleIds = Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
-        const { asyncSharedModuleId } = /e\.A\((?<asyncSharedModuleId>[0-9]+)\)/.exec(value.toString())?.groups ?? {};
-        if (asyncSharedModuleId) {
-          const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
-          let asyncSharedModule;
-          const newAllModules = self[`TURBOPACK_${bundleKey}`]?.flat() ?? [];
-          const asyncSharedModuleIdIndex = newAllModules.indexOf(
-            asyncSharedModuleIdNumber
-          );
-          if (asyncSharedModuleIdIndex !== -1 && typeof newAllModules[asyncSharedModuleIdIndex + 1] === "function") {
-            asyncSharedModule = newAllModules[asyncSharedModuleIdIndex + 1];
-          }
-          if (asyncSharedModule) {
-            const asyncSharedModuleCode = asyncSharedModule.toString();
-            const { sharedModuleId } = /e=>{e\.v\(e=>Promise\.resolve\(\)\.then\(\(\)=>e\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
-              asyncSharedModuleCode
-            )?.groups ?? /e=>{e\.v\(t=>Promise\.all\(\["[^"]+"\].map\(t=>e\.l\(t\)\)\)\.then\(\(\)=>t\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
-              asyncSharedModuleCode
-            )?.groups ?? {};
-            acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
-              "__remote_shared_module_",
-              ""
-            );
-          }
-        }
-        return acc;
-      }, {});
+      const sharedModuleIds = extractSharedModuleIds(
+        shared,
+        bundleKey,
+        self
+      );
       return Promise.all(
         Object.entries(sharedModuleIds).map(async ([id, module2]) => {
           if (self.__remote_shared_modules__?.[bundle]) {
@@ -860,6 +1023,31 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
     })
   );
 }
+function extractSharedModuleIds(shared, bundleKey, self) {
+  return Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
+    const { asyncSharedModuleId } = ASYNC_MODULE_LOADER_RE.exec(value.toString())?.groups ?? {};
+    if (asyncSharedModuleId) {
+      const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
+      let asyncSharedModule;
+      const newAllModules = self[`TURBOPACK_${bundleKey}`]?.flat() ?? [];
+      const asyncSharedModuleIdIndex = newAllModules.indexOf(
+        asyncSharedModuleIdNumber
+      );
+      if (asyncSharedModuleIdIndex !== -1 && typeof newAllModules[asyncSharedModuleIdIndex + 1] === "function") {
+        asyncSharedModule = newAllModules[asyncSharedModuleIdIndex + 1];
+      }
+      if (asyncSharedModule) {
+        const asyncSharedModuleCode = asyncSharedModule.toString();
+        const { sharedModuleId } = ASYNC_MODULE_RESOLVE_RE.exec(asyncSharedModuleCode)?.groups ?? ASYNC_MODULE_ALL_RE.exec(asyncSharedModuleCode)?.groups ?? {};
+        acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
+          "__remote_shared_module_",
+          ""
+        );
+      }
+    }
+    return acc;
+  }, {});
+}
 function getSharedModule(bundle, id) {
   const self = globalThis;
   for (const [key, value] of Object.entries(
@@ -871,210 +1059,100 @@ function getSharedModule(bundle, id) {
   }
   return null;
 }
-function handleTurbopackModule(bundle, moduleId, id) {
+
+// src/shared/client/webpack-adapter.ts
+async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}) {
   const self = globalThis;
-  const bundleKey = getBundleKey(bundle);
-  const modules = self[`TURBOPACK_${bundleKey}`];
-  let moduleInit;
-  const allModules = modules?.flat() ?? [];
-  if (typeof allModules[1] === "string" || typeof allModules[1] === "number") {
-    const normalizedId = /^[0-9]+$/.test(moduleId) ? Number(moduleId) : moduleId;
-    let moduleIdIndex = allModules.indexOf(normalizedId);
-    if (moduleIdIndex === -1) {
-      moduleIdIndex = allModules.findIndex(
-        (bundleEntry) => typeof bundleEntry === "string" && bundleEntry.startsWith(moduleId) || bundleEntry === normalizedId
-      );
+  if (!self.__remote_bundle_url__) {
+    self.__remote_bundle_url__ = {};
+  }
+  self.__remote_bundle_url__[bundle ?? "default"] = url;
+  self.__webpack_get_script_filename__ = () => null;
+  if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
+    if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
+      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
+      self.__original_webpack_require__ = self.__webpack_require__;
     }
-    if (moduleIdIndex !== -1) {
-      while (typeof allModules[moduleIdIndex] !== "function" && moduleIdIndex < allModules.length) {
-        moduleIdIndex++;
-      }
-      moduleInit = allModules[moduleIdIndex];
+    self.__webpack_chunk_load__ = createChunkLoader(runtime);
+    self.__webpack_require__ = createModuleRequire(runtime);
+    self.__webpack_require_type__ = runtime;
+    if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
+      const remoteBundle = bundle ?? "default";
+      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
+      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
     }
-  } else {
-    moduleInit = allModules.find(
-      (bundleEntry) => typeof bundleEntry === "object" && bundleEntry !== null && moduleId in bundleEntry
-    )?.[moduleId];
-  }
-  const exports = {};
-  const moduleExports = { exports };
-  if (!self.__remote_components_turbopack_modules__) {
-    self.__remote_components_turbopack_modules__ = {};
-  }
-  if (!self.__remote_components_turbopack_modules__[bundle]) {
-    self.__remote_components_turbopack_modules__[bundle] = {};
   }
-  if (self.__remote_components_turbopack_modules__[bundle][moduleId]) {
-    return self.__remote_components_turbopack_modules__[bundle][moduleId];
-  }
-  if (typeof moduleInit !== "function") {
-    throw new Error(
-      `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
+  if (runtime === RUNTIME_TURBOPACK) {
+    await Promise.all(
+      scripts.map((script) => {
+        if (script.src) {
+          return self.__webpack_chunk_load__?.(script.src, bundle);
+        }
+        return Promise.resolve(void 0);
+      })
     );
   }
-  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
-  if (!self.__remote_components_turbopack_global__) {
-    self.__remote_components_turbopack_global__ = {};
-  }
-  if (!self.__remote_components_turbopack_global__[bundle]) {
-    self.__remote_components_turbopack_global__[bundle] = {};
-  }
-  moduleInit(
-    {
-      // HMR not implemented for Remote Components
-      k: {
-        register() {
-        },
-        registerExports() {
-        },
-        signature() {
-          return (fn) => {
-            return fn;
-          };
-        }
-      },
-      // esm
-      s(bindings, esmId) {
-        let mod = exports;
-        if (typeof esmId === "string" || typeof esmId === "number") {
-          if (!self.__remote_components_turbopack_modules__) {
-            self.__remote_components_turbopack_modules__ = {};
-          }
-          if (!self.__remote_components_turbopack_modules__[bundle]) {
-            self.__remote_components_turbopack_modules__[bundle] = {};
-          }
-          if (!self.__remote_components_turbopack_modules__[bundle][esmId]) {
-            self.__remote_components_turbopack_modules__[bundle][esmId] = {};
-          }
-          mod = self.__remote_components_turbopack_modules__[bundle][esmId];
-        }
-        Object.defineProperty(mod, "__esModule", { value: true });
-        if (Array.isArray(bindings)) {
-          let i = 0;
-          while (i < bindings.length) {
-            const propName = bindings[i++];
-            const tagOrFunc = bindings[i++];
-            if (typeof tagOrFunc === "number") {
-              Object.defineProperty(mod, propName, {
-                value: bindings[i++],
-                enumerable: true,
-                writable: false
-              });
-            } else {
-              const getterFn = tagOrFunc;
-              if (typeof bindings[i] === "function") {
-                const setterFn = bindings[i++];
-                Object.defineProperty(mod, propName, {
-                  get: getterFn,
-                  set: setterFn,
-                  enumerable: true
-                });
-              } else {
-                Object.defineProperty(mod, propName, {
-                  get: getterFn,
-                  enumerable: true
-                });
-              }
-            }
-          }
-        }
-      },
-      // import
-      i(importId) {
-        let mod;
-        if (typeof importId === "string") {
-          const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(
-            importId
-          )?.groups ?? {};
-          const normalizedId = importId.replace(
-            /\s+<export(?<specifier>.*)>$/,
-            ""
-          );
-          mod = self.__webpack_require__?.(
-            `[${bundle}] ${normalizedId}`
-          );
-          if (exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
-            if (exportSource === "*") {
-              mod[exportName] = mod;
-            } else {
-              mod[exportName] = mod[exportSource];
-            }
-          }
-        } else {
-          mod = self.__webpack_require__?.(`[${bundle}] ${importId}`);
-        }
-        if (typeof mod !== "object") {
-          mod = { default: mod };
-        } else if (!("default" in mod) && // eslint-disable-next-line @typescript-eslint/no-base-to-string
-        mod.toString() !== "[object Module]") {
-          try {
-            mod.default = mod;
-          } catch {
+  const coreShared = {
+    react: async () => (await import("react")).default,
+    "react-dom": async () => (await import("react-dom")).default,
+    "react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
+    "react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
+    "react-dom/client": async () => (await import("react-dom/client")).default,
+    ...shared
+  };
+  await initializeSharedModules(
+    bundle ?? "default",
+    // include all core modules as shared
+    coreShared,
+    remoteShared
+  );
+}
+function createModuleRequire(runtime) {
+  return (id) => {
+    const self = globalThis;
+    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
+      bundle: "default",
+      id
+    };
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    logDebug("WebpackAdapter", `remoteRuntime: "${remoteRuntime}"`);
+    try {
+      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
+        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
+      }
+      const sharedModuleId = moduleId ?? id;
+      const sharedModule = getSharedModule(bundle ?? "default", sharedModuleId);
+      if (sharedModule) {
+        return sharedModule;
+      }
+      if (bundle && moduleId) {
+        return handleTurbopackModule(bundle, moduleId, id);
+      }
+      throw new Error(`Module "${id}" not found.`);
+    } catch (requireError) {
+      logWarn(
+        "WebpackAdapter",
+        `Module require failed: ${String(requireError)}`
+      );
+      if (typeof self.__original_webpack_require__ !== "function") {
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          {
+            cause: requireError instanceof Error ? requireError : void 0
           }
-        }
-        return mod;
-      },
-      // require
-      r(requireId) {
-        return self.__webpack_require__?.(`[${bundle}] ${requireId}`);
-      },
-      // value exports
-      v(value) {
-        if (typeof value === "function") {
-          exports.default = value((vid) => {
-            return self.__webpack_require__?.(`[${bundle}] ${vid}`);
-          });
-        } else {
-          moduleExports.exports = value;
-        }
-      },
-      // async module initializer
-      async a(mod) {
-        let result;
-        await mod(
-          () => {
-          },
-          (value) => result = value
         );
-        exports.default = result;
-      },
-      // async module loader
-      async A(Aid) {
-        const mod = self.__webpack_require__?.(`[${bundle}] ${Aid}`);
-        return mod.default(
-          (parentId) => self.__webpack_require__?.(`[${bundle}] ${parentId}`)
-        );
-      },
-      // chunk loader
-      l(url) {
-        const moduleInitIndex = allModules.indexOf(moduleInit);
-        if (moduleInitIndex !== -1) {
-          const scriptIndex = allModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
-          if (scriptIndex !== -1) {
-            const script = allModules[scriptIndex];
-            const scriptSrc = script.getAttribute("data-turbopack-src") || "";
-            const nextIndex = scriptSrc.indexOf("/_next");
-            const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
-            const bundleUrl = `[${bundle}] ${baseUrl}/_next/${url}`;
-            return self.__webpack_chunk_load__?.(bundleUrl, bundle);
-          }
-        }
-        throw new Error(
-          `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
+      }
+      try {
+        logDebug("WebpackAdapter", "Falling back to original webpack require");
+        return self.__original_webpack_require__(id);
+      } catch (originalError) {
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          { cause: originalError instanceof Error ? originalError : void 0 }
         );
-      },
-      // global
-      g: self.__remote_components_turbopack_global__[bundle],
-      m: moduleExports,
-      e: exports
-    },
-    moduleExports,
-    exports
-  );
-  if (self.__remote_components_turbopack_modules__[bundle][moduleId] !== moduleExports.exports) {
-    self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
-  }
-  return moduleExports.exports;
+      }
+    }
+  };
 }
 
 // src/shared/client/component-loader.ts
@@ -1102,6 +1180,18 @@ async function loadRemoteComponent({
       await loadScripts(scripts);
     }
     const hostShared = await shared;
+    logDebug(
+      "ComponentLoader",
+      `loadRemoteComponent: bundle="${bundle}", name="${name}"`
+    );
+    logDebug(
+      "ComponentLoader",
+      `Host shared modules available: ${Object.keys(hostShared)}`
+    );
+    logDebug(
+      "ComponentLoader",
+      `Remote shared modules requested: ${JSON.stringify(remoteShared)}`
+    );
     await setupWebpackRuntime(
       runtime,
       scripts,
@@ -1121,6 +1211,11 @@ async function loadRemoteComponent({
           (acc, [key, value]) => {
             if (typeof hostShared[value] !== "undefined") {
               acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
+            } else {
+              logDebug(
+                "ComponentLoader",
+                `Remote requests "${value}" but host doesn't provide it`
+              );
             }
             return acc;
           },
@@ -1136,6 +1231,11 @@ async function loadRemoteComponent({
         })
       );
       applySharedModules(bundle, resolve);
+    } else {
+      logWarn(
+        "ComponentLoader",
+        "No bundle specified, skipping shared module setup"
+      );
     }
     if (data.length > 0) {
       return await loadRSCComponent(rscName ?? name, data);
@@ -1453,7 +1553,7 @@ function RemoteComponent({
       });
       childrenRef.current = [];
     }
-    if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
+    if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
       const self = globalThis;
       const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
       let shadowRootElement = null;
@@ -1483,7 +1583,7 @@ function RemoteComponent({
       );
       if (resetStyles.length > 1) {
         resetStyles.forEach((style, index) => {
-          if (index > 0) {
+          if (index > 0 && style.getAttribute("data-remote-components-reset") !== "react") {
             style.remove();
           }
         });
@@ -1518,9 +1618,10 @@ function RemoteComponent({
             };
             const res = await fetch(url, fetchInit);
             if (!res.ok) {
-              let error = failedToFetchRemoteComponentError(url.href, {
-                cause: new Error(`${res.status} ${res.statusText}`)
-              });
+              let error = failedToFetchRemoteComponentError(
+                url.href,
+                res
+              );
               try {
                 const body = await res.text();
                 const parser2 = new DOMParser();
@@ -1841,7 +1942,7 @@ function RemoteComponent({
     route: data?.route || DEFAULT_ROUTE,
     runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
-  const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { "data-remote-components-reset": "", children: `:host { all: initial; }` }) : null;
+  const resetStyle = reset ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ (0, import_react2.createElement)(
     "link",
     {