chore: revert upgrade react 18

frontend/src/exporter/index.tsx

@@ -1,6 +1,6 @@
 import '~/styles'
 import './Exporter.scss'
-import { createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom'
 import { loadPostHogJS } from '~/loadPostHogJS'
 import { initKea } from '~/initKea'
 import { Exporter } from '~/exporter/Exporter'
@@ -20,10 +20,11 @@ const exportedData: ExportedData = window.POSTHOG_EXPORTED_DATA
 function renderApp(): void {
     const root = document.getElementById('root')
     if (root) {
-        createRoot(root).render(
+        ReactDOM.render(
             <ErrorBoundary>
                 <Exporter {...exportedData} />
-            </ErrorBoundary>
+            </ErrorBoundary>,
+            root
         )
     } else {
         console.error('Attempted, but could not render PostHog app because <div id="root" /> is not found.')

frontend/src/index.tsx

@@ -1,6 +1,6 @@
 import '~/styles'
 
-import { createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom'
 import { getContext } from 'kea'
 
 import { App } from 'scenes/App'
@@ -28,12 +28,13 @@ if (typeof window !== 'undefined') {
 function renderApp(): void {
     const root = document.getElementById('root')
     if (root) {
-        createRoot(root).render(
+        ReactDOM.render(
             <ErrorBoundary>
                 <PostHogProvider client={posthog}>
                     <App />
                 </PostHogProvider>
-            </ErrorBoundary>
+            </ErrorBoundary>,
+            root
         )
     } else {
         console.error('Attempted, but could not render PostHog app because <div id="root" /> is not found.')

frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useRef, useState } from 'react'
 import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
 import { LemonModal, LemonModalProps } from 'lib/lemon-ui/LemonModal'
-import { createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom'
 import { useValues } from 'kea'
 import { router } from 'kea-router'
 
@@ -86,15 +86,14 @@ export function LemonDialog({
 
 LemonDialog.open = (props: LemonDialogProps) => {
     const div = document.createElement('div')
-    const root = createRoot(div)
     function destroy(): void {
-        root.unmount()
-        if (div.parentNode) {
+        const unmountResult = ReactDOM.unmountComponentAtNode(div)
+        if (unmountResult && div.parentNode) {
             div.parentNode.removeChild(div)
         }
     }
 
     document.body.appendChild(div)
-    root.render(<LemonDialog {...props} onAfterClose={destroy} />)
+    ReactDOM.render(<LemonDialog {...props} onAfterClose={destroy} />, div)
     return
 }

frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactNode, useCallback, useMemo } from 'react'
+import React, { FunctionComponent, useCallback, useMemo } from 'react'
 import { LemonButton, LemonButtonProps } from '../LemonButton'
 import { TooltipProps } from '../Tooltip'
 import { TooltipPlacement } from 'antd/lib/tooltip'
@@ -256,7 +256,7 @@ const LemonMenuItemButton: FunctionComponent<LemonMenuItemButtonProps & React.Re
                     size={size}
                     {...buttonProps}
                 >
-                    {label as ReactNode}
+                    {label as string | JSX.Element}
                     {keyboardShortcut && (
                         <div className="-mr-0.5 inline-flex grow justify-end">
                             {/* Show the keyboard shortcut on the right */}

frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.tsx

@@ -1,4 +1,4 @@
-import { createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom'
 import { Placement } from '@floating-ui/react'
 import { kea, path, actions, reducers, listeners, selectors, connect, afterMount, beforeUnmount } from 'kea'
 import type { inAppPromptLogicType } from './inAppPromptLogicType'
@@ -125,10 +125,9 @@ function cancellableTooltipWithRetries(
     const close = (): number => window.setTimeout(trigger, 1)
     const show = new Promise((resolve, reject) => {
         const div = document.createElement('div')
-        const root = createRoot(div)
         function destroy(): void {
-            root.unmount()
-            if (div.parentNode) {
+            const unmountResult = ReactDOM.unmountComponentAtNode(div)
+            if (unmountResult && div.parentNode) {
                 div.parentNode.removeChild(div)
             }
         }
@@ -183,7 +182,7 @@ function cancellableTooltipWithRetries(
                     props = { ...props, element }
                 }
 
-                root.render(<LemonActionableTooltip {...props} />)
+                ReactDOM.render(<LemonActionableTooltip {...props} />, div)
 
                 resolve(true)
             } catch (e) {

frontend/src/lib/logic/promptLogic.tsx

@@ -1,4 +1,4 @@
-import { createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom'
 import { kea, props, path, key, actions, events, listeners } from 'kea'
 import { Modal, ModalProps, Input, InputProps, Form, FormItemProps } from 'antd'
 
@@ -118,13 +118,12 @@ export function cancellablePrompt(config: Pick<PromptProps, 'title' | 'placehold
     }
     const promise = new Promise((resolve, reject) => {
         const div = document.createElement('div')
-        const root = createRoot(div)
         document.body.appendChild(div)
         let currentConfig: PromptProps = { ...config, close, visible: true } as any
 
         function destroy(value: unknown): void {
-            root.unmount()
-            if (div.parentNode) {
+            const unmountResult = ReactDOM.unmountComponentAtNode(div)
+            if (unmountResult && div.parentNode) {
                 div.parentNode.removeChild(div)
             }
             if (typeof value === 'string') {
@@ -135,7 +134,7 @@ export function cancellablePrompt(config: Pick<PromptProps, 'title' | 'placehold
         }
 
         function render(props: PromptProps): void {
-            root.render(<Prompt {...props} />)
+            ReactDOM.render(<Prompt {...props} />, div)
         }
 
         function close(this: PromptProps, value: string): void {

frontend/src/scenes/funnels/useFunnelTooltip.tsx

@@ -1,12 +1,13 @@
 import { useValues } from 'kea'
 import { useEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
 import { FunnelStepWithConversionMetrics } from '~/types'
 import { LemonRow } from 'lib/lemon-ui/LemonRow'
 import { Lettermark, LettermarkColor } from 'lib/lemon-ui/Lettermark'
 import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
 import { getActionFilterFromFunnelStep } from 'scenes/insights/views/Funnels/funnelStepTableUtils'
 import { humanFriendlyDuration, humanFriendlyNumber, percentage } from 'lib/utils'
-import { ensureTooltip } from 'scenes/insights/views/LineGraph/LineGraph'
+import { ensureTooltipElement } from 'scenes/insights/views/LineGraph/LineGraph'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { cohortsModel } from '~/models/cohortsModel'
 import { ClickToInspectActors } from 'scenes/insights/InsightTooltip/InsightTooltip'
@@ -108,14 +109,14 @@ export function useFunnelTooltip(showPersonsModal: boolean): React.RefObject<HTM
 
     useEffect(() => {
         const svgRect = vizRef.current?.getBoundingClientRect()
-        const [tooltipRoot, tooltipEl] = ensureTooltip()
+        const tooltipEl = ensureTooltipElement()
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
         if (isTooltipShown) {
             tooltipEl.style.display = 'initial'
         }
         const tooltipRect = tooltipEl.getBoundingClientRect()
         if (tooltipOrigin) {
-            tooltipRoot.render(
+            ReactDOM.render(
                 <>
                     {currentTooltip && (
                         <FunnelTooltip
@@ -126,7 +127,8 @@ export function useFunnelTooltip(showPersonsModal: boolean): React.RefObject<HTM
                             breakdownFilter={breakdown}
                         />
                     )}
-                </>
+                </>,
+                tooltipEl
             )
             // Put the tooltip to the bottom right of the cursor, but flip to left if tooltip doesn't fit
             let xOffset: number

frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx

@@ -1,13 +1,15 @@
 import { useValues } from 'kea'
 import { useLayoutEffect, useRef, useState } from 'react'
+import ReactDOM from 'react-dom'
+import Textfit from './Textfit'
 import clsx from 'clsx'
 
 import { insightLogic } from '../../insightLogic'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 import { ChartParams, TrendResult } from '~/types'
 import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
-import { ensureTooltip } from '../LineGraph/LineGraph'
+import { ensureTooltipElement } from '../LineGraph/LineGraph'
 import { groupsModel } from '~/models/groupsModel'
 import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
 import { IconFlare, IconTrendingDown, IconTrendingFlat, IconTrendingUp } from 'lib/lemon-ui/icons'
@@ -18,8 +20,6 @@ import { openPersonsModal } from 'scenes/trends/persons-modal/PersonsModal'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 
 import './BoldNumber.scss'
-import { useEffect } from 'react'
-import Textfit from './Textfit'
 
 /** The tooltip is offset by a few pixels from the cursor to give it some breathing room. */
 const BOLD_NUMBER_TOOLTIP_OFFSET_PX = 8
@@ -37,18 +37,17 @@ function useBoldNumberTooltip({
 
     const divRef = useRef<HTMLDivElement>(null)
 
-    const divRect = divRef.current?.getBoundingClientRect()
-    const [tooltipRoot, tooltipEl] = ensureTooltip()
-
     useLayoutEffect(() => {
+        const divRect = divRef.current?.getBoundingClientRect()
+        const tooltipEl = ensureTooltipElement()
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
         if (isTooltipShown) {
             tooltipEl.style.display = 'initial'
         }
 
         const seriesResult = insightData?.result?.[0]
 
-        tooltipRoot.render(
+        ReactDOM.render(
             <InsightTooltip
                 renderCount={(value: number) => <>{formatAggregationAxisValue(trendsFilter, value)}</>}
                 seriesData={[
@@ -65,20 +64,20 @@ function useBoldNumberTooltip({
                 hideColorCol
                 hideInspectActorsSection={!showPersonsModal}
                 groupTypeLabel={aggregationLabel(series?.[0].math_group_type_index).plural}
-            />
+            />,
+            tooltipEl,
+            () => {
+                const tooltipRect = tooltipEl.getBoundingClientRect()
+                if (divRect) {
+                    const desiredTop = window.scrollY + divRect.top - tooltipRect.height - BOLD_NUMBER_TOOLTIP_OFFSET_PX
+                    const desiredLeft = divRect.left + divRect.width / 2 - tooltipRect.width / 2
+                    tooltipEl.style.top = `${Math.min(desiredTop, window.innerHeight)}px`
+                    tooltipEl.style.left = `${Math.min(desiredLeft, window.innerWidth)}px`
+                }
+            }
         )
     }, [isTooltipShown])
 
-    useEffect(() => {
-        const tooltipRect = tooltipEl.getBoundingClientRect()
-        if (divRect) {
-            const desiredTop = window.scrollY + divRect.top - tooltipRect.height - BOLD_NUMBER_TOOLTIP_OFFSET_PX
-            const desiredLeft = divRect.left + divRect.width / 2 - tooltipRect.width / 2
-            tooltipEl.style.top = `${Math.min(desiredTop, window.innerHeight)}px`
-            tooltipEl.style.left = `${Math.min(desiredLeft, window.innerWidth)}px`
-        }
-    })
-
     return divRef
 }
 

frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { Root, createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom'
 import { useValues } from 'kea'
 import {
     ActiveElement,
@@ -38,23 +38,16 @@ import { TrendsFilter } from '~/queries/schema'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import ChartjsPluginStacked100, { ExtendedChartData } from 'chartjs-plugin-stacked100'
 
-let tooltipRoot: Root
-
-export function ensureTooltip(): [Root, HTMLElement] {
+export function ensureTooltipElement(): HTMLElement {
     let tooltipEl = document.getElementById('InsightTooltipWrapper')
-
-    if (!tooltipEl || !tooltipRoot) {
-        if (!tooltipEl) {
-            tooltipEl = document.createElement('div')
-            tooltipEl.id = 'InsightTooltipWrapper'
-            tooltipEl.classList.add('InsightTooltipWrapper')
-            tooltipEl.style.display = 'none'
-            document.body.appendChild(tooltipEl)
-        }
-
-        tooltipRoot = createRoot(tooltipEl)
+    if (!tooltipEl) {
+        tooltipEl = document.createElement('div')
+        tooltipEl.id = 'InsightTooltipWrapper'
+        tooltipEl.classList.add('InsightTooltipWrapper')
+        tooltipEl.style.display = 'none'
+        document.body.appendChild(tooltipEl)
     }
-    return [tooltipRoot, tooltipEl]
+    return tooltipEl
 }
 
 function truncateString(str: string, num: number): string {
@@ -448,7 +441,7 @@ export function LineGraph_({
                             return
                         }
 
-                        const [tooltipRoot, tooltipEl] = ensureTooltip()
+                        const tooltipEl = ensureTooltipElement()
                         if (tooltip.opacity === 0) {
                             tooltipEl.style.opacity = '0'
                             return
@@ -475,7 +468,7 @@ export function LineGraph_({
                                 )
                             })
 
-                            tooltipRoot.render(
+                            ReactDOM.render(
                                 <InsightTooltip
                                     date={dataset?.days?.[tooltip.dataPoints?.[0]?.dataIndex]}
                                     timezone={timezone}
@@ -531,7 +524,8 @@ export function LineGraph_({
                                             : aggregationLabel(labelGroupType).plural
                                     }
                                     {...tooltipConfig}
-                                />
+                                />,
+                                tooltipEl
                             )
                         }
 

frontend/src/scenes/insights/views/LineGraph/PieChart.tsx

@@ -15,12 +15,13 @@ import { areObjectValuesEmpty } from '~/lib/utils'
 import { GraphType } from '~/types'
 import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
 import {
-    ensureTooltip,
+    ensureTooltipElement,
     filterNestedDataset,
     LineGraphProps,
     onChartClick,
     onChartHover,
 } from 'scenes/insights/views/LineGraph/LineGraph'
+import ReactDOM from 'react-dom'
 import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
 import { useActions, useValues } from 'kea'
 import { groupsModel } from '~/models/groupsModel'
@@ -176,7 +177,7 @@ export function PieChart({
                                 return
                             }
 
-                            const [tooltipRoot, tooltipEl] = ensureTooltip()
+                            const tooltipEl = ensureTooltipElement()
                             if (tooltip.opacity === 0) {
                                 // remove highlight from the legend
                                 if (trendsFilter?.show_legend) {
@@ -203,7 +204,7 @@ export function PieChart({
 
                                 highlightSeries(seriesData[0].dataIndex)
 
-                                tooltipRoot.render(
+                                ReactDOM.render(
                                     <InsightTooltip
                                         seriesData={seriesData}
                                         hideColorCol={!!tooltipConfig?.hideColorCol}
@@ -249,7 +250,8 @@ export function PieChart({
                                                 : aggregationLabel(labelGroupType).plural
                                         }
                                         {...tooltipConfig}
-                                    />
+                                    />,
+                                    tooltipEl
                                 )
                             }