remote-components 0.0.32 → 0.0.33

package/dist/next/host/client/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { a as LoadRemoteComponentProps } from '../../../component-loader-e5513139.js';
+import { a as LoadRemoteComponentProps } from '../../../component-loader-28ad0083.js';
 
 declare module 'react/jsx-runtime' {
     namespace JSX {

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

@@ -48,6 +48,26 @@ function applySharedModules(bundle, resolve) {
   }
 }
 
+// src/shared/error.ts
+var RemoteComponentsError = class extends Error {
+  constructor(message, options) {
+    super(message, options);
+    this.code = "REMOTE_COMPONENTS_ERROR";
+    this.name = "RemoteComponentsError";
+  }
+};
+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)) }
+  );
+}
+
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
@@ -86,8 +106,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;
@@ -311,11 +331,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();
@@ -357,11 +377,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
           }
@@ -370,8 +390,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 }
         );
       }
@@ -662,7 +682,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],
@@ -694,8 +716,8 @@ async function loadScripts(scripts) {
         };
         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.`
             )
           );
         };
@@ -843,7 +865,10 @@ async function loadRemoteComponent({
   } catch (error) {
     return {
       component: null,
-      error: error instanceof Error ? error : new Error(String(error))
+      error: new RemoteComponentsError(
+        `Failed to load remote component "${name}".`,
+        { cause: error instanceof Error ? error : new Error(String(error)) }
+      )
     };
   }
 }
@@ -859,7 +884,9 @@ async function loadRSCComponent(rscName, data) {
     createFromReadableStream = _createFromReadableStream;
   }
   if (typeof createFromReadableStream !== "function") {
-    throw new Error("Failed to import react-server-dom-webpack");
+    throw new RemoteComponentsError(
+      'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'
+    );
   }
   const stream = createRSCStream(rscName, data);
   const component = createFromReadableStream(stream);
@@ -868,8 +895,8 @@ async function loadRSCComponent(rscName, data) {
 function loadNextPagesComponent(bundle, route, nextData, name, container) {
   const { Component, App } = nextClientPagesLoader(bundle, route, container);
   if (!Component) {
-    throw new Error(
-      `Remote component ${name} is trying to load the component for route ${route} but it is not available.`
+    throw new RemoteComponentsError(
+      `Remote Component "${name}" is trying to load the component for route "${route}" but it is not available.`
     );
   }
   const component = App ? React.createElement(App, { Component, ...nextData.props }) : React.createElement(Component, nextData.props);
@@ -1333,7 +1360,6 @@ function RemoteComponent({
     }
   }, [src]);
   useEffect(() => {
-    let mounted = true;
     if (src && src !== prevSrcRef.current) {
       prevSrcRef.current = src;
       startTransition(async () => {
@@ -1349,9 +1375,31 @@ function RemoteComponent({
             };
             const res = await fetch(url, fetchInit);
             if (!res.ok) {
-              throw new Error(
-                `Failed to fetch remote component "${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;
             }
             const remoteHtml = await res.text();
             htmlRef.current = remoteHtml;
@@ -1359,6 +1407,9 @@ function RemoteComponent({
           }
           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^="${name}"]`)) {
+            throw multipleRemoteComponentsError(url.href);
+          }
           const component = doc.querySelector(`div[data-bundle][data-route][id^="${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");
@@ -1380,7 +1431,9 @@ function RemoteComponent({
           const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
           remoteSharedEl?.remove();
           if (!component || !(rsc || nextData)) {
-            throw new Error(`Failed to find component with id "${remoteName}"`);
+            throw new RemoteComponentsError(
+              `Remote Component not found on ${url.href}.${remoteName !== "__vercel_remote_component" ? `The name for the <RemoteComponent> is "${remoteName}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
+            );
           }
           applyOriginToNodes(doc, url);
           const links = Array.from(
@@ -1472,6 +1525,15 @@ function RemoteComponent({
           };
           componentHydrationHtml.current = Array.from(doc.querySelectorAll("link,style")).map((link) => link.outerHTML).join("") + component.innerHTML;
           const userShared = await shared;
+          if ("__remote_components_missing_shared__" in userShared) {
+            userShared.__remote_components_missing_shared__().catch((e) => {
+              throw e;
+            });
+          } else if ("__remote_components_missing_shared__" in remoteShared) {
+            throw new RemoteComponentsError(
+              remoteShared.__remote_components_missing_shared__
+            );
+          }
           const result = await loadRemoteComponent({
             url: new URL(url, location.origin),
             name: remoteName,
@@ -1516,15 +1578,10 @@ function RemoteComponent({
             setRemoteComponent(result.component);
           }
         } catch (error) {
-          if (mounted) {
-            setRemoteComponent(error);
-          }
+          setRemoteComponent(error);
         }
       });
     }
-    return () => {
-      mounted = false;
-    };
   }, [
     url,
     src,
@@ -1703,7 +1760,7 @@ var routerImpl = async () => {
 import { jsx as jsx4 } from "react/jsx-runtime";
 async function tryImportShared() {
   try {
-    const { shared } = await import("@remote-components/shared/host/app");
+    const { shared } = await import("remote-components/shared/host/app");
     return shared;
   } catch {
     return {};