Upgrade frontend toolchain to latest majors

Bump React 19.2, Relay 21, React Router 8, Vite 8 with
@vitejs/plugin-react 6, ESLint 10, GraphQL 17, TypeScript 6,
@types/node 24, and Tailwind 4.3 across the workspaces.

vite-plugin-react 6 (Vite 8) no longer runs Babel, so the Relay
tagged-template transform now runs through @rolldown/plugin-babel
in the console and trust Vite configs.

Relay 21 ships first-party types and enables the ambiguous-alias
check by default; disable that flag to preserve existing queries
and add explicit usePreloadedQuery type arguments where the new
types no longer infer the operation. TypeScript 6 deprecations and
stricter inference are addressed in tsconfigs and call sites.

Keep n8n-node on ESLint 9 and eslint-plugin-react on 7.37.5, the
newest releases compatible with their toolchains.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-18 19:10:00 +02:00
parent f1fc2dc0e0
commit f98b73f073
130 changed files with 2228 additions and 1763 deletions

View File

@@ -11,13 +11,13 @@
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^5.8.3",
"typescript": "~6.0.3",
"vitest": "^4.1.8"
},
"peerDependencies": {
"react": "^19.2.1",
"react-relay": "^20.1.1",
"react-router": "^7.17.0",
"relay-runtime": "^20.1.1"
"react": "^19.2.7",
"react-relay": "^21.0.1",
"react-router": "^8.0.0",
"relay-runtime": "^21.0.1"
}
}

View File

@@ -18,14 +18,19 @@ import { type LoaderFunction, type LoaderFunctionArgs, useLoaderData } from "rea
import { type OperationType } from "relay-runtime";
import { useCleanup } from "@probo/hooks";
// Infer the concrete `queryRef` type from a naked type position. Relay 21's
// first-party types model `PreloadedQuery#variables` as `VariablesOf<TQuery>`,
// which prevents inferring `TQuery` through it, so we infer the whole queryRef.
export function withQueryRef<
TQuery extends OperationType,
TEnvironmentProviderOptions = EnvironmentProviderOptions
TQueryRef extends PreloadedQuery<OperationType>
>(
Component: ComponentType<{ queryRef: PreloadedQuery<TQuery, TEnvironmentProviderOptions> }>,
Component: ComponentType<{ queryRef: TQueryRef }>,
) {
return () => {
const { queryRef, dispose } = useLoaderData();
const { queryRef, dispose } = useLoaderData() as {
queryRef: TQueryRef;
dispose: () => void;
};
useCleanup(dispose, 1000);