@peers-app/peers-ui 0.25.20 → 0.25.21

package/dist/ui-router/ui-loader.js

@@ -167,7 +167,7 @@ const UIRouter = (props) => {
     if (!matchingRoute) {
         return undefined;
     }
-    return UILoader({ peersUIId: matchingRoute.peersUIId, props: props.props });
+    return (0, jsx_runtime_1.jsx)(UILoader, { peersUIId: matchingRoute.peersUIId, props: props.props });
 };
 exports.UIRouter = UIRouter;
 const UILoader = (args) => {
@@ -177,22 +177,9 @@ const UILoader = (args) => {
     const { props, peersUIId } = args;
     const [lastReloadTime] = (0, hooks_1.useObservable)(globals_1.packageReloaded);
     props.__lastPackageReload = lastReloadTime;
-    // check if peersUIId maps to an in-memory react component
-    const peersUI = peersUIs[peersUIId];
-    if (peersUI?.content) {
-        const parseResult = peersUI.propsSchema.safeParse(props);
-        if (!parseResult.success) {
-            console.error("props did not match schema", {
-                props,
-                schema: peersUI.propsSchema,
-                errors: parseResult.error,
-            });
-            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("pre", { children: ["Peers UI could not be loaded ", (0, jsx_runtime_1.jsx)("br", {}), "peersUIId: ", peersUI.peersUIId, " ", (0, jsx_runtime_1.jsx)("br", {}), "Component name: ", peersUI.content?.name, " ", (0, jsx_runtime_1.jsx)("br", {}), "Props did not match schema ", (0, jsx_runtime_1.jsx)("br", {}), "Errors: ", JSON.stringify(parseResult.error, null, 2), " ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "Props ", JSON.stringify((0, peers_sdk_1.toJSON)(props), null, 2), (0, jsx_runtime_1.jsx)("br", {})] }) }));
-        }
-        const Component = peersUI.content;
-        return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ...args.props }) }));
-    }
-    return (0, jsx_runtime_1.jsx)(UIAsyncLoader, { peersUIId: peersUIId, props: props });
+    // Keep the same loader ancestor after the bundle enters the cache. Replacing it
+    // on a path change would unmount the screen before its navigation guard can run.
+    return (0, jsx_runtime_1.jsx)(UIAsyncLoader, { peersUIId: peersUIId, props: props }, peersUIId);
 };
 const uiLoadingPromises = {};
 // Check if we're running in a React Native WebView (has injectUIBundle available)
@@ -273,6 +260,7 @@ function loadUIBundle(pkg, forceRefresh) {
 }
 const UIAsyncLoader = (props) => {
     const { peersUIId } = props;
+    const peersUI = peersUIs[peersUIId];
     const [loaded, setLoaded] = react_1.default.useState(false);
     const [loadError, setLoadError] = react_1.default.useState(null);
     const allRoutes = _window.getPeersUIRoutes();
@@ -280,7 +268,7 @@ const UIAsyncLoader = (props) => {
     (0, hooks_1.useObservable)(routes_loader_1.allPackages);
     const pkg = (0, routes_loader_1.allPackages)().find((p) => p.packageId === uiPackageId);
     (0, react_1.useEffect)(() => {
-        if (!pkg)
+        if (!pkg || peersUIs[peersUIId]?.content)
             return;
         const pkgRef = pkg;
         setLoadError(null);
@@ -290,11 +278,11 @@ const UIAsyncLoader = (props) => {
             console.error(`Failed to load UI bundle for package ${pkgRef.name}:`, error);
             setLoadError(error);
         });
-    }, [pkg?.packageId, pkg?.name, pkg]);
-    if (!pkg) {
+    }, [peersUIId, pkg?.packageId, pkg?.name, pkg]);
+    if (!peersUI?.content && !pkg) {
         return (0, jsx_runtime_1.jsxs)("div", { children: ["Could not find package that owns peersUIId ", peersUIId] });
     }
-    if (loadError) {
+    if (!peersUI?.content && loadError) {
         return ((0, jsx_runtime_1.jsxs)("div", { style: {
                 padding: "20px",
                 border: "2px solid #ff6b6b",
@@ -303,7 +291,7 @@ const UIAsyncLoader = (props) => {
                 color: "#721c24",
                 fontFamily: "monospace",
                 margin: "10px 0",
-            }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Bundle Loading Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package ID:" }), " ", pkg.packageId] })] }), (0, jsx_runtime_1.jsxs)("details", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("summary", { style: { cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }, children: "Error Details" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Bundle Loading Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg?.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package ID:" }), " ", pkg?.packageId] })] }), (0, jsx_runtime_1.jsxs)("details", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("summary", { style: { cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }, children: "Error Details" }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 backgroundColor: "#fed7d7",
                                 padding: "10px",
                                 borderRadius: "4px",
@@ -328,16 +316,15 @@ const UIAsyncLoader = (props) => {
                         cursor: "pointer",
                     }, children: "Retry Loading" })] }));
     }
-    if (!loaded) {
+    if (!peersUI?.content && !loaded) {
         return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    const peersUI = peersUIs[peersUIId];
     if (peersUI?.content) {
-        const _props = { ...props, uiVar: undefined };
+        const _props = props.props;
         try {
             peersUI.propsSchema.parse(_props);
             const Component = peersUI.content;
-            return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, packageName: pkg.name, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ..._props }) }));
+            return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, packageName: pkg?.name, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ..._props }) }));
         }
         catch (parseError) {
             return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -348,7 +335,7 @@ const UIAsyncLoader = (props) => {
                     color: "#721c24",
                     fontFamily: "monospace",
                     margin: "10px 0",
-                }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Props Validation Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Component:" }), " ", peersUI.content?.name] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Props Validation Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg?.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Component:" }), " ", peersUI.content?.name] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                             backgroundColor: "#fed7d7",
                             padding: "10px",
                             borderRadius: "4px",

package/dist/ui-router/ui-loader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui-router/ui-loader.test.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const react_2 = require("react");
+const mockPackages = [];
+const mockGetFileContents = jest.fn();
+jest.mock("@peers-app/peers-sdk", () => ({
+    debounceByArgs: (fn) => fn,
+    getUserContext: () => new Promise(() => { }),
+    packagePrefsVar: () => Object.assign(() => ({}), { loadingPromise: Promise.resolve() }),
+    PackageVersions: () => ({ get: async () => ({ uiBundleFileId: "bundle" }) }),
+    rpcServerCalls: { getFileContents: (...args) => mockGetFileContents(...args) },
+}));
+jest.mock("../globals", () => ({ mainContentPath: () => "", packageReloaded: () => 0 }));
+jest.mock("../hooks", () => ({ useObservable: (value) => [value()] }));
+jest.mock("../ui-defaults", () => ({}));
+jest.mock("../components/loading-indicator", () => ({
+    LoadingIndicator: () => (0, jsx_runtime_1.jsx)("p", { children: "Loading bundle" }),
+}));
+jest.mock("./routes-loader", () => ({ allPackages: () => mockPackages }));
+const ui_loader_1 = require("./ui-loader");
+test.each([
+    false,
+    true,
+])("query changes retain screen state and props (preloaded: %s)", async (preloaded) => {
+    const packageId = `package-${preloaded}`;
+    const peersUIId = `ui-${preloaded}`;
+    const base = `package-nav/${packageId}/app`;
+    let path = `${base}?jobId=first`;
+    const listeners = new Set();
+    let mounts = 0;
+    let unmounts = 0;
+    function Content({ caller }) {
+        const [draft, setDraft] = (0, react_2.useState)("");
+        const currentPath = (0, react_2.useSyncExternalStore)((listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        }, () => path);
+        (0, react_2.useEffect)(() => {
+            mounts++;
+            return () => {
+                unmounts++;
+            };
+        }, []);
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: caller }), (0, jsx_runtime_1.jsx)("p", { children: currentPath }), (0, jsx_runtime_1.jsx)("input", { "aria-label": "Draft", value: draft, onChange: (event) => setDraft(event.target.value) })] }));
+    }
+    const schema = { parse: (value) => value, safeParse: () => ({ success: true }) };
+    const ui = { peersUIId, content: Content, propsSchema: schema };
+    const routeWindow = window;
+    routeWindow.registerPeersUIRoute({ packageId, peersUIId, path: base });
+    mockPackages.length = 0;
+    mockGetFileContents.mockReset();
+    let releaseBundle;
+    if (preloaded) {
+        await (0, ui_loader_1.registerInternalPeersUI)({ component: Content, peersUIId, propsSchema: schema });
+    }
+    else {
+        mockPackages.push({ packageId, name: "Test package", activePackageVersionId: "version" });
+        routeWindow.testUI = ui;
+        mockGetFileContents.mockImplementation(() => new Promise((resolve) => {
+            releaseBundle = resolve;
+        }));
+    }
+    const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(ui_loader_1.UIRouter, { path: path, props: { caller: "Caller props" } }));
+    if (!preloaded) {
+        expect(await react_1.screen.findByText("Loading bundle")).toBeInTheDocument();
+        await (0, react_1.act)(async () => {
+            releaseBundle("exportUIs({uis: [window.testUI]});");
+        });
+    }
+    expect(await react_1.screen.findByText("Caller props")).toBeInTheDocument();
+    react_1.fireEvent.change(react_1.screen.getByLabelText("Draft"), { target: { value: "Unsaved edits" } });
+    await (0, react_1.act)(async () => {
+        path = `${base}?jobId=second`;
+        for (const listener of listeners)
+            listener();
+        view.rerender((0, jsx_runtime_1.jsx)(ui_loader_1.UIRouter, { path: path, props: { caller: "Caller props" } }));
+    });
+    expect(react_1.screen.getByLabelText("Draft")).toHaveValue("Unsaved edits");
+    expect(react_1.screen.getByText(path)).toBeInTheDocument();
+    expect({ mounts, unmounts, loads: mockGetFileContents.mock.calls.length }).toEqual({
+        mounts: 1,
+        unmounts: 0,
+        loads: preloaded ? 0 : 1,
+    });
+    view.unmount();
+    delete routeWindow.testUI;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.25.20",
+  "version": "0.25.21",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -30,7 +30,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.25.20",
+    "@peers-app/peers-sdk": "^0.25.21",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -41,7 +41,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.25.20",
+    "@peers-app/peers-sdk": "0.25.21",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/ui-router/ui-loader.test.tsx

@@ -0,0 +1,108 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+const mockPackages: Record<string, unknown>[] = [];
+const mockGetFileContents = jest.fn();
+jest.mock("@peers-app/peers-sdk", () => ({
+  debounceByArgs: (fn: unknown) => fn,
+  getUserContext: () => new Promise(() => {}),
+  packagePrefsVar: () => Object.assign(() => ({}), { loadingPromise: Promise.resolve() }),
+  PackageVersions: () => ({ get: async () => ({ uiBundleFileId: "bundle" }) }),
+  rpcServerCalls: { getFileContents: (...args: unknown[]) => mockGetFileContents(...args) },
+}));
+jest.mock("../globals", () => ({ mainContentPath: () => "", packageReloaded: () => 0 }));
+jest.mock("../hooks", () => ({ useObservable: (value: () => unknown) => [value()] }));
+jest.mock("../ui-defaults", () => ({}));
+jest.mock("../components/loading-indicator", () => ({
+  LoadingIndicator: () => <p>Loading bundle</p>,
+}));
+jest.mock("./routes-loader", () => ({ allPackages: () => mockPackages }));
+
+import { registerInternalPeersUI, UIRouter } from "./ui-loader";
+
+test.each([
+  false,
+  true,
+])("query changes retain screen state and props (preloaded: %s)", async (preloaded) => {
+  const packageId = `package-${preloaded}`;
+  const peersUIId = `ui-${preloaded}`;
+  const base = `package-nav/${packageId}/app`;
+  let path = `${base}?jobId=first`;
+  const listeners = new Set<() => void>();
+  let mounts = 0;
+  let unmounts = 0;
+  function Content({ caller }: { caller: string }) {
+    const [draft, setDraft] = useState("");
+    const currentPath = useSyncExternalStore(
+      (listener) => {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      },
+      () => path,
+    );
+    useEffect(() => {
+      mounts++;
+      return () => {
+        unmounts++;
+      };
+    }, []);
+    return (
+      <>
+        <p>{caller}</p>
+        <p>{currentPath}</p>
+        <input
+          aria-label="Draft"
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+        />
+      </>
+    );
+  }
+  const schema = { parse: (value: unknown) => value, safeParse: () => ({ success: true }) };
+  const ui = { peersUIId, content: Content, propsSchema: schema };
+  const routeWindow = window as unknown as {
+    registerPeersUIRoute: (route: object) => void;
+    testUI?: object;
+  };
+  routeWindow.registerPeersUIRoute({ packageId, peersUIId, path: base });
+  mockPackages.length = 0;
+  mockGetFileContents.mockReset();
+  let releaseBundle!: (code: string) => void;
+  if (preloaded) {
+    await registerInternalPeersUI({ component: Content, peersUIId, propsSchema: schema });
+  } else {
+    mockPackages.push({ packageId, name: "Test package", activePackageVersionId: "version" });
+    routeWindow.testUI = ui;
+    mockGetFileContents.mockImplementation(
+      () =>
+        new Promise<string>((resolve) => {
+          releaseBundle = resolve;
+        }),
+    );
+  }
+  const view = render(<UIRouter path={path} props={{ caller: "Caller props" }} />);
+  if (!preloaded) {
+    expect(await screen.findByText("Loading bundle")).toBeInTheDocument();
+    await act(async () => {
+      releaseBundle("exportUIs({uis: [window.testUI]});");
+    });
+  }
+  expect(await screen.findByText("Caller props")).toBeInTheDocument();
+  fireEvent.change(screen.getByLabelText("Draft"), { target: { value: "Unsaved edits" } });
+  await act(async () => {
+    path = `${base}?jobId=second`;
+    for (const listener of listeners) listener();
+    view.rerender(<UIRouter path={path} props={{ caller: "Caller props" }} />);
+  });
+  expect(screen.getByLabelText("Draft")).toHaveValue("Unsaved edits");
+  expect(screen.getByText(path)).toBeInTheDocument();
+  expect({ mounts, unmounts, loads: mockGetFileContents.mock.calls.length }).toEqual({
+    mounts: 1,
+    unmounts: 0,
+    loads: preloaded ? 0 : 1,
+  });
+  view.unmount();
+  delete routeWindow.testUI;
+});

package/src/ui-router/ui-loader.tsx

@@ -239,7 +239,7 @@ export const UIRouter = (props: IProps) => {
     return undefined;
   }
 
-  return UILoader({ peersUIId: matchingRoute.peersUIId, props: props.props });
+  return <UILoader peersUIId={matchingRoute.peersUIId} props={props.props} />;
 };
 
 const UILoader = (args: { peersUIId: string; props?: Record<string, unknown> }) => {
@@ -249,40 +249,9 @@ const UILoader = (args: { peersUIId: string; props?: Record<string, unknown> })
   const { props, peersUIId } = args;
   const [lastReloadTime] = useObservable(packageReloaded);
   props.__lastPackageReload = lastReloadTime;
-  // check if peersUIId maps to an in-memory react component
-  const peersUI = peersUIs[peersUIId];
-  if (peersUI?.content) {
-    const parseResult = peersUI.propsSchema.safeParse(props);
-    if (!parseResult.success) {
-      console.error("props did not match schema", {
-        props,
-        schema: peersUI.propsSchema,
-        errors: parseResult.error,
-      });
-      return (
-        <div>
-          <pre>
-            Peers UI could not be loaded <br />
-            peersUIId: {peersUI.peersUIId} <br />
-            Component name: {peersUI.content?.name} <br />
-            Props did not match schema <br />
-            Errors: {JSON.stringify(parseResult.error, null, 2)} <br />
-            <br />
-            Props {JSON.stringify(toJSON(props), null, 2)}
-            <br />
-          </pre>
-        </div>
-      );
-    }
-    const Component = peersUI.content as React.ComponentType<Record<string, unknown>>;
-    return (
-      <UIErrorBoundary peersUIId={peersUIId} componentName={peersUI.content?.name}>
-        <Component {...args.props} />
-      </UIErrorBoundary>
-    );
-  }
-
-  return <UIAsyncLoader peersUIId={peersUIId} props={props} />;
+  // Keep the same loader ancestor after the bundle enters the cache. Replacing it
+  // on a path change would unmount the screen before its navigation guard can run.
+  return <UIAsyncLoader key={peersUIId} peersUIId={peersUIId} props={props} />;
 };
 
 const uiLoadingPromises: Record<string, Promise<void>> = {};
@@ -379,6 +348,7 @@ function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
 
 const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown> }) => {
   const { peersUIId } = props;
+  const peersUI = peersUIs[peersUIId];
   const [loaded, setLoaded] = React.useState(false);
   const [loadError, setLoadError] = React.useState<Error | null>(null);
 
@@ -389,7 +359,7 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
   const pkg = allPackages().find((p) => p.packageId === uiPackageId);
 
   useEffect(() => {
-    if (!pkg) return;
+    if (!pkg || peersUIs[peersUIId]?.content) return;
     const pkgRef = pkg;
     setLoadError(null);
     loadUIBundle(pkgRef)
@@ -398,13 +368,13 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
         console.error(`Failed to load UI bundle for package ${pkgRef.name}:`, error);
         setLoadError(error);
       });
-  }, [pkg?.packageId, pkg?.name, pkg]);
+  }, [peersUIId, pkg?.packageId, pkg?.name, pkg]);
 
-  if (!pkg) {
+  if (!peersUI?.content && !pkg) {
     return <div>Could not find package that owns peersUIId {peersUIId}</div>;
   }
 
-  if (loadError) {
+  if (!peersUI?.content && loadError) {
     return (
       <div
         style={{
@@ -423,10 +393,10 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
             <strong>Peers UI ID:</strong> {peersUIId}
           </div>
           <div>
-            <strong>Package:</strong> {pkg.name}
+            <strong>Package:</strong> {pkg?.name}
           </div>
           <div>
-            <strong>Package ID:</strong> {pkg.packageId}
+            <strong>Package ID:</strong> {pkg?.packageId}
           </div>
         </div>
 
@@ -484,20 +454,19 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
     );
   }
 
-  if (!loaded) {
+  if (!peersUI?.content && !loaded) {
     return <LoadingIndicator />;
   }
 
-  const peersUI = peersUIs[peersUIId];
   if (peersUI?.content) {
-    const _props = { ...props, uiVar: undefined };
+    const _props = props.props;
     try {
       peersUI.propsSchema.parse(_props);
       const Component = peersUI.content as React.ComponentType<Record<string, unknown>>;
       return (
         <UIErrorBoundary
           peersUIId={peersUIId}
-          packageName={pkg.name}
+          packageName={pkg?.name}
           componentName={peersUI.content?.name}
         >
           <Component {..._props} />
@@ -522,7 +491,7 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
               <strong>Peers UI ID:</strong> {peersUIId}
             </div>
             <div>
-              <strong>Package:</strong> {pkg.name}
+              <strong>Package:</strong> {pkg?.name}
             </div>
             <div>
               <strong>Component:</strong> {peersUI.content?.name}