chore: Bump react dev dep, and move more things to catalog (#2707)

robbie-c · web-flow · commit ab42a12033d0 · 2025-12-08T15:00:33.000+01:00
* Bump react dev dep, and move more things to catalog

* Fix leaking react deps into react-native package

* Add JSX to import

* Fix

* Fix

* Fix

* Fix

* Stack trace size can vary

* Fix

* Add eslint ignore

* Use consistent babel versions
diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -56,13 +56,13 @@
         "web-vitals": "^4.2.4"
     },
     "devDependencies": {
-        "@babel/core": "7.27.1",
-        "@babel/plugin-syntax-decorators": "^7.27.1",
-        "@babel/plugin-transform-exponentiation-operator": "^7.27.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
-        "@babel/plugin-transform-react-jsx": "^7.27.1",
-        "@babel/preset-env": "7.27.2",
-        "@babel/preset-typescript": "^7.27.1",
+        "@babel/core": "catalog:",
+        "@babel/plugin-syntax-decorators": "catalog:",
+        "@babel/plugin-transform-exponentiation-operator": "catalog:",
+        "@babel/plugin-transform-nullish-coalescing-operator": "catalog:",
+        "@babel/plugin-transform-react-jsx": "catalog:",
+        "@babel/preset-env": "catalog:",
+        "@babel/preset-typescript": "catalog:",
         "@jest/globals": "^29.7.0",
         "@playwright/test": "^1.52.0",
         "@posthog-tooling/rollup-utils": "workspace:*",
@@ -79,11 +79,11 @@
         "@rrweb/rrweb-plugin-console-record": "2.0.0-alpha.17",
         "@rrweb/types": "2.0.0-alpha.17",
         "@sentry/types": "8.7.0",
-        "@testing-library/dom": "^9.3.0",
-        "@testing-library/jest-dom": "^6.5.0",
-        "@testing-library/preact": "^3.2.4",
+        "@testing-library/dom": "catalog:",
+        "@testing-library/jest-dom": "catalog:",
+        "@testing-library/preact": "catalog:",
         "@types/dotenv": "^8.2.3",
-        "@types/jest": "^29.5.12",
+        "@types/jest": "catalog:",
         "@types/node": "^22.5.0",
         "@types/sinon": "^17.0.1",
         "@types/web": "^0.0.222",
@@ -98,8 +98,8 @@
         "http-server": "14.1.1",
         "husky": "^8.0.1",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
+        "jest": "catalog:",
+        "jest-environment-jsdom": "catalog:",
         "jsdom": "16.7.0",
         "jsdom-global": "3.0.2",
         "localStorage": "1.0.4",
@@ -110,7 +110,7 @@
         "postcss-nesting": "^13.0.1",
         "posthog-js": "link:",
         "preact-render-to-string": "^6.3.1",
-        "rollup": "^4.50.0",
+        "rollup": "catalog:",
         "rollup-plugin-dts": "^6.2.3",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-visualizer": "^6.0.3",
diff --git a/packages/react-native/src/surveys/icons.tsx b/packages/react-native/src/surveys/icons.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import { Path, Svg, SvgProps } from 'react-native-svg'
 
 export const SatisfiedEmoji = (props: SvgProps): JSX.Element => (
diff --git a/packages/react-native/tsconfig.json b/packages/react-native/tsconfig.json
@@ -14,7 +14,11 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "ES2018"
+    "target": "ES2018",
+    "paths": {
+      "react": ["./node_modules/@types/react"],
+      "react-native": ["./node_modules/react-native"]
+    }
   },
   "include": ["index.ts", "src/**/*.ts", "src/**/*.tsx"]
 }
diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js
@@ -1,3 +1,7 @@
 module.exports = {
-    presets: [['@babel/preset-env', { targets: { node: '18.0' } }], '@babel/preset-typescript', '@babel/preset-react'],
+    presets: [
+        ['@babel/preset-env', { targets: { node: '18.0' } }],
+        ['@babel/preset-typescript', { allowDeclareFields: true }],
+        '@babel/preset-react',
+    ],
 }
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -39,22 +39,22 @@
         }
     },
     "devDependencies": {
-        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-react": "catalog:",
         "@posthog-tooling/rollup-utils": "workspace:*",
         "@rollup/plugin-inject": "^4.0.2",
         "@rollup/plugin-replace": "^2.3.4",
-        "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^11.2.2",
-        "@testing-library/react-hooks": "^8.0.1",
-        "@types/react": "^17.0.0",
+        "@testing-library/dom": "catalog:",
+        "@testing-library/jest-dom": "catalog:",
+        "@testing-library/react": "catalog:",
+        "@types/react": "catalog:",
         "@types/jest": "catalog:",
         "cross-env": "^7.0.3",
         "jest": "catalog:",
         "jest-environment-jsdom": "catalog:",
         "posthog-js": "workspace:*",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1",
-        "react-test-renderer": "^17.0.1",
+        "react": "catalog:",
+        "react-dom": "catalog:",
+        "react-test-renderer": "catalog:",
         "rollup": "^2.35.1",
         "rollup-plugin-copy": "^3.5.0",
         "tslib": "catalog:",
diff --git a/packages/react/src/components/PostHogCaptureOnViewed.tsx b/packages/react/src/components/PostHogCaptureOnViewed.tsx
@@ -1,4 +1,4 @@
-import React, { Children, useCallback, useRef } from 'react'
+import React, { Children, useCallback, useRef, JSX } from 'react'
 import { usePostHog } from '../hooks'
 import { VisibilityAndClickTracker } from './internal/VisibilityAndClickTracker'
 
diff --git a/packages/react/src/components/PostHogErrorBoundary.tsx b/packages/react/src/components/PostHogErrorBoundary.tsx
@@ -35,6 +35,7 @@ export const __POSTHOG_ERROR_MESSAGES = {
 
 export class PostHogErrorBoundary extends React.Component<PostHogErrorBoundaryProps, PostHogErrorBoundaryState> {
     static contextType = PostHogContext
+    declare context: React.ContextType<typeof PostHogContext>
 
     constructor(props: PostHogErrorBoundaryProps) {
         super(props)
@@ -56,7 +57,7 @@ export class PostHogErrorBoundary extends React.Component<PostHogErrorBoundaryPr
         const { componentStack } = errorInfo
         this.setState({
             error,
-            componentStack,
+            componentStack: componentStack ?? null,
             exceptionEvent,
         })
     }
diff --git a/packages/react/src/components/PostHogFeature.tsx b/packages/react/src/components/PostHogFeature.tsx
@@ -1,10 +1,10 @@
 import { useFeatureFlagPayload, useFeatureFlagVariantKey, usePostHog } from '../hooks'
-import React from 'react'
+import React, { JSX } from 'react'
 import { PostHog } from '../context'
 import { isFunction, isUndefined } from '../utils/type-utils'
 import { VisibilityAndClickTrackers } from './internal/VisibilityAndClickTrackers'
 
-export type PostHogFeatureProps = React.HTMLProps<HTMLDivElement> & {
+export type PostHogFeatureProps = Omit<React.HTMLProps<HTMLDivElement>, 'children'> & {
     flag: string
     children: React.ReactNode | ((payload: any) => React.ReactNode)
     fallback?: React.ReactNode
diff --git a/packages/react/src/components/__tests__/PostHogErrorBoundary.test.tsx b/packages/react/src/components/__tests__/PostHogErrorBoundary.test.tsx
@@ -17,7 +17,8 @@ describe('PostHogErrorBoundary component', () => {
         const { container } = renderWithError({ message: 'Test error', fallback: <div></div> })
         expect(posthog.captureException).toHaveBeenCalledWith(new Error('Test error'), undefined)
         expect(container.innerHTML).toBe('<div></div>')
-        expect(console.error).toHaveBeenCalledTimes(2)
+        expect(console.error).toHaveBeenCalledTimes(1)
+        expect((console.error as any).mock.calls[0][1].message).toEqual('Test error')
     })
 
     it('should warn user when fallback is null', () => {
@@ -72,7 +73,7 @@ describe('captureException processing', () => {
         const exceptionList = captureCalls[0][1].$exception_list
         expect(exceptionList.length).toBe(1)
         const stacktrace = exceptionList[0].stacktrace
-        expect(stacktrace.frames.length).toBe(44)
+        expect(stacktrace.frames.length).toBeGreaterThan(20)
     })
 })
 
diff --git a/packages/react/src/components/internal/VisibilityAndClickTracker.tsx b/packages/react/src/components/internal/VisibilityAndClickTracker.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useEffect, useMemo, useRef } from 'react'
+import React, { MouseEventHandler, useEffect, useMemo, useRef, JSX } from 'react'
 import { isNull } from '../../utils/type-utils'
 
 /**
diff --git a/packages/react/src/components/internal/VisibilityAndClickTrackers.tsx b/packages/react/src/components/internal/VisibilityAndClickTrackers.tsx
@@ -1,4 +1,4 @@
-import React, { Children, ReactNode, useCallback, useRef } from 'react'
+import React, { Children, ReactNode, useCallback, useRef, JSX } from 'react'
 import { VisibilityAndClickTracker } from './VisibilityAndClickTracker'
 
 /**
diff --git a/packages/react/src/context/PostHogProvider.tsx b/packages/react/src/context/PostHogProvider.tsx
@@ -69,6 +69,7 @@ export function PostHogProvider({ children, client, apiKey, options }: WithOptio
             '[PostHog.js] No `apiKey` or `client` were provided to `PostHogProvider`. Using default global `window.posthog` instance. You must initialize it manually. This is not recommended behavior.'
         )
         return posthogJs
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [client, apiKey, JSON.stringify(options)]) // Stringify options to be a stable reference
 
     // TRICKY: The init needs to happen in a useEffect rather than useMemo, as useEffect does not happen during SSR. Otherwise
@@ -122,6 +123,7 @@ export function PostHogProvider({ children, client, apiKey, options }: WithOptio
                 options: options ?? {},
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [client, apiKey, JSON.stringify(options)]) // Stringify options to be a stable reference
 
     return (
diff --git a/packages/react/src/hooks/__tests__/featureFlags.test.tsx b/packages/react/src/hooks/__tests__/featureFlags.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { PostHogProvider, PostHog } from '../../context'
 import { useFeatureFlagPayload, useFeatureFlagVariantKey, useFeatureFlagEnabled, useActiveFeatureFlags } from '../index'
 
diff --git a/packages/react/src/hooks/__tests__/usePostHog.test.tsx b/packages/react/src/hooks/__tests__/usePostHog.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { PostHogProvider, PostHog } from '../../context'
 import { usePostHog } from '..'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
diff --git a/tooling/rollup-utils/package.json b/tooling/rollup-utils/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React from 'react'`
	`1`	`+import React, { JSX } from 'react'`
`2`	`2`	`import { Path, Svg, SvgProps } from 'react-native-svg'`
`3`	`3`
`4`	`4`	`export const SatisfiedEmoji = (props: SvgProps): JSX.Element => (`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`module.exports = {`
`2`		`- presets: [['@babel/preset-env', { targets: { node: '18.0' } }], '@babel/preset-typescript', '@babel/preset-react'],`
	`2`	`+ presets: [`
	`3`	`+ ['@babel/preset-env', { targets: { node: '18.0' } }],`
	`4`	`+ ['@babel/preset-typescript', { allowDeclareFields: true }],`
	`5`	`+ '@babel/preset-react',`
	`6`	`+ ],`
`3`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { Children, useCallback, useRef } from 'react'`
	`1`	`+import React, { Children, useCallback, useRef, JSX } from 'react'`
`2`	`2`	`import { usePostHog } from '../hooks'`
`3`	`3`	`import { VisibilityAndClickTracker } from './internal/VisibilityAndClickTracker'`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { MouseEventHandler, useEffect, useMemo, useRef } from 'react'`
	`1`	`+import React, { MouseEventHandler, useEffect, useMemo, useRef, JSX } from 'react'`
`2`	`2`	`import { isNull } from '../../utils/type-utils'`
`3`	`3`
`4`	`4`	`/**`