Repository navigation
Fresh create-rs-router app or #3719
Description
Which project does this relate to?
Router
Describe the bug
When I attempt to launch the local server using yarn start (via fresh create-ts-router app) or yarn dev (via ts router quick start) I get the following error when I add the TanStackRouterVite plugin:
Error: Build failed with 2 errors:
node_modules/@tanstack/react-router-devtools/dist/esm/TanStackRouterDevtools.js:2:43: ERROR: Could not resolve "@tanstack/router-devtools-core"
node_modules/@tanstack/react-router-devtools/dist/esm/TanStackRouterDevtoolsPanel.js:3:48: ERROR: Could not resolve "@tanstack/router-devtools-core"
at failureErrorWithLog (/Users/jimjeffers/Sites/my-app/node_modules/esbuild/lib/main.js:1477:15)
at /Users/jimjeffers/Sites/my-app/node_modules/esbuild/lib/main.js:946:25
at /Users/jimjeffers/Sites/my-app/node_modules/esbuild/lib/main.js:1355:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
errors: [Getter/Setter],
warnings: [Getter/Setter]
}
In my config I have the following:
import { defineConfig } from "vite";
import viteReact from "@vitejs/plugin-react";
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [TanStackRouterVite({
target: 'react',
autoCodeSplitting: true,
}),
viteReact()],
test: {
globals: true,
environment: "jsdom",
},
build: {
rollupOptions: {
external: ['@tanstack/router-devtools-core']
}
}
});
Note I tried to move dev tools into external deps and still had no luck. When I clicked the link below for the file-based routes starting point on stackblitz the build fails with the same error without making any changes!
> dev
> vite --port 3000
♻️ Generating routes...
✅ Processed routes in 233ms
VITE v6.2.1 ready in 1606 ms
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ press h + enter to show help
✘ [ERROR] Could not resolve "@tanstack/router-devtools-core"
node_modules/@tanstack/react-router-devtools/dist/esm/TanStackRouterDevtools.js:2:43:
2 │ ...TanStackRouterDevtoolsCore } from "@tanstack/router-devtools-core";
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "@tanstack/router-devtools-core" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@tanstack/router-devtools-core"
node_modules/@tanstack/react-router-devtools/dist/esm/TanStackRouterDevtoolsPanel.js:3:48:
3 │ ...ackRouterDevtoolsPanelCore } from "@tanstack/router-devtools-core";
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "@tanstack/router-devtools-core" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
[Error: Build failed with 2 errors:
node_modules/@tanstack/react-router-devtools/dist/esm/TanStackRouterDevtools.js:2:43: ERROR: Could not resolve "@tanstack/router-devtools-core"
node_modules/@tanstack/react-router-devtools/dist/esm/TanStackRouterDevtoolsPanel.js:3:48: ERROR: Could not resolve "@tanstack/router-devtools-core"] {
errors: [Getter/Setter],
warnings: [Getter/Setter]
}
Node.js v18.20.3
Your Example Website or App
Steps to Reproduce the Bug or Issue
- Goto the stackblitz url.
- Wait for the default build to fail.
Expected behavior
The build should succeed and the dev server should start.
Screenshots or Videos
Platform
- OS: macOS / Linux
- Browser: Not applicable
- Version: 1.114.3
Additional context
No response
Activity
note11g commentedon Mar 10, 2025
i have same error.
but difference with this issue description is not using react router setup.
i have only react, vite, yarn dependencies.
but produced same error.
yarn 1.22.22, vite 6.2.1, darwin-arm64, node-v20.11.1,
@tanstack/react-router-devtools@^1.114.4, @tanstack/react-router@^1.114.4, @tanstack/router-vite-plugin@^1.114.4
(generation is succeeded.
✅ Processed routes in 67ms)note11g commentedon Mar 10, 2025
@jimjeffers
I resolved with this solution.
just add dev dependencies
@tanstack/router-devtools-core,solid-js(tested on 1.114.6)but even i have little question. is really need solid js on dev-dependency?
+I just tried using @tanstack/react-router-devtools instead of @tanstack/router-devtools, but it still depends on solidjs and core. I don’t understand why react-router-devtools needs to depend on solid-js. It seems like the dependency comes from core. Is this because of shared logic?
julianklumpers commentedon Mar 10, 2025
Same thing happens for me in Tanstack start after upgrading to version:
1.114.7of therouterandreact-startAdding @tanstack/router-devtools-core, solid-js makes this error go away.
fix(solid-router-devtools,react-router-devtools): add core package an…
birkskyum commentedon Mar 10, 2025
Is this resolved by react-router-devtools v
1.114.12?graup commentedon Mar 10, 2025
All the rotuer/core/devtools related import errors are resolved for me on 1.114.12 👍
birkskyum commentedon Mar 10, 2025
Awesome! Closed by
jimjeffers commentedon Mar 10, 2025
The inclusion of solid-js as a dip of a react project is insignificant as it's only a dev dependency correct?
birkskyum commentedon Mar 10, 2025
It's actually a normal dependency, because we allow for opting into having devtools show in prod too if desired (e.g. tanstack.com does this). We have this conditional logic in place, to make sure it's tree-shaken otherwise: