From 8fabef3a479b7a8dacaaa4b04d9c2c17d5965608 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 11 Feb 2020 15:35:20 +0100 Subject: [PATCH] Fix Tooltip component for server side rendering (#2265) Co-authored-by: Mell --- packages/react-components/src/Tooltip.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx index 217704a916..e3fea02c80 100644 --- a/packages/react-components/src/Tooltip.tsx +++ b/packages/react-components/src/Tooltip.tsx @@ -11,7 +11,9 @@ import styled from 'styled-components'; import { classes } from './util'; -const rootElement = document.getElementById('tooltips'); +const rootElement = typeof document === 'undefined' + ? null // This hack is required for server side renreding + : document.getElementById('tooltips'); interface Props extends BareProps { dataFor?: string; @@ -28,7 +30,11 @@ interface Props extends BareProps { } function Tooltip ({ className, effect = 'solid', offset, place = 'bottom', text, trigger }: Props): React.ReactElement | null { - const [tooltipContainer] = useState(document.createElement('div')); + const defaultTooltipContainer = typeof document === 'undefined' + ? {} as HTMLElement // This hack is required for server side renreding + : document.createElement('div'); + + const [tooltipContainer] = useState(defaultTooltipContainer); useEffect((): () => void => { if (rootElement !== null) {