1.1.7 - fixes the build with a ModalTrigger ssr:false adjustment

Author: jimmylee

components/ModalStack.tsx

@@ -18,6 +18,11 @@ const ModalStack: React.FC<ModalStackProps> = () => {
       {modalStack.map((modalState, index) => {
         const { key, component: ModalComponent, props } = modalState;
 
+        if (!ModalComponent) {
+          console.warn(`ModalComponent is undefined for modal with key: ${key}`);
+          return null;
+        }
+
         const offsetFromLast = totalModals - 1 - index;
         const translateY = -offsetFromLast * 40;
         const blur = offsetFromLast * 1.1;

components/ModalTrigger.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import dynamic from 'next/dynamic';
 
 import { useModals } from '@components/page/ModalContext';
 
@@ -10,16 +11,28 @@ interface ModalTriggerProps {
   modalProps?: Record<string, any>;
 }
 
-function ModalTrigger({ children, modal, modalProps = {} }: ModalTriggerProps) {
+const ModalTriggerClient = dynamic(() => Promise.resolve(ModalTriggerImpl), {
+  ssr: false,
+});
+
+function ModalTriggerImpl({ children, modal, modalProps = {} }: ModalTriggerProps) {
   const { open } = useModals();
 
   const onHandleOpenModal = () => {
-    open(modal, modalProps);
+    if (modal && typeof modal === 'function') {
+      open(modal, modalProps);
+    } else {
+      console.warn('ModalTrigger: modal prop is not a valid component', modal);
+    }
   };
 
   return React.cloneElement(children, {
     onClick: onHandleOpenModal,
   });
 }
 
+function ModalTrigger(props: ModalTriggerProps) {
+  return <ModalTriggerClient {...props} />;
+}
+
 export default ModalTrigger;

components/page/ModalContext.tsx

@@ -20,6 +20,11 @@ export const ModalProvider: React.FC<{ children: React.ReactNode }> = ({ childre
   const [modalStack, setModalStack] = React.useState<ModalState<any>[]>([]);
 
   const open = <P,>(component: ModalComponent<P>, props: P): string => {
+    if (!component || typeof component !== 'function') {
+      console.error('ModalContext: Invalid component provided to open()', component);
+      return '';
+    }
+
     const key = `modal-${Date.now()}-${Math.random()}`;
 
     const newModal: ModalState<P> = { key, component, props };

package.json

@@ -5,7 +5,7 @@
     "node": ">=18"
   },
   "license": "MIT",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "scripts": {
     "dev": "next -p 10000",
     "build": "next build",