From 07eb7de82a8409cbb8e34dcc83d5090159eb9f11 Mon Sep 17 00:00:00 2001
From: Vasily Strelyaev <Vasily.Strelyaev@devexpress.com>
Date: Wed, 15 Jan 2025 18:53:49 +0200
Subject: [PATCH] guard client API against SSR until CustConfComp optimizations
 are merged

---
 packages/devextreme-react/src/core/component-base.tsx     | 8 ++++++--
 packages/devextreme-react/src/core/nested-option.ts       | 2 +-
 packages/devextreme-react/src/core/use-option-scanning.ts | 6 +++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx
index 66e5a424cb9b..38cc8c65ce02 100644
--- 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
index 7f96c3a20333..9123eb311672 100644
--- 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
index 6da9395a6717..89a59e41838b 100644
--- 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]);