diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx index 66e5a424cb9..38cc8c65ce0 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( const prevPropsRef = useRef

(); - 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( return ( - { + { templateContainer && createPortal( {_renderChildren()} diff --git a/packages/devextreme-react/src/core/nested-option.ts b/packages/devextreme-react/src/core/nested-option.ts index 7f96c3a2033..9123eb31167 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

( 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 6da9395a671..89a59e41838 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]);