guard client API against SSR until CustConfComp optimizations are merged

DevExpress · Jan 15, 2025 · 07eb7de · 07eb7de
1 parent dbecbe0
commit 07eb7de
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx
@@ -95,7 +95,11 @@ 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,7 +426,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
     return (
       <RestoreTreeContext.Provider value={restoreTree}>
         <TemplateDiscoveryContext.Provider value={{ discoveryRendering: false }}>
-          {
+          { templateContainer &&
             createPortal(
               <TemplateDiscoveryContext.Provider value={{ discoveryRendering: true }}>
                 {_renderChildren()}

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,11 @@ export function useOptionScanning(
   };
 
   useLayoutEffect(() => {
+    if (!templateContainer)
+      return;
+
     const hasTemplateRendered = templateContainer.childNodes.length > 0;
+
     configBuilder.updateAnonymousTemplates(hasTemplateRendered);
   }, [parentUpdateToken]);