fix: guard client API against SSR until CustConfComp optimizations ar…

…e merged (#28730)
DevExpress · Jan 17, 2025 · b0004a2 · b0004a2
1 parent ddbbf78
commit b0004a2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx
@@ -95,7 +95,12 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
 
     const prevPropsRef = useRef<P & ComponentBaseProps>();
 
-    const templateContainer = useMemo(() => document.createElement('div'), []);
+    const templateContainer = useMemo(
+      () => (typeof document !== 'undefined'
+        ? document.createElement('div')
+        : undefined),
+      [],
+    );
 
     const [widgetConfig, context] = useOptionScanning(
       {
@@ -422,8 +427,8 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
     return (
       <RestoreTreeContext.Provider value={restoreTree}>
         <TemplateDiscoveryContext.Provider value={{ discoveryRendering: false }}>
-          {
-            createPortal(
+          { templateContainer
+            && createPortal(
               <TemplateDiscoveryContext.Provider value={{ discoveryRendering: true }}>
                 {_renderChildren()}
               </TemplateDiscoveryContext.Provider>,

diff --git a/packages/devextreme-react/src/core/nested-option.ts b/packages/devextreme-react/src/core/nested-option.ts
@@ -30,7 +30,7 @@ const NestedOption = function NestedOption<P>(
   const { children } = props;
   const { elementDescriptor, ...restProps } = props;
 
-  if (!elementDescriptor) {
+  if (!elementDescriptor || typeof document === 'undefined') {
     return null;
   }
 

diff --git a/packages/devextreme-react/src/core/use-option-scanning.ts b/packages/devextreme-react/src/core/use-option-scanning.ts
@@ -17,7 +17,7 @@ import { NestedOptionContext, NestedOptionContextContent } from './contexts';
 export function useOptionScanning(
   optionElement: IOptionElement,
   children: ReactNode,
-  templateContainer: HTMLDivElement,
+  templateContainer: HTMLDivElement | undefined,
   parentUpdateToken: symbol,
 ): [
     IConfigNode,
@@ -75,7 +75,12 @@ export function useOptionScanning(
   };
 
   useLayoutEffect(() => {
+    if (!templateContainer) {
+      return;
+    }
+
     const hasTemplateRendered = templateContainer.childNodes.length > 0;
+
     configBuilder.updateAnonymousTemplates(hasTemplateRendered);
   }, [parentUpdateToken]);