Update to React 19 (#151)

* Upgrade React to v19

* Fix types

* Update Dockerfile

.npmrc

@@ -0,0 +1,2 @@
+# Allows us to upgrade to React 19 -- remove when @docsearch/react updates
+legacy-peer-deps=true

Dockerfile

@@ -9,7 +9,7 @@ FROM base as deps
 
 WORKDIR /myapp
 
-ADD package.json package-lock.json ./
+ADD package.json package-lock.json .npmrc ./
 RUN npm install --production=false
 
 # Setup production node_modules
@@ -18,7 +18,7 @@ FROM base as production-deps
 WORKDIR /myapp
 
 COPY --from=deps /myapp/node_modules /myapp/node_modules
-ADD package.json package-lock.json ./
+ADD package.json package-lock.json .npmrc ./
 RUN npm prune --production
 
 # Build the app

app/components/doc-layout.tsx

@@ -5,6 +5,7 @@ import { LargeOnThisPage, SmallOnThisPage } from "./on-this-page";
 
 export function DocLayout({ doc }: { doc: Doc }) {
   let ref = useRef<HTMLDivElement>(null);
+
   useDelegatedReactRouterLinks(ref);
 
   return (

app/components/on-this-page.tsx

@@ -9,7 +9,7 @@ export function LargeOnThisPage({
   mdRef,
 }: {
   doc: Doc;
-  mdRef: React.RefObject<HTMLDivElement>;
+  mdRef: React.RefObject<HTMLDivElement | null>;
 }) {
   const navRef = useRef<HTMLDivElement>(null);
   const [activeHeading, setActiveHeading] = useState("");

app/modules/docsearch.tsx

@@ -32,7 +32,7 @@ let docSearchProps = {
 
 const DocSearchContext = createContext<{
   onOpen: () => void;
-  searchButtonRef: React.RefObject<HTMLButtonElement>;
+  searchButtonRef: React.RefObject<HTMLButtonElement | null>;
 } | null>(null);
 
 /**
@@ -63,6 +63,7 @@ export function DocSearch({ children }: { children: React.ReactNode }) {
     onOpen,
     onClose,
     onInput,
+    // @ts-expect-error docsearch types are not updated for react 19
     searchButtonRef,
   });
 

app/root.tsx

@@ -83,9 +83,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
           hidden
           // this img tag simply forces the icons to be loaded at a higher
           // priority than the scripts (chrome only for now)
-          // @ts-expect-error React forces you to set fetchpriority to lowercase
-          // eslint-disable-next-line react/no-unknown-property
-          fetchpriority="high"
+          fetchPriority="high"
         />
         <DocSearch>{children}</DocSearch>
         <ScrollRestoration />

app/ui/delegate-markdown-links.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { useNavigate } from "react-router";
 
-function useDelegatedReactRouterLinks(nodeRef: React.RefObject<HTMLElement>) {
+function useDelegatedReactRouterLinks(
+  nodeRef: React.RefObject<HTMLElement | null>
+) {
   let navigate = useNavigate();
 
   React.useEffect(() => {

app/ui/utils.ts

@@ -12,7 +12,9 @@ export function useHydrated() {
   return hydrated;
 }
 
-export function useCodeBlockCopyButton(ref: React.RefObject<HTMLElement>) {
+export function useCodeBlockCopyButton(
+  ref: React.RefObject<HTMLElement | null>
+) {
   let location = useLocation();
   useEffect(() => {
     let container = ref.current;

package.json

@@ -38,8 +38,8 @@
     "octokit": "^2.0.14",
     "parse-link-header": "^2.0.0",
     "parse-numeric-range": "^1.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router": "7.0.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
@@ -67,8 +67,8 @@
     "@types/lodash.merge": "^4.6.7",
     "@types/node": "^18.16.3",
     "@types/parse-link-header": "^2.0.1",
-    "@types/react": "^18.2.5",
-    "@types/react-dom": "^18.2.3",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@types/semver": "^7.3.13",
     "@types/tar": "^6.1.4",
     "@types/tar-stream": "^2.2.2",