fix(clerk-js): Handle undefined props when mounting UI components (#2748

)
clerk · Feb 7, 2024 · e883533 · e883533
1 parent 61ae895
commit e883533
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/.changeset/chatty-years-hope.md b/.changeset/chatty-years-hope.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/portal/index.tsx b/packages/clerk-js/src/ui/portal/index.tsx
@@ -13,17 +13,19 @@ type PortalProps<CtxType extends AvailableComponentCtx, PropsType = Omit<CtxType
   node: HTMLDivElement;
   component: React.FunctionComponent<PropsType> | React.ComponentClass<PropsType, any>;
   // Aligning this with props attributes of ComponentControls
-  props: PropsType & RoutingOptions;
+  props?: PropsType & RoutingOptions;
 } & Pick<CtxType, 'componentName'>;
 
 export class Portal<CtxType extends AvailableComponentCtx> extends React.PureComponent<PortalProps<CtxType>> {
   render(): React.ReactPortal {
     const { props, component, componentName, node } = this.props;
-    const normalizedProps = { ...props, ...normalizeRoutingOptions({ routing: props.routing, path: props.path }) };
+    const normalizedProps = { ...props, ...normalizeRoutingOptions({ routing: props?.routing, path: props?.path }) };
 
     const el = (
       <ComponentContext.Provider value={{ componentName: componentName, ...normalizedProps } as CtxType}>
-        <Suspense fallback={''}>{React.createElement(component, normalizedProps)}</Suspense>
+        <Suspense fallback={''}>
+          {React.createElement(component, normalizedProps as PortalProps<CtxType>['props'])}
+        </Suspense>
       </ComponentContext.Provider>
     );