remote-components 0.0.32 → 0.0.33

package/dist/{component-loader-e5513139.d.ts → component-loader-28ad0083.d.ts}

@@ -5,6 +5,7 @@ interface RemoteComponentMetadata {
     route: string;
     runtime: 'webpack' | 'turbopack';
     id: string;
+    type: 'nextjs' | 'unknown';
 }
 
 interface RemoteComponentProps {

package/dist/html/host.cjs

@@ -62,6 +62,32 @@ var init_shared_modules = __esm({
   }
 });
 
+// src/shared/error.ts
+function multipleRemoteComponentsError(url) {
+  return new Error(
+    `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) {
+  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)) }
+  );
+}
+var RemoteComponentsError;
+var init_error = __esm({
+  "src/shared/error.ts"() {
+    "use strict";
+    RemoteComponentsError = class extends Error {
+      constructor(message, options) {
+        super(message, options);
+        this.code = "REMOTE_COMPONENTS_ERROR";
+        this.name = "RemoteComponentsError";
+      }
+    };
+  }
+});
+
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
@@ -100,8 +126,8 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
     (key) => key.includes("/next/dist/client/page-loader.js")
   ) ?? ""] ?? -1;
   if (!(componentLoaderChunk && appLoaderChunk)) {
-    throw new Error(
-      `Next.js client pages loader not found in bundle "${bundle}"`
+    throw new RemoteComponentsError(
+      `Next.js client pages loader not found in bundle "${bundle}".`
     );
   }
   const __NEXT_P_ORIGINAL = self.__NEXT_P;
@@ -176,6 +202,7 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
 var init_next_client_pages_loader = __esm({
   "src/shared/webpack/next-client-pages-loader.ts"() {
     "use strict";
+    init_error();
   }
 });
 
@@ -334,11 +361,11 @@ async function handleTurbopackChunk(code, bundle, url) {
       scriptResolve(void 0);
       script.remove();
     };
-    script.onerror = (error) => {
+    script.onerror = () => {
       URL.revokeObjectURL(scriptUrl);
       scriptReject(
-        new Error(
-          `Failed to load script: ${error instanceof Error ? error.message : String(error)}`
+        new RemoteComponentsError(
+          `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
         )
       );
       script.remove();
@@ -380,11 +407,11 @@ function createModuleRequire(runtime) {
       if (bundle && moduleId) {
         return handleTurbopackModule(bundle, moduleId, id);
       }
-      throw new Error(`Module ${id} not found`);
+      throw new Error(`Module "${id}" not found.`);
     } catch (requireError) {
       if (typeof self.__original_webpack_require__ !== "function") {
-        throw new Error(
-          `Module ${id} not found in remote component bundle ${bundle}`,
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
           {
             cause: requireError instanceof Error ? requireError : void 0
           }
@@ -393,8 +420,8 @@ function createModuleRequire(runtime) {
       try {
         return self.__original_webpack_require__(id);
       } catch (originalError) {
-        throw new Error(
-          `Module ${id} not found in remote component bundle ${bundle}`,
+        throw new RemoteComponentsError(
+          `Module "${id}" not found in remote component bundle "${bundle}".`,
           { cause: originalError instanceof Error ? originalError : void 0 }
         );
       }
@@ -685,7 +712,9 @@ function handleTurbopackModule(bundle, moduleId, id) {
             return self.__webpack_chunk_load__?.(bundleUrl, bundle);
           }
         }
-        throw new Error(`Failed to load chunk ${url} for module ${id}`);
+        throw new Error(
+          `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
+        );
       },
       // global
       g: self.__remote_components_turbopack_global__[bundle],
@@ -703,6 +732,7 @@ function handleTurbopackModule(bundle, moduleId, id) {
 var init_webpack_adapter = __esm({
   "src/shared/client/webpack-adapter.ts"() {
     "use strict";
+    init_error();
     init_const();
   }
 });
@@ -924,10 +954,14 @@ async function webpackRuntime(bundle, shared, remoteShared) {
       const remoteBundle = match?.groups?.bundle;
       const id = match?.groups?.id;
       if (!(id && remoteBundle)) {
-        throw new Error(`Module not found: "${remoteId}"`);
+        throw new RemoteComponentsError(
+          `Remote Component module "${remoteId}" not found. Did you forget to wrap the Next.js config with \`withRemoteComponents\` on both host and remote?`
+        );
       }
       if (typeof self.__remote_webpack_require__?.[remoteBundle] !== "function") {
-        throw new Error(`Remote component loading error "${remoteBundle}"`);
+        throw new RemoteComponentsError(
+          `Remote Components are not available in "${remoteBundle}". Did you forget to wrap the Next.js config with \`withRemoteComponents\` on both host and remote?`
+        );
       }
       return self.__remote_webpack_require__[remoteBundle](id);
     };
@@ -949,8 +983,8 @@ async function webpackRuntime(bundle, shared, remoteShared) {
           };
           newScript.onerror = () => {
             reject(
-              new Error(
-                `Failed to load script ${script.src} for remote component`
+              new RemoteComponentsError(
+                `Failed to load <script src="${script.src}"> for Remote Component. Check the URL is correct.`
               )
             );
             newScript.remove();
@@ -1010,6 +1044,7 @@ async function webpackRuntime(bundle, shared, remoteShared) {
 var init_webpack = __esm({
   "src/html/host/runtime/webpack.ts"() {
     "use strict";
+    init_error();
     init_shared_modules();
     init_next_client_pages_loader();
     init_polyfill();
@@ -1087,8 +1122,12 @@ var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
 var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
 init_shared_modules();
 init_next_client_pages_loader();
+init_error();
 init_webpack_adapter();
 
+// src/shared/client/script-loader.ts
+init_error();
+
 // src/shared/client/rsc.ts
 var import_web_streams_polyfill = require("web-streams-polyfill");
 function fixPayload(payload) {
@@ -1158,6 +1197,7 @@ function createRSCStream(rscName, data) {
 // src/shared/client/remote-component.ts
 init_webpack_adapter();
 init_const();
+init_error();
 
 // src/html/host/index.tsx
 init_utils();
@@ -1237,7 +1277,11 @@ function applyOriginToNodes(doc, url) {
   }
 }
 
+// src/html/host/index.tsx
+init_error();
+
 // src/html/host/runtime/index.ts
+init_error();
 async function getRuntime(type, url, bundle, shared, remoteShared) {
   if (typeof globalThis.process === "undefined") {
     globalThis.process = {
@@ -1251,7 +1295,9 @@ async function getRuntime(type, url, bundle, shared, remoteShared) {
     const { turbopackRuntime: turbopackRuntime2 } = await Promise.resolve().then(() => (init_turbopack(), turbopack_exports));
     return turbopackRuntime2(url, bundle, shared, remoteShared);
   }
-  throw new Error(`Runtime ${type} is not supported`);
+  throw new RemoteComponentsError(
+    `Remote Components runtime "${type}" is not supported. Supported runtimes are "webpack" and "turbopack".`
+  );
 }
 
 // src/html/host/index.tsx
@@ -1276,9 +1322,6 @@ if (typeof HTMLElement !== "undefined") {
         if (this.getAttribute("src")) {
           this.load().catch((e) => {
             console.error(e);
-            throw new Error(
-              `Failed to load remote component: ${this.bundle ?? this.name ?? this.getAttribute("src")}`
-            );
           });
         }
       } else if (name === "mode" && oldValue !== newValue && this.root) {
@@ -1290,7 +1333,7 @@ if (typeof HTMLElement !== "undefined") {
         });
         this.root = newRoot;
         this.load().catch((e) => {
-          throw new Error(`Failed to load remote component: ${e}`);
+          console.error(e);
         });
       }
     }
@@ -1324,14 +1367,14 @@ if (typeof HTMLElement !== "undefined") {
       }
       if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
         this.load().catch((e) => {
-          throw new Error(`Failed to load remote component: ${e}`);
+          console.error(e);
         });
       }
       this.isLoading = true;
       const src = this.getAttribute("src");
       const remoteComponentChild = this.querySelector("div#__REMOTE_COMPONENT__") || this.querySelector("div[data-bundle][data-route]");
       if (!src && !remoteComponentChild) {
-        throw new Error("src attribute is required");
+        throw new RemoteComponentsError('"src" attribute is required');
       }
       let url = null;
       let html = this.innerHTML;
@@ -1349,14 +1392,41 @@ if (typeof HTMLElement !== "undefined") {
         };
         const res = await fetch(url, fetchInit);
         if (!res.ok) {
-          throw new Error(
-            `Failed to fetch remote component "${this.name}": ${res.status}`
-          );
+          let error = failedToFetchRemoteComponentError(url.href, {
+            cause: new Error(`${res.status} ${res.statusText}`)
+          });
+          try {
+            const body = await res.text();
+            const parser2 = new DOMParser();
+            const doc2 = parser2.parseFromString(body, "text/html");
+            const errorTemplate = doc2.querySelector(
+              "template[data-next-error-message]"
+            );
+            const errorMessage = errorTemplate?.getAttribute(
+              "data-next-error-message"
+            );
+            const errorStack = errorTemplate?.getAttribute(
+              "data-next-error-stack"
+            );
+            if (errorMessage) {
+              error = new RemoteComponentsError(errorMessage);
+              if (errorStack) {
+                error.stack = errorStack;
+              }
+            }
+          } catch {
+          }
+          throw error;
         }
         html = await res.text();
       }
       const parser = new DOMParser();
       const doc = parser.parseFromString(html, "text/html");
+      if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${this.name}"]`)) {
+        throw multipleRemoteComponentsError(
+          url?.href ?? (this.getAttribute("src") || "unknown")
+        );
+      }
       const component = doc.querySelector(`div[data-bundle][data-route][id^="${this.name}"]`) ?? // fallback to the first element with the data-bundle and data-route attributes when not using a named remote component
       doc.querySelector("div[data-bundle][data-route]") ?? // fallback to Next.js Pages Router
       doc.querySelector("div#__next");
@@ -1396,8 +1466,15 @@ if (typeof HTMLElement !== "undefined") {
       );
       const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
       remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);
+      if ("__remote_components_missing_shared__" in remoteShared) {
+        throw new RemoteComponentsError(
+          remoteShared.__remote_components_missing_shared__
+        );
+      }
       if (!component || !(rsc || nextData)) {
-        throw new Error(`Failed to find component with id "${this.name}"`);
+        throw new RemoteComponentsError(
+          `Remote Component not found on ${src}.${this.name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${this.name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
+        );
       }
       const removable = Array.from(this.childNodes);
       const links = doc.querySelectorAll("link[href]");
@@ -1415,8 +1492,8 @@ if (typeof HTMLElement !== "undefined") {
                 };
                 newLink.onerror = () => {
                   reject(
-                    new Error(
-                      `Failed to load link ${link.href} for remote component`
+                    new RemoteComponentsError(
+                      `Failed to load <link href="${link.href}"> for Remote Component. Check the URL is correct.`
                     )
                   );
                 };