fix(router-devtools-core): actually bundle solid

[benmccann]

closes #5420

I'm not sure why upgrading @tanstack/config causes the build to fail. I could use some help with that as it seems a bit unrelated. I believe this fix should work once we get past that

Summary by CodeRabbit

• Chores
  • Build configuration updated to bundle an additional UI library for more reliable builds across environments.
  • Development tooling dependency upgraded to a newer version for improved build compatibility and maintenance.
  • Linting configuration cleaned up to remove an unnecessary directive, simplifying developer tooling.

[coderabbitai]

Walkthrough

Adds bundling of solid-js and solid-js/web by passing bundledDeps: ['solid-js', 'solid-js/web'] into the tanstack Vite config for router-devtools-core, bumps devDependency @tanstack/config from ^0.16.1 to ^0.21.0, and removes a // @ts-expect-error comment above an import in eslint.config.js. No exported API changes.

Changes

Cohort / File(s)	Summary of changes
Vite config change packages/router-devtools-core/vite.config.ts	Adds bundledDeps: ['solid-js', 'solid-js/web'] to the merged call to tanstackViteConfig, instructing the build to bundle solid-js and solid-js/web.
Dependency bump package.json	Updates devDependency @tanstack/config from ^0.16.1 to ^0.21.0.
ESLint config cleanup eslint.config.js	Removes the // @ts-expect-error directive above the import of tanstackConfig from @tanstack/config/eslint; import remains unchanged.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant Dev as Developer/CI
    participant tanstack as tanstackViteConfig
    participant Vite as Vite/Rollup

    Dev->>tanstack: build using merged config (bundledDeps: ["solid-js","solid-js/web"])
    tanstack->>Vite: emit Vite config with bundledDeps
    Vite->>Vite: bundle listed deps into output (no externalize)
    Vite-->>Dev: produced build artifacts (solid-js imports resolved)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Fix(router-devtools-core): Reverts #5374 #5403 — Related changes around including/exporting solid-js in router-devtools-core packaging.
• fix(router-devtools-core): bundle solid for smaller package #5406 — Adjusts bundling/packaging of Solid in router-devtools-core.
• fix(router-devtools-core): bundle solid for smaller package #5374 — Related work enabling bundling of Solid rather than externalizing it.

Suggested reviewers

• brenelz

Poem

I hop through lines with a whiskered cheer,
Bundling two solids so builds run clear.
No missing imports, no frantic cry,
Carrots and config — watch builds fly! 🥕🐇

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	This pull request includes a bump of the @tanstack/config devDependency and the removal of a TypeScript expect-error directive in eslint.config.js, neither of which are needed to resolve the unresolved import of solid-js/web described in issue #5420 and thus fall outside the scope of that issue’s objectives.	Consider splitting the @tanstack/config upgrade and ESLint directive removal into a separate pull request or clearly document how they relate to the linked issue to keep the scope focused.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title concisely and accurately describes the primary change of bundling Solid in the router-devtools-core package, aligning with the modifications in the Vite configuration without extra noise or missing the core fix.
Linked Issues Check	✅ Passed	The pull request adds solid-js and solid-js/web to the bundledDeps in the Vite configuration, ensuring these modules are included in the build output and resolving the Rollup unresolved import error without requiring users to install solid-js, directly fulfilling the objectives of issue #5420.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 19a6ae1 and 243a5ff.

📒 Files selected for processing (1)

• eslint.config.js (0 hunks)

💤 Files with no reviewable changes (1)

• eslint.config.js

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Test

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

---

View your CI Pipeline Execution ↗ for commit 243a5ff

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	❌ Failed	2m 5s	View ↗
nx run-many --target=build --exclude=examples/*...	❌ Failed	28s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-13 20:29:49 UTC

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3097080 and 8809a2b.

📒 Files selected for processing (1)

• packages/router-devtools-core/vite.config.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

• packages/router-devtools-core/vite.config.ts

🧠 Learnings (1)

📓 Common learnings

Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-plugin/** : Use unplugin for universal bundler plugins in the router-plugin package

🔇 Additional comments (1)

packages/router-devtools-core/vite.config.ts (1)

18-19: Good practice documenting the temporary workaround.

The TODO comment clearly communicates the intent to refactor this into a cleaner solution within @tanstack/config/vite. This aligns well with the PR description's stated follow-up plans.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/router-devtools-core/vite.config.ts (1)

18-20: Temporary workaround acknowledged.

The TODO comment appropriately documents the intent to refactor this via tanstackViteConfig. Given the urgency to unblock users, this interim approach is reasonable.

Would you like me to open a tracking issue for the planned refactor to @tanstack/config/vite?

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3097080 and 6049a0d.

📒 Files selected for processing (1)

• packages/router-devtools-core/vite.config.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

• packages/router-devtools-core/vite.config.ts

[pkg-pr-new]

More templates

• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-solid-start-example-bare
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-static
• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5422

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5422

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5422

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5422

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5422

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5422

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5422

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5422

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5422

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5422

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5422

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5422

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5422

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5422

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5422

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5422

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5422

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5422

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5422

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5422

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5422

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5422

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5422

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5422

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5422

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5422

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5422

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5422

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5422

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5422

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5422

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5422

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5422

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5422

commit: 7582b93

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/router-devtools-core/vite.config.ts (1)

23-26: Consider handling non-function external types.

Rollup's external option accepts string, RegExp, arrays, or functions. If tanstackViteConfig can ever set external to an array or regex, the early return will break that configuration. However, if this scenario is guaranteed never to occur (as suggested by the comment), the defensive check is acceptable.

If you want to handle all external types robustly, apply this diff:

     if (typeof config?.build?.rollupOptions?.external !== 'function') {
-      // this can never happen, but we need to make typescript happy
-      return
+      // If external is not a function, keep it as-is but still block solid-js
+      const staticExternal = config.build.rollupOptions.external
+      config.build.rollupOptions.external = (id: string) => {
+        if (id === 'solid-js' || id.startsWith('solid-js/')) return false
+        // staticExternal could be string, regex, or array - let Rollup handle it
+        return undefined // Let Rollup apply staticExternal pattern
+      }
+      return config
     }

Otherwise, verify with the maintainers that tanstackViteConfig always sets a function and this branch is truly unreachable.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 189b0df and 7582b93.

📒 Files selected for processing (1)

• packages/router-devtools-core/vite.config.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

• packages/router-devtools-core/vite.config.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Test

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7582b93 and 186cfee.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• package.json (1 hunks)
• packages/router-devtools-core/vite.config.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/package.json

📄 CodeRabbit inference engine (AGENTS.md)

Use workspace:* protocol for internal dependencies in package.json files

Files:

• package.json

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

• packages/router-devtools-core/vite.config.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Test

🔇 Additional comments (1)

package.json (1)

41-41: @tanstack/config v0.21.0 upgrade is safe
Confirmed support for bundledDeps, no security advisories, and no breaking changes impacting this usage.

[schiller-manuel]

why do we need to upgrade config? what does this version do that we need?

[birkskyum]

@schiller-manuel , I can see that the latest tanstack config has this change:

• feat: support for bundling dependencies config#302

[birkskyum]

The issues that show up in the CI here are indeed unrelated to the PR. The errors show when bumping tanstack/config from 0.16.1 to 0.17.0 or higher on the main branch. @lachlancollins , I can see 0.17.1 move to TypeScirpt, but it appear much stricter already from 0.17.0 - do you know how that can be?