remote-components 0.2.0 → 0.2.1

package/dist/host/nextjs/app/client-only.js

@@ -123,6 +123,11 @@ async function errorFromFailedFetch(originalUrl, resolvedUrl, res) {
   }
   return fallback;
 }
+function failedProxiedAssetError(kind, url, resolvedUrl) {
+  return new RemoteComponentsError(
+    `Failed to load ${kind} "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHostProxy middleware is configured, "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher, and the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+  );
+}
 function failedProxyFetchError(originalUrl, proxyUrl, status, responseBody) {
   if (status === 404) {
     return new RemoteComponentsError(
@@ -174,7 +179,7 @@ function warnCrossOriginFetchError(logLocation, url) {
     }
     logWarn(
       logLocation,
-      `Failed to fetch cross-origin resource "${parsed.href}". If this is a protected deployment, ensure withRemoteComponentsHostProxy middleware is configured in your host and that the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+      `Failed to fetch cross-origin resource "${parsed.href}". To load assets from a protected deployment, two steps are required: (1) configure withRemoteComponentsHostProxy middleware in your host with the remote URL in allowedProxyUrls, and (2) provide a resolveClientUrl prop that rewrites cross-origin asset URLs to go through the proxy. See: ${CORS_DOCS_URL}`
     );
   } catch {
   }
@@ -756,6 +761,7 @@ import * as ReactDOM from "react-dom";
 import * as ReactDOMClient from "react-dom/client";
 
 // src/config/webpack/apply-shared-modules.ts
+var DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
 function applySharedModules(bundle, resolve) {
   logDebug(
     "SharedModules",
@@ -799,13 +805,16 @@ function applySharedModules(bundle, resolve) {
         } else {
           logWarn(
             "SharedModules",
-            `webpackBundle.m is not available for bundle "${bundle}"`
+            `webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
           );
         }
       }
     }
   } else {
-    logWarn("SharedModules", `No webpack require found for bundle "${bundle}"`);
+    logWarn(
+      "SharedModules",
+      `No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+    );
     logDebug(
       "SharedModules",
       `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
@@ -991,9 +1000,6 @@ function createRSCStream(rscName, data) {
   });
 }
 
-// src/runtime/turbopack/chunk-loader.ts
-init_constants();
-
 // src/runtime/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__|[a-z])\.A\((?<sharedModuleId>[0-9]+)\)/;
@@ -1062,11 +1068,7 @@ function createChunkLoader(runtime, resolveClientUrl) {
       }).then(resolve).catch((error) => {
         const isProxied = isProxiedUrl(resolvedUrl);
         if (isProxied) {
-          reject(
-            new RemoteComponentsError(
-              `Failed to load chunk "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHostProxy middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
-            )
-          );
+          reject(failedProxiedAssetError("chunk", url, resolvedUrl));
         } else {
           warnCrossOriginFetchError("ChunkLoader", url);
           reject(error);
@@ -1444,6 +1446,7 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
 }
 
 // src/runtime/turbopack/shared-modules.ts
+var DEDUPLICATION_WARNING = "This module will not be deduplicated \u2014 the remote may load its own copy, which can cause duplicate instance errors (e.g. invalid hook calls if React is loaded twice).";
 async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
   const self = globalThis;
   self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
@@ -1494,7 +1497,7 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
             } else {
               logError(
                 "SharedModules",
-                `Host shared module "${module}" not found for ID ${id}`
+                `Host shared module "${module}" not found for ID ${id}. ${DEDUPLICATION_WARNING}`
               );
             }
           }
@@ -1511,7 +1514,7 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
         } else {
           logError(
             "SharedModules",
-            `Shared module "${module}" not found for "${bundle}"`
+            `Shared module "${module}" not found for "${bundle}". ${DEDUPLICATION_WARNING}`
           );
         }
       }
@@ -1659,7 +1662,6 @@ function createModuleRequire(runtime) {
 }
 
 // src/runtime/loaders/script-loader.ts
-init_constants();
 async function loadScripts(scripts, resolveClientUrl) {
   await Promise.all(
     scripts.map((script) => {
@@ -1675,11 +1677,7 @@ async function loadScripts(scripts, resolveClientUrl) {
         newScript.onerror = () => {
           const isProxied = isProxiedUrl(resolvedSrc);
           if (isProxied) {
-            reject(
-              new RemoteComponentsError(
-                `Failed to load script "${newSrc}" via proxy "${resolvedSrc}". Ensure withRemoteComponentsHostProxy middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
-              )
-            );
+            reject(failedProxiedAssetError("script", newSrc, resolvedSrc));
           } else {
             warnCrossOriginFetchError("ScriptLoader", newSrc);
             reject(