Skip to content

Commit aae92e4

Browse files
AlemTuzlakAlemTuzlak
authored
fix: declare vite-node as a dependency and support React Router 8 / Vite 8 (#261) (#262)
The Vite plugin imports `vite-node` at runtime (it is marked `external` in tsup, so it stays a bare import in the published `dist`), but `vite-node` was only a devDependency. It resolved on React Router 7 purely as a phantom dependency of `@react-router/dev@7`, which declared `vite-node` itself. React Router 8 dropped `vite-node` from its dependencies, so resolution broke with `Cannot find package 'vite-node'`. - Move `vite-node` to `dependencies` (`^5.0.0 || ^6.0.0`, covering Vite 7 and 8). - Tidy the `vite` peer range to `>=5.0.0` (the `react-router` `>=7.0.0` peer already admits v8). - Add a minimal React Router 8 + Vite 8 example (`test-apps/react-router-v8-vite`) that wires the devtools plugin in by package name to exercise real consumer resolution. Verified: dev server boots cleanly, build and typecheck pass. - Align react/react-dom across the examples and docs to ^19.2.7 (RR8 floor) and pin react/react-dom via root pnpm.overrides so the shared, workspace-linked devtools package resolves a single React version (avoids an invalid-hook-call from a react/react-dom mismatch). - Ignore the intentionally-divergent v8 example in the sherif dependency check.
1 parent 6eab97d commit aae92e4

17 files changed

Lines changed: 1779 additions & 405 deletions

File tree

‎.changeset/vite-node-dependency-rr8-vite8.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"react-router-devtools": patch
3+
---
4+
5+
Fix `Cannot find package 'vite-node'` (#261) and support React Router 8 / Vite 8.
6+
7+
`vite-node` is imported at runtime by the Vite plugin but was only declared as a `devDependency`, so consumers relied on it being a phantom dependency of `@react-router/dev@7`. React Router 8 dropped `vite-node` from its dependencies, which broke resolution for any project on RR8. `vite-node` is now a real `dependency` (`^5.0.0 || ^6.0.0`, covering both Vite 7 and Vite 8), and the `vite` peer range was tidied to `>=5.0.0` so it explicitly admits Vite 8 alongside React Router's existing `>=7.0.0` peer range (which already admits v8).

‎docs/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
"i18next-http-backend": "3.0.2",
4949
"isbot": "^5.1.27",
5050
"pretty-cache-header": "1.0.0",
51-
"react": "^19.1.0",
52-
"react-dom": "^19.1.0",
51+
"react": "^19.2.7",
52+
"react-dom": "^19.2.7",
5353
"react-i18next": "15.4.0",
5454
"react-router": "^7.9.3",
5555
"react-router-hono-server": "2.10.0",
@@ -70,8 +70,8 @@
7070
"@testing-library/react": "16.3.0",
7171
"@types/node": "24.10.0",
7272
"@types/prompt": "1.1.9",
73-
"@types/react": "^19.1.2",
74-
"@types/react-dom": "^19.1.2",
73+
"@types/react": "^19.2.2",
74+
"@types/react-dom": "^19.2.2",
7575
"@types/semver": "7.7.0",
7676
"@types/slug": "5.0.9",
7777
"@vitest/browser": "3.0.5",

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"local-release": "changeset version && changeset publish",
4444
"version": "changeset version",
4545
"test:unused": "knip",
46-
"test:deps": "sherif -i react-router-devtools -i tailwindcss",
46+
"test:deps": "sherif -i react-router-devtools -i tailwindcss -p react-router-v8-vite",
4747
"watch": "pnpm run build:all && nx watch --all -- pnpm run build:all"
4848
},
4949
"license": "MIT",
@@ -67,7 +67,9 @@
6767
"pnpm": {
6868
"onlyBuiltDependencies": ["esbuild", "msw"],
6969
"overrides": {
70-
"react-router-devtools": "workspace:*"
70+
"react-router-devtools": "workspace:*",
71+
"react": "19.2.7",
72+
"react-dom": "19.2.7"
7173
}
7274
},
7375
"private": true

‎packages/react-router-devtools/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
"react": ">=17",
100100
"react-dom": ">=17",
101101
"react-router": ">=7.0.0",
102-
"vite": ">=5.0.0 || >=6.0.0"
102+
"vite": ">=5.0.0"
103103
},
104104
"devDependencies": {
105105
"@react-router/dev": "7.9.5",
@@ -121,7 +121,6 @@
121121
"tsx": "4.20.6",
122122
"typescript": "^5.9.3",
123123
"vite": "^7.2.2",
124-
"vite-node": "^5.0.0",
125124
"vitest": "3.0.5"
126125
},
127126
"dependencies": {
@@ -141,7 +140,8 @@
141140
"goober": "^2.1.18",
142141
"react-d3-tree": "^3.6.6",
143142
"react-hotkeys-hook": "^5.2.1",
144-
"react-tooltip": "^5.30.0"
143+
"react-tooltip": "^5.30.0",
144+
"vite-node": "^5.0.0 || ^6.0.0"
145145
},
146146
"optionalDependencies": {
147147
"@biomejs/cli-darwin-arm64": "^2.3.5",

‎pnpm-lock.yaml‎

Lines changed: 1522 additions & 388 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test-apps/custom-server/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"express": "^5.1.0",
1616
"isbot": "^5.1.27",
1717
"morgan": "^1.10.0",
18-
"react": "^19.1.0",
19-
"react-dom": "^19.1.0",
18+
"react": "^19.2.7",
19+
"react-dom": "^19.2.7",
2020
"react-router": "^7.9.3"
2121
},
2222
"devDependencies": {
@@ -28,8 +28,8 @@
2828
"@types/express-serve-static-core": "^5.0.6",
2929
"@types/morgan": "^1.9.9",
3030
"@types/node": "24.10.0",
31-
"@types/react": "^19.1.2",
32-
"@types/react-dom": "^19.1.2",
31+
"@types/react": "^19.2.2",
32+
"@types/react-dom": "^19.2.2",
3333
"cross-env": "^7.0.3",
3434
"postcss-import": "16.1.0",
3535
"react-router-devtools": "*",

‎test-apps/react-router-v8-vite/.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
3+
/.cache
4+
/build
5+
/public/build
6+
/.react-router
7+
.env

‎test-apps/react-router-v8-vite/README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# react-router-v8-vite
2+
3+
A minimal **React Router v8 + Vite 8** framework-mode app used to verify that
4+
[`react-router-devtools`](../../packages/react-router-devtools) works on the latest major versions.
5+
6+
It exists alongside [`react-router-vite`](../react-router-vite) (React Router 7 / Vite 7) so the repo
7+
exercises both supported majors.
8+
9+
This example imports the devtools plugin by its **published package name**
10+
(`react-router-devtools`) rather than a relative `dist/` path, so it exercises the real consumer
11+
dependency-resolution path — including the `vite-node` runtime dependency that
12+
[issue #261](https://github.com/code-forge-io/react-router-devtools/issues/261) was about.
13+
14+
## Run
15+
16+
```sh
17+
pnpm --filter react-router-v8-vite dev
18+
```
19+
20+
## Build
21+
22+
```sh
23+
pnpm --filter react-router-v8-vite build
24+
pnpm --filter react-router-v8-vite start
25+
```

‎test-apps/react-router-v8-vite/app/root.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Links, Meta, type MetaFunction, Outlet, Scripts, ScrollRestoration } from "react-router"
2+
import type { Route } from "./+types/root"
3+
4+
// Server middleware — exercises react-router-devtools' middleware augmentation.
5+
const loggingMiddleware: Route.MiddlewareFunction = async ({ request }, next) => {
6+
console.log("Server middleware - request:", request.url)
7+
return next()
8+
}
9+
10+
export const middleware: Route.MiddlewareFunction[] = [loggingMiddleware]
11+
12+
// Client middleware
13+
const clientLoggingMiddleware: Route.ClientMiddlewareFunction = async ({ request }, next) => {
14+
console.log("Client middleware - request:", request.url)
15+
return next()
16+
}
17+
18+
export const clientMiddleware: Route.ClientMiddlewareFunction[] = [clientLoggingMiddleware]
19+
20+
export const meta: MetaFunction = () => [
21+
{ title: "React Router v8 + Vite 8 DevTools" },
22+
{ name: "description", content: "React Router DevTools running on React Router v8 and Vite 8" },
23+
]
24+
25+
export function Layout({ children }: { children: React.ReactNode }) {
26+
return (
27+
<html lang="en">
28+
<head>
29+
<meta charSet="utf-8" />
30+
<meta name="viewport" content="width=device-width, initial-scale=1" />
31+
<Meta />
32+
<Links />
33+
</head>
34+
<body style={{ margin: 0 }}>
35+
{children}
36+
<ScrollRestoration />
37+
<Scripts />
38+
</body>
39+
</html>
40+
)
41+
}
42+
43+
export default function App() {
44+
return <Outlet />
45+
}

‎test-apps/react-router-v8-vite/app/routes.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { index, type RouteConfig } from "@react-router/dev/routes"
2+
3+
export default [index("routes/home.tsx")] satisfies RouteConfig

0 commit comments

Comments
 (0)