Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -450,6 +450,8 @@ test('primitives', async ({ page }) => {
const testCases = await page
.locator('[data-testid^="expected-"]')
.elementHandles()
expect(testCases.length).not.toBe(0)

for (const testCase of testCases) {
const testId = await testCase.getAttribute('data-testid')

Expand Down
2 changes: 2 additions & 0 deletions e2e/react-start/server-routes/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@
"test:e2e": "playwright test --project=chromium"
},
"dependencies": {
"@tanstack/react-query": "5.66.0",
"@tanstack/react-router": "workspace:^",
"@tanstack/react-router-devtools": "workspace:^",
"@tanstack/react-router-ssr-query": "workspace:^",
"@tanstack/react-start": "workspace:^",
Comment on lines +14 to 18
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

🧩 Analysis chain

Use workspace: for internal dependencies.*

Align internal packages with the repo guideline.

Apply this minimal diff:

   "dependencies": {
-    "@tanstack/react-query": "5.66.0",
-    "@tanstack/react-router": "workspace:^",
-    "@tanstack/react-router-devtools": "workspace:^",
-    "@tanstack/react-router-ssr-query": "workspace:^",
-    "@tanstack/react-start": "workspace:^",
+    "@tanstack/react-query": "5.66.0",
+    "@tanstack/react-router": "workspace:*",
+    "@tanstack/react-router-devtools": "workspace:*",
+    "@tanstack/react-router-ssr-query": "workspace:*",
+    "@tanstack/react-start": "workspace:*",
   },
   "devDependencies": {
-    "@tanstack/router-e2e-utils": "workspace:^",
+    "@tanstack/router-e2e-utils": "workspace:*",
   }

Please also confirm version compatibility:

Also applies to: 30-31


🌐 Web query:

Do @tanstack/react-query v5.66.0 and React 19 work together without caveats? Check official release notes or docs.

💡 Result:

Short answer: Yes — @tanstack/react-query v5.66.0 is compatible with React 19, but not because that specific release calls out React 19: the official docs state TanStack Query v5 supports React v18+ (i.e., React 19 is within the supported range), and the v5.66.0 release notes show no React-19–specific breaking changes or caveats. [1][2]

Sources:

  • TanStack Query installation / compatibility (states "compatible with React v18+"). [1]
  • TanStack Query v5.66.0 release notes. [2]


---

🏁 Script executed:

```shell
#!/bin/bash
# Inspect the actual package.json file to verify current state
cat "e2e/react-start/server-routes/package.json" | head -35 | tail -25

Length of output: 814


🏁 Script executed:

#!/bin/bash
# Also get full context around lines 14-18 and 30-31
jq '.dependencies, .devDependencies' "e2e/react-start/server-routes/package.json"

Length of output: 833


Update workspace protocol to workspace:* for all internal dependencies.

The file currently uses workspace:^ for all internal @TanStack packages, which violates the guideline requiring workspace:*. The suggested diff is correct.

Version compatibility is not a concern: @tanstack/react-query v5.66.0 is compatible with React 19 (React Query v5 supports React 18+, with no breaking changes in v5.66.0).

Apply the diff across lines 14–18 and line 30 to align with the workspace protocol guideline.

🤖 Prompt for AI Agents
In e2e/react-start/server-routes/package.json around lines 14–18 and line 30,
update the internal @tanstack dependencies that currently use "workspace:^" to
use the workspace protocol "workspace:*" instead; specifically replace
"@tanstack/react-router": "workspace:^", "@tanstack/react-router-devtools":
"workspace:^", "@tanstack/react-router-ssr-query": "workspace:^", and
"@tanstack/react-start": "workspace:^" with "workspace:*", and make the same
replacement on line 30 so all internal @tanstack packages use "workspace:*".

"js-cookie": "^3.0.5",
"react": "^19.0.0",
Expand Down
131 changes: 111 additions & 20 deletions e2e/react-start/server-routes/src/routeTree.gen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,46 @@
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

import { Route as rootRouteImport } from './routes/__root'
import { Route as MergeServerFnMiddlewareContextRouteImport } from './routes/merge-server-fn-middleware-context'
import { Route as MergeMiddlewareContextRouteImport } from './routes/merge-middleware-context'
import { Route as MethodsRouteRouteImport } from './routes/methods/route'
import { Route as IndexRouteImport } from './routes/index'
import { Route as MethodsIndexRouteImport } from './routes/methods/index'
import { Route as MethodsOnlyAnyRouteImport } from './routes/methods/only-any'
import { Route as ApiOnlyAnyRouteImport } from './routes/api/only-any'
import { Route as ApiMiddlewareContextRouteImport } from './routes/api/middleware-context'
import { Route as ApiParamsFooRouteRouteImport } from './routes/api/params/$foo/route'
import { Route as ApiParamsFooBarRouteImport } from './routes/api/params/$foo/$bar'

const MergeServerFnMiddlewareContextRoute =
MergeServerFnMiddlewareContextRouteImport.update({
id: '/merge-server-fn-middleware-context',
path: '/merge-server-fn-middleware-context',
getParentRoute: () => rootRouteImport,
} as any)
const MergeMiddlewareContextRoute = MergeMiddlewareContextRouteImport.update({
id: '/merge-middleware-context',
path: '/merge-middleware-context',
getParentRoute: () => rootRouteImport,
} as any)
const MethodsRouteRoute = MethodsRouteRouteImport.update({
id: '/methods',
path: '/methods',
getParentRoute: () => rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
id: '/',
path: '/',
getParentRoute: () => rootRouteImport,
} as any)
const MethodsIndexRoute = MethodsIndexRouteImport.update({
id: '/',
path: '/',
getParentRoute: () => MethodsRouteRoute,
} as any)
const MethodsOnlyAnyRoute = MethodsOnlyAnyRouteImport.update({
id: '/only-any',
path: '/only-any',
getParentRoute: () => MethodsRouteRoute,
} as any)
const ApiOnlyAnyRoute = ApiOnlyAnyRouteImport.update({
id: '/api/only-any',
path: '/api/only-any',
getParentRoute: () => rootRouteImport,
} as any)
const ApiMiddlewareContextRoute = ApiMiddlewareContextRouteImport.update({
id: '/api/middleware-context',
path: '/api/middleware-context',
Expand All @@ -44,64 +67,95 @@ const ApiParamsFooBarRoute = ApiParamsFooBarRouteImport.update({

export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/merge-server-fn-middleware-context': typeof MergeServerFnMiddlewareContextRoute
'/methods': typeof MethodsRouteRouteWithChildren
'/merge-middleware-context': typeof MergeMiddlewareContextRoute
'/api/middleware-context': typeof ApiMiddlewareContextRoute
'/api/only-any': typeof ApiOnlyAnyRoute
'/methods/only-any': typeof MethodsOnlyAnyRoute
'/methods/': typeof MethodsIndexRoute
'/api/params/$foo': typeof ApiParamsFooRouteRouteWithChildren
'/api/params/$foo/$bar': typeof ApiParamsFooBarRoute
}
export interface FileRoutesByTo {
'/': typeof IndexRoute
'/merge-server-fn-middleware-context': typeof MergeServerFnMiddlewareContextRoute
'/merge-middleware-context': typeof MergeMiddlewareContextRoute
'/api/middleware-context': typeof ApiMiddlewareContextRoute
'/api/only-any': typeof ApiOnlyAnyRoute
'/methods/only-any': typeof MethodsOnlyAnyRoute
'/methods': typeof MethodsIndexRoute
'/api/params/$foo': typeof ApiParamsFooRouteRouteWithChildren
'/api/params/$foo/$bar': typeof ApiParamsFooBarRoute
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
'/': typeof IndexRoute
'/merge-server-fn-middleware-context': typeof MergeServerFnMiddlewareContextRoute
'/methods': typeof MethodsRouteRouteWithChildren
'/merge-middleware-context': typeof MergeMiddlewareContextRoute
'/api/middleware-context': typeof ApiMiddlewareContextRoute
'/api/only-any': typeof ApiOnlyAnyRoute
'/methods/only-any': typeof MethodsOnlyAnyRoute
'/methods/': typeof MethodsIndexRoute
'/api/params/$foo': typeof ApiParamsFooRouteRouteWithChildren
'/api/params/$foo/$bar': typeof ApiParamsFooBarRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
fullPaths:
| '/'
| '/merge-server-fn-middleware-context'
| '/methods'
| '/merge-middleware-context'
| '/api/middleware-context'
| '/api/only-any'
| '/methods/only-any'
| '/methods/'
| '/api/params/$foo'
| '/api/params/$foo/$bar'
fileRoutesByTo: FileRoutesByTo
to:
| '/'
| '/merge-server-fn-middleware-context'
| '/merge-middleware-context'
| '/api/middleware-context'
| '/api/only-any'
| '/methods/only-any'
| '/methods'
| '/api/params/$foo'
| '/api/params/$foo/$bar'
id:
| '__root__'
| '/'
| '/merge-server-fn-middleware-context'
| '/methods'
| '/merge-middleware-context'
| '/api/middleware-context'
| '/api/only-any'
| '/methods/only-any'
| '/methods/'
| '/api/params/$foo'
| '/api/params/$foo/$bar'
fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
IndexRoute: typeof IndexRoute
MergeServerFnMiddlewareContextRoute: typeof MergeServerFnMiddlewareContextRoute
MethodsRouteRoute: typeof MethodsRouteRouteWithChildren
MergeMiddlewareContextRoute: typeof MergeMiddlewareContextRoute
ApiMiddlewareContextRoute: typeof ApiMiddlewareContextRoute
ApiOnlyAnyRoute: typeof ApiOnlyAnyRoute
ApiParamsFooRouteRoute: typeof ApiParamsFooRouteRouteWithChildren
}

declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/merge-server-fn-middleware-context': {
id: '/merge-server-fn-middleware-context'
path: '/merge-server-fn-middleware-context'
fullPath: '/merge-server-fn-middleware-context'
preLoaderRoute: typeof MergeServerFnMiddlewareContextRouteImport
'/merge-middleware-context': {
id: '/merge-middleware-context'
path: '/merge-middleware-context'
fullPath: '/merge-middleware-context'
preLoaderRoute: typeof MergeMiddlewareContextRouteImport
parentRoute: typeof rootRouteImport
}
'/methods': {
id: '/methods'
path: '/methods'
fullPath: '/methods'
preLoaderRoute: typeof MethodsRouteRouteImport
parentRoute: typeof rootRouteImport
}
'/': {
Expand All @@ -111,6 +165,27 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof IndexRouteImport
parentRoute: typeof rootRouteImport
}
'/methods/': {
id: '/methods/'
path: '/'
fullPath: '/methods/'
preLoaderRoute: typeof MethodsIndexRouteImport
parentRoute: typeof MethodsRouteRoute
}
'/methods/only-any': {
id: '/methods/only-any'
path: '/only-any'
fullPath: '/methods/only-any'
preLoaderRoute: typeof MethodsOnlyAnyRouteImport
parentRoute: typeof MethodsRouteRoute
}
'/api/only-any': {
id: '/api/only-any'
path: '/api/only-any'
fullPath: '/api/only-any'
preLoaderRoute: typeof ApiOnlyAnyRouteImport
parentRoute: typeof rootRouteImport
}
'/api/middleware-context': {
id: '/api/middleware-context'
path: '/api/middleware-context'
Expand All @@ -135,6 +210,20 @@ declare module '@tanstack/react-router' {
}
}

interface MethodsRouteRouteChildren {
MethodsOnlyAnyRoute: typeof MethodsOnlyAnyRoute
MethodsIndexRoute: typeof MethodsIndexRoute
}

const MethodsRouteRouteChildren: MethodsRouteRouteChildren = {
MethodsOnlyAnyRoute: MethodsOnlyAnyRoute,
MethodsIndexRoute: MethodsIndexRoute,
}

const MethodsRouteRouteWithChildren = MethodsRouteRoute._addFileChildren(
MethodsRouteRouteChildren,
)

interface ApiParamsFooRouteRouteChildren {
ApiParamsFooBarRoute: typeof ApiParamsFooBarRoute
}
Expand All @@ -148,8 +237,10 @@ const ApiParamsFooRouteRouteWithChildren =

const rootRouteChildren: RootRouteChildren = {
IndexRoute: IndexRoute,
MergeServerFnMiddlewareContextRoute: MergeServerFnMiddlewareContextRoute,
MethodsRouteRoute: MethodsRouteRouteWithChildren,
MergeMiddlewareContextRoute: MergeMiddlewareContextRoute,
ApiMiddlewareContextRoute: ApiMiddlewareContextRoute,
ApiOnlyAnyRoute: ApiOnlyAnyRoute,
ApiParamsFooRouteRoute: ApiParamsFooRouteRouteWithChildren,
}
export const routeTree = rootRouteImport
Expand Down
4 changes: 4 additions & 0 deletions e2e/react-start/server-routes/src/router.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
import { createRouter } from '@tanstack/react-router'
import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
import { QueryClient } from '@tanstack/react-query'
import { routeTree } from './routeTree.gen'
import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
import { NotFound } from './components/NotFound'

export function getRouter() {
const queryClient = new QueryClient()
const router = createRouter({
routeTree,
defaultPreload: 'intent',
defaultErrorComponent: DefaultCatchBoundary,
defaultNotFoundComponent: () => <NotFound />,
scrollRestoration: true,
})
setupRouterSsrQueryIntegration({ router, queryClient })

return router
}
18 changes: 18 additions & 0 deletions e2e/react-start/server-routes/src/routes/api/only-any.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { createFileRoute } from '@tanstack/react-router'
import { json } from '@tanstack/react-start'

export const Route = createFileRoute('/api/only-any')({
server: {
handlers: {
ANY: ({ request }) => {
return json(
{
handler: 'ANY',
method: request.method,
},
{ headers: { 'X-HANDLER': 'ANY', 'X-METHOD': request.method } },
)
},
},
},
})
11 changes: 7 additions & 4 deletions e2e/react-start/server-routes/src/routes/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Link, createFileRoute } from '@tanstack/react-router'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
component: Home,
Expand All @@ -10,9 +10,12 @@ function Home() {
<h1 className="font-bold text-lg">Server Routes E2E tests</h1>
<ul className="list-disc p-4">
<li>
<Link to="/merge-server-fn-middleware-context">
server function middleware context is merged correctly
</Link>
<Route.Link to="./merge-middleware-context">
server route middleware context is merged correctly
</Route.Link>
</li>
<li>
<Route.Link to="./methods">server route methods</Route.Link>
</li>
</ul>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { createFileRoute } from '@tanstack/react-router'
import * as React from 'react'

export const Route = createFileRoute('/merge-server-fn-middleware-context')({
component: () => <MergeServerFnMiddlewareContext />,
export const Route = createFileRoute('/merge-middleware-context')({
component: MergeMiddlewareContext,
})

function MergeServerFnMiddlewareContext() {
function MergeMiddlewareContext() {
const [apiResponse, setApiResponse] = React.useState<any>(null)

const fetchMiddlewareContext = async () => {
Expand All @@ -21,7 +21,7 @@ function MergeServerFnMiddlewareContext() {

return (
<div className="p-2 m-2 grid gap-2">
<h3>Merge Server Function Middleware Context Test</h3>
<h3>Merge Server Route Middleware Context Test</h3>
<div className="flex flex-col gap-2">
<button
type="button"
Expand Down
19 changes: 19 additions & 0 deletions e2e/react-start/server-routes/src/routes/methods/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/methods/')({
component: RouteComponent,
})

function RouteComponent() {
return (
<div className="p-8">
<ul className="list-disc p-4">
<li>
<Route.Link to="./only-any">
Server Route only has ANY handler
</Route.Link>
</li>
</ul>
</div>
)
}
Loading
Loading