fix: make react-19 the default (#3226)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TanStack · Jan 25, 2025 · 55505a1 · 55505a1
1 parent bebea81
commit 55505a1
Show file tree

Hide file tree

Showing 11 changed files with 979 additions and 980 deletions.
diff --git a/e2e/start/basic/app/routes/__root.tsx b/e2e/start/basic/app/routes/__root.tsx
@@ -5,7 +5,6 @@ import {
   ScrollRestoration,
   createRootRoute,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { Meta, Scripts } from '@tanstack/start'
 
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
@@ -71,6 +70,16 @@ function RootComponent() {
   )
 }
 
+const RouterDevtools =
+  process.env.NODE_ENV === 'production'
+    ? () => null // Render nothing in production
+    : React.lazy(() =>
+        // Lazy load in development
+        import('@tanstack/router-devtools').then((res) => ({
+          default: res.TanStackRouterDevtools,
+        })),
+      )
+
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
@@ -149,7 +158,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         <hr />
         {children}
         <ScrollRestoration />
-        <TanStackRouterDevtools position="bottom-right" />
+        <RouterDevtools position="bottom-right" />
         <Scripts />
       </body>
     </html>

diff --git a/e2e/start/basic/app/routes/scripts.tsx b/e2e/start/basic/app/routes/scripts.tsx
@@ -7,13 +7,11 @@ export const Route = createFileRoute('/scripts')({
     scripts: [
       {
         src: 'script.js',
-        ['data-testid']: 'script',
       },
       isProd
         ? undefined
         : {
             src: 'script2.js',
-            ['data-testid']: 'script2',
           },
     ],
   }),

diff --git a/e2e/start/basic/public/script.js b/e2e/start/basic/public/script.js
@@ -1,2 +1,2 @@
-// eslint-disable no-empty-file
-// This empty script file is for testing purposes only
+console.log('SCRIPT_1 loaded')
+window.SCRIPT_1 = true
diff --git a/e2e/start/basic/public/script2.js b/e2e/start/basic/public/script2.js
@@ -1,2 +1,2 @@
-// eslint-disable no-empty-file
-// This empty script file is for testing purposes only
+console.log('SCRIPT_2 loaded')
+window.SCRIPT_2 = true
diff --git a/e2e/start/basic/tests/base.spec.ts b/e2e/start/basic/tests/base.spec.ts
@@ -32,13 +32,10 @@ test('Navigating nested layouts', async ({ page }) => {
   await expect(page.locator('body')).toContainText("I'm layout B!")
 })
 
-test('Navigating to route with scripts', async ({ page }) => {
-  await page.goto('/')
-
-  await page.getByRole('link', { name: 'Scripts' }).click()
-
-  await expect(page.getByTestId('script')).toHaveCount(1)
-  await expect(page.getByTestId('script2')).toHaveCount(0)
+test('directly going to a route with scripts', async ({ page }) => {
+  await page.goto('/scripts')
+  expect(await page.evaluate('window.SCRIPT_1')).toBe(true)
+  expect(await page.evaluate('window.SCRIPT_2')).toBe(undefined)
 })
 
 test('Navigating to a not-found route', async ({ page }) => {

diff --git a/package.json b/package.json
@@ -37,20 +37,20 @@
     "@tanstack/config": "^0.15.0",
     "@tanstack/react-query": "5.62.3",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "tinyglobby": "^0.2.10",
     "jsdom": "^25.0.1",
     "nx": "^20.3.3",
     "prettier": "^3.4.2",
     "publint": "^0.2.12",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "redaxios": "^0.5.1",
     "rimraf": "^6.0.1",
+    "tinyglobby": "^0.2.10",
     "typescript": "^5.7.2",
     "typescript52": "npm:[email protected]",
     "typescript53": "npm:[email protected]",
@@ -67,6 +67,8 @@
     "overrides": {
       "react": "$react",
       "react-dom": "$react-dom",
+      "@types/react": "$@types/react",
+      "@types/react-dom": "$@types/react-dom",
       "eslint": "$eslint",
       "vite": "$vite",
       "@tanstack/react-query": "5.62.3",

diff --git a/packages/react-router/src/useRouterState.tsx b/packages/react-router/src/useRouterState.tsx
@@ -36,7 +36,7 @@ export function useRouterState<
   })
   const router = opts?.router || contextRouter
   const previousResult =
-    useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>()
+    useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(undefined)
 
   return useStore(router.__store, (state) => {
     if (opts?.select) {

diff --git a/packages/react-router/src/utils.ts b/packages/react-router/src/utils.ts
@@ -470,7 +470,7 @@ export function usePrevious<T>(value: T): T | null {
  * ```
  */
 export function useIntersectionObserver<T extends Element>(
-  ref: React.RefObject<T>,
+  ref: React.RefObject<T | null>,
   callback: (entry: IntersectionObserverEntry | undefined) => void,
   intersectionObserverOptions: IntersectionObserverInit = {},
   options: { disabled?: boolean } = {},

diff --git a/packages/react-router/tests/router.test.tsx b/packages/react-router/tests/router.test.tsx
@@ -624,7 +624,7 @@ describe('router emits events during rendering', () => {
 
     const unsub = router.subscribe('onResolved', mockFn1)
     await router.load()
-    render(<RouterProvider router={router} />)
+    await act(() => render(<RouterProvider router={router} />))
 
     await act(() => router.navigate({ to: '/$', params: { _splat: 'tanner' } }))
 

diff --git a/packages/start-client/src/tests/index.test.tsx b/packages/start-client/src/tests/index.test.tsx
@@ -1,7 +1,6 @@
 import { describe, expect, test } from 'vitest'
 import { render } from '@testing-library/react'
-
-import React from 'react'
+import ReactDOMServer from 'react-dom/server'
 
 import {
   RouterProvider,
@@ -221,10 +220,11 @@ describe('ssr meta', () => {
       { property: 'og:image', content: 'index-image.jpg' },
     ])
 
-    const { container } = render(<RouterProvider router={router} />)
-
-    expect(container.innerHTML).toEqual(
-      `<title>Index</title><meta name="image" content="image.jpg"><meta property="og:description" content="Root description"><meta name="description" content="Index"><meta name="last-modified" content="2021-10-10"><meta property="og:image" content="index-image.jpg">`,
+    const html = ReactDOMServer.renderToString(
+      <RouterProvider router={router} />,
+    )
+    expect(html).toEqual(
+      `<title>Index</title><meta name="image" content="image.jpg"/><meta property="og:description" content="Root description"/><meta name="description" content="Index"/><meta name="last-modified" content="2021-10-10"/><meta property="og:image" content="index-image.jpg"/><!--$--><!--/$-->`,
     )
   })
 })