Upgrade to React v19 (#73)

danielguillan · web-flow · commit a06099d65d36 · 2025-12-04T18:39:38.000+01:00
* Update Primer Brand to v0.60.0

* Add React 19 compatibility

* Fix types

* Regenerate package-lock

* Add missing eslint-prettier dependency

* Fix formatting

* Update Primer Brand to v0.60.1

* Update Primer Brand in site

* Add changeset

* Update site React to 19.2.1 to address RCE vulnerability

* Update Next.js to v15.5.7

* Add backwards compatibility note to changeset

* Remove site from version bump

* Update Primer React to latest version
diff --git a/.changeset/rotten-coins-teach.md b/.changeset/rotten-coins-teach.md
@@ -0,0 +1,17 @@
+---
+'@primer/doctocat-nextjs': minor
+---
+
+Add React 19 support
+
+This update is backwards compatible with React 18. However, it upgrades `@primer/react` to v38, which includes breaking changes such as the removal of the `Box` component and `sx` prop. Projects using this theme may need to update their code accordingly.
+
+- Updated React peer dependency to support React 19
+- Updated @primer/react from v37.11.2 to v38.3.0
+- Updated `@primer/react-brand` from v0.54.0 to v0.60.1
+- Updated `framer-motion` from v12.4.0 to v12.23.24
+- Updated `react-focus-on` from v3.9.4 to v3.10.0
+- Migrated `Label` components to `Token` for React 19 compatibility
+- Fixed type errors in `ReactCodeBlock` and `getRelatedPages` for stricter React 19 types
+- Added explicit `as="button"` to `IconButton` and `as="input"` to `TextInput` components
+- Updated Next.js and related packages from v15.5.2 to v15.5.7
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,15 +30,17 @@
     "@changesets/cli": "2.27.12",
     "@github/prettier-config": "^0.0.6",
     "@oddbird/popover-polyfill": "^0.5.2",
-    "@primer/react": "38.0.0",
-    "@primer/react-brand": "0.54.0",
+    "@primer/react": "38.3.0",
+    "@primer/react-brand": "0.60.1",
     "@types/node": "20.19.4",
+    "@typescript-eslint/eslint-plugin": "8.29.0",
     "@typescript-eslint/parser": "8.29.0",
     "eslint": "^8",
-    "eslint-config-next": "15.5.2",
+    "eslint-config-next": "15.5.7",
     "eslint-plugin-github": "^5.0.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-mdx": "^2.2.0",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-primer-react": "^6.1.6",
     "eslint-plugin-react-hooks": "^4.6.0",
     "typescript": "5.8.2"
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -23,15 +23,17 @@
   "dependencies": {
     "@primer/doctocat-nextjs": "^0.7.0",
     "@primer/octicons-react": "19.15.1",
-    "eslint-config-next": "15.5.2",
-    "next": "15.5.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "eslint-config-next": "15.5.7",
+    "next": "15.5.7",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "devDependencies": {
     "@github/prettier-config": "^0.0.6",
-    "@primer/react": "38.0.0",
-    "@primer/react-brand": "0.54.0",
-    "@types/node": "20.19.4"
+    "@primer/react": "38.3.0",
+    "@primer/react-brand": "0.60.1",
+    "@types/node": "20.19.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3"
   }
 }
diff --git a/packages/theme/components/layout/article/AccessibilityLabel.module.css b/packages/theme/components/layout/article/AccessibilityLabel.module.css
@@ -1,10 +1,6 @@
 .reviewedLabel {
-  display: flex;
-  align-items: center;
-  gap: var(--base-size-8);
   background-color: var(--base-color-scale-purple-0);
-  border-color: transparent;
-  color: var(--brand-color-text-default);
+  color: var(--brand-color-text-default) !important;
   font-weight: var(--brand-text-weight-300);
 }
 
diff --git a/packages/theme/components/layout/article/AccessibilityLabel.tsx b/packages/theme/components/layout/article/AccessibilityLabel.tsx
@@ -1,5 +1,5 @@
 'use client'
-import {Label} from '@primer/react'
+import {Token} from '@primer/react'
 import {AccessibilityInsetIcon} from '@primer/octicons-react'
 import React from 'react'
 
@@ -11,9 +11,12 @@ type AccessibilityLabelProps = {
 
 export function AccessibilityLabel({short}: AccessibilityLabelProps) {
   return (
-    <Label size="large" className={styles.reviewedLabel}>
-      <AccessibilityInsetIcon className={styles.icon} />
-      {short ? 'Reviewed' : 'Reviewed for accessibility'}
-    </Label>
+    <Token
+      as="span"
+      size="large"
+      className={styles.reviewedLabel}
+      leadingVisual={() => <AccessibilityInsetIcon className={styles.icon} aria-hidden="true" />}
+      text={short ? 'Reviewed' : 'Reviewed for accessibility'}
+    />
   )
 }
diff --git a/packages/theme/components/layout/article/ReadinessLabel.module.css b/packages/theme/components/layout/article/ReadinessLabel.module.css
@@ -1,10 +1,6 @@
 .label {
-  display: flex;
-  align-items: center;
-  gap: var(--base-size-8);
   background-color: var(--base-color-scale-green-0);
-  border-color: transparent;
-  color: var(--brand-color-text-default);
+  color: var(--brand-color-text-default) !important;
   font-weight: var(--brand-text-weight-300);
 }
 
diff --git a/packages/theme/components/layout/article/ReadinessLabel.tsx b/packages/theme/components/layout/article/ReadinessLabel.tsx
@@ -1,15 +1,18 @@
 'use client'
 import React from 'react'
-import {Label} from '@primer/react'
+import {Token} from '@primer/react'
 import {CheckIcon} from '@primer/octicons-react'
 
 import styles from './ReadinessLabel.module.css'
 
 export function ReadinessLabel() {
   return (
-    <Label size="large" className={styles.label}>
-      <CheckIcon className={styles.icon} />
-      Ready to use
-    </Label>
+    <Token
+      as="span"
+      size="large"
+      className={styles.label}
+      leadingVisual={() => <CheckIcon className={styles.icon} aria-hidden="true" />}
+      text="Ready to use"
+    />
   )
 }
diff --git a/packages/theme/components/layout/code-block/ReactCodeBlock.tsx b/packages/theme/components/layout/code-block/ReactCodeBlock.tsx
@@ -205,13 +205,13 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
  * Helper function to turn Nextra <code> children into plain text
  */
 function getCodeFromChildren(children: React.ReactNode) {
-  if (!React.isValidElement(children) || !children.props?.children) return ''
-
-  // Flattens the nested spans and combine their text content if it's a react child
   const extractText = (node: React.ReactNode): string => {
     if (typeof node === 'string') return node
     if (Array.isArray(node)) return node.map(extractText).join('')
-    if (React.isValidElement(node) && node.props?.children) return extractText(node.props.children)
+    if (React.isValidElement(node)) {
+      const element = node as React.ReactElement<{children?: React.ReactNode}>
+      return extractText(element.props.children)
+    }
     return ''
   }
 
diff --git a/packages/theme/components/layout/global-search/GlobalSearch.tsx b/packages/theme/components/layout/global-search/GlobalSearch.tsx
@@ -170,6 +170,7 @@ export const GlobalSearch = forwardRef<HTMLInputElement, GlobalSearchProps>(
         <FormControl>
           <FormControl.Label visuallyHidden>Search</FormControl.Label>
           <TextInput
+            as="input"
             contrast
             type="search"
             className={styles.GlobalSearch__searchInput}
diff --git a/packages/theme/components/layout/header/Header.tsx b/packages/theme/components/layout/header/Header.tsx
@@ -109,20 +109,28 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
                 <Text as="p" size="300" weight="semibold">
                   Search
                 </Text>
-                <IconButton icon={XIcon} variant="invisible" aria-label="Close search" onClick={closeSearch} />
+                <IconButton
+                  as="button"
+                  icon={XIcon}
+                  variant="invisible"
+                  aria-label="Close search"
+                  onClick={closeSearch}
+                />
               </Stack>
             </div>
           </FocusOn>
         </div>
         <div>
           <Stack direction="horizontal" padding="none" gap={4}>
             <IconButton
+              as="button"
               icon={colorMode === 'light' ? SunIcon : MoonIcon}
               variant="invisible"
               aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
               onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
             />
             <IconButton
+              as="button"
               ref={searchTriggerRef}
               className={styles.Header__searchButton}
               icon={SearchIcon}
@@ -132,6 +140,7 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
             />
             <div className={styles.Header__navDrawerContainer}>
               <IconButton
+                as="button"
                 icon={ThreeBarsIcon}
                 variant="invisible"
                 aria-label="Menu"
diff --git a/packages/theme/components/layout/nav-drawer/NavDrawer.tsx b/packages/theme/components/layout/nav-drawer/NavDrawer.tsx
@@ -26,7 +26,7 @@ export function NavDrawer({isOpen, onDismiss, pageMap}: NavDrawerProps) {
               <Link as={NextLink} href="https://primer.style" className={styles.headerLink}>
                 Explore
               </Link>
-              <IconButton icon={XIcon} aria-label="Close" onClick={onDismiss} variant="invisible" />
+              <IconButton as="button" icon={XIcon} aria-label="Close" onClick={onDismiss} variant="invisible" />
             </div>
           </div>
           <div className={styles.navContainer}>{/* <PrimerNavItems items={primerNavItems} /> */}</div>
diff --git a/packages/theme/components/layout/related-content-links/getRelatedPages.tsx b/packages/theme/components/layout/related-content-links/getRelatedPages.tsx
@@ -66,8 +66,11 @@ function titleToString(title: React.ReactNode): string {
       if (typeof child === 'string' || typeof child === 'number') {
         return child.toString()
       }
-      if (React.isValidElement(child) && child.props.children) {
-        return titleToString(child.props.children)
+      if (React.isValidElement(child)) {
+        const element = child as React.ReactElement<{children?: React.ReactNode}>
+        if (element.props.children) {
+          return titleToString(element.props.children)
+        }
       }
       return ''
     })
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -25,16 +25,14 @@
     "react-dom": ">=18.0.0 <20.0.0"
   },
   "dependencies": {
-    "@next/mdx": "15.5.2",
+    "@next/mdx": "15.5.7",
     "@primer/octicons-react": "19.15.1",
-    "@primer/react": "^38.0.0",
+    "@primer/react": "^38.3.0",
     "@types/lodash.debounce": "^4.0.9",
-    "framer-motion": "12.4.0",
+    "framer-motion": "12.23.24",
     "lodash.debounce": "^4.0.8",
     "nextra": "4.4.0",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-focus-on": "3.9.4",
+    "react-focus-on": "^3.10.0",
     "react-live": "^4.1.8"
   },
   "devDependencies": {
@@ -44,19 +42,15 @@
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.19.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "clsx": "2.1.1",
     "jsdom": "^26.0.1",
-    "next": "15.5.2",
+    "next": "15.5.7",
     "styled-components": "5.3.11",
     "vitest": "^3.2.4"
-  },
-  "overrides": {
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1"
   }
 }
