docs(solid-router): webpack example and installation guide #5833
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
WalkthroughThis PR adds a complete Solid.js Webpack file-based routing quickstart example with accompanying documentation. It includes configuration files, route definitions, a generated routeTree file, and step-by-step installation guidance for integrating TanStack Router with Webpack in Solid projects. Changes
Sequence DiagramsequenceDiagram
participant Browser
participant Webpack
participant App
participant Router
participant RouteTree as routeTree.gen.ts
participant Component as Route Component
Browser->>Webpack: Load index.html
Webpack->>App: Execute src/index.tsx
App->>App: render(App, root)
App->>Router: Create router from routeTree
Router->>RouteTree: Import route definitions
RouteTree->>Router: Return route tree with types
Router->>App: RouterProvider established
Note over App: User navigates
Browser->>Router: User clicks Link
Router->>RouteTree: Match route path
RouteTree->>Component: Get component for path
Component->>Browser: Render matched component
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~35–45 minutes Areas requiring attention:
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
View your CI Pipeline Execution ↗ for commit 503f68a
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
examples/solid/quickstart-webpack-file-based/webpack.config.js (1)
43-44: Use an absolute path fordevServer.static.When this config runs from outside the example directory (e.g., via workspace-wide scripts),
'public'resolves relative to the current working directory and can miss the intended folder. Webpack’s guidance is to supply absolute static directories to avoid those resolution issues.(webpack.js.org)- static: ['public'], + static: [path.resolve(__dirname, './public')],docs/router/framework/solid/installation/with-webpack.md (1)
29-36: Replace non-descriptive “here” link textMarkdown lint (MD059) warns about generic link text. Please swap “here” for descriptive wording so readers know what they’ll open.
-And in the .babelrc (SWC doesn't support solid-js, see [here](https://www.answeroverflow.com/m/1135200483116593182)), add these presets: +And in the .babelrc (SWC doesn't support solid-js; see the [AnswerOverflow discussion](https://www.answeroverflow.com/m/1135200483116593182)), add these presets:
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
docs/router/framework/solid/installation/with-webpack.md(1 hunks)examples/solid/quickstart-webpack-file-based/.babelrc(1 hunks)examples/solid/quickstart-webpack-file-based/.gitignore(1 hunks)examples/solid/quickstart-webpack-file-based/.vscode/settings.json(1 hunks)examples/solid/quickstart-webpack-file-based/README.md(1 hunks)examples/solid/quickstart-webpack-file-based/package.json(1 hunks)examples/solid/quickstart-webpack-file-based/public/index.html(1 hunks)examples/solid/quickstart-webpack-file-based/src/app.tsx(1 hunks)examples/solid/quickstart-webpack-file-based/src/index.tsx(1 hunks)examples/solid/quickstart-webpack-file-based/src/routeTree.gen.ts(1 hunks)examples/solid/quickstart-webpack-file-based/src/routes/__root.tsx(1 hunks)examples/solid/quickstart-webpack-file-based/src/routes/about.tsx(1 hunks)examples/solid/quickstart-webpack-file-based/src/routes/index.tsx(1 hunks)examples/solid/quickstart-webpack-file-based/tsconfig.json(1 hunks)examples/solid/quickstart-webpack-file-based/webpack.config.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/router/framework/solid/installation/with-webpack.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/router/framework/solid/installation/with-webpack.md
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/quickstart-webpack-file-based/src/app.tsxexamples/solid/quickstart-webpack-file-based/src/index.tsxexamples/solid/quickstart-webpack-file-based/src/routes/about.tsxexamples/solid/quickstart-webpack-file-based/src/routes/__root.tsxexamples/solid/quickstart-webpack-file-based/src/routeTree.gen.tsexamples/solid/quickstart-webpack-file-based/src/routes/index.tsx
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/quickstart-webpack-file-based/src/app.tsxexamples/solid/quickstart-webpack-file-based/src/index.tsxexamples/solid/quickstart-webpack-file-based/README.mdexamples/solid/quickstart-webpack-file-based/tsconfig.jsonexamples/solid/quickstart-webpack-file-based/src/routes/about.tsxexamples/solid/quickstart-webpack-file-based/public/index.htmlexamples/solid/quickstart-webpack-file-based/webpack.config.jsexamples/solid/quickstart-webpack-file-based/src/routes/__root.tsxexamples/solid/quickstart-webpack-file-based/src/routeTree.gen.tsexamples/solid/quickstart-webpack-file-based/src/routes/index.tsxexamples/solid/quickstart-webpack-file-based/package.json
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/quickstart-webpack-file-based/src/routes/about.tsxexamples/solid/quickstart-webpack-file-based/src/routes/__root.tsxexamples/solid/quickstart-webpack-file-based/src/routes/index.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/quickstart-webpack-file-based/package.json
🧠 Learnings (12)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to docs/{router,start}/** : Place router docs under docs/router/ and start framework docs under docs/start/
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
examples/solid/quickstart-webpack-file-based/.vscode/settings.jsondocs/router/framework/solid/installation/with-webpack.mdexamples/solid/quickstart-webpack-file-based/src/app.tsxexamples/solid/quickstart-webpack-file-based/src/routes/__root.tsxexamples/solid/quickstart-webpack-file-based/src/routeTree.gen.ts
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
examples/solid/quickstart-webpack-file-based/.vscode/settings.jsondocs/router/framework/solid/installation/with-webpack.mdexamples/solid/quickstart-webpack-file-based/src/app.tsxexamples/solid/quickstart-webpack-file-based/src/routes/about.tsxexamples/solid/quickstart-webpack-file-based/src/routes/__root.tsxexamples/solid/quickstart-webpack-file-based/src/routeTree.gen.tsexamples/solid/quickstart-webpack-file-based/src/routes/index.tsx
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
examples/solid/quickstart-webpack-file-based/.vscode/settings.jsondocs/router/framework/solid/installation/with-webpack.mdexamples/solid/quickstart-webpack-file-based/src/app.tsxexamples/solid/quickstart-webpack-file-based/src/index.tsxexamples/solid/quickstart-webpack-file-based/tsconfig.jsonexamples/solid/quickstart-webpack-file-based/.babelrcexamples/solid/quickstart-webpack-file-based/src/routes/about.tsxexamples/solid/quickstart-webpack-file-based/src/routes/__root.tsxexamples/solid/quickstart-webpack-file-based/src/routeTree.gen.tsexamples/solid/quickstart-webpack-file-based/src/routes/index.tsxexamples/solid/quickstart-webpack-file-based/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
Applied to files:
examples/solid/quickstart-webpack-file-based/.vscode/settings.jsondocs/router/framework/solid/installation/with-webpack.mdexamples/solid/quickstart-webpack-file-based/src/routeTree.gen.tsexamples/solid/quickstart-webpack-file-based/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/solid/quickstart-webpack-file-based/.vscode/settings.jsonexamples/solid/quickstart-webpack-file-based/tsconfig.jsonexamples/solid/quickstart-webpack-file-based/.babelrc
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
examples/solid/quickstart-webpack-file-based/.vscode/settings.jsonexamples/solid/quickstart-webpack-file-based/src/app.tsxexamples/solid/quickstart-webpack-file-based/src/index.tsxexamples/solid/quickstart-webpack-file-based/src/routeTree.gen.tsexamples/solid/quickstart-webpack-file-based/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to docs/{router,start}/** : Place router docs under docs/router/ and start framework docs under docs/start/
Applied to files:
docs/router/framework/solid/installation/with-webpack.md
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 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
Applied to files:
docs/router/framework/solid/installation/with-webpack.mdexamples/solid/quickstart-webpack-file-based/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
examples/solid/quickstart-webpack-file-based/src/app.tsxexamples/solid/quickstart-webpack-file-based/src/routes/__root.tsx
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/quickstart-webpack-file-based/src/routes/about.tsxexamples/solid/quickstart-webpack-file-based/src/routeTree.gen.tsexamples/solid/quickstart-webpack-file-based/src/routes/index.tsx
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/package.json : Use workspace:* protocol for internal dependencies in package.json files
Applied to files:
examples/solid/quickstart-webpack-file-based/package.json
🧬 Code graph analysis (3)
examples/solid/quickstart-webpack-file-based/src/routes/about.tsx (2)
examples/solid/quickstart-webpack-file-based/src/routes/__root.tsx (1)
Route(4-6)examples/solid/quickstart-webpack-file-based/src/routes/index.tsx (1)
Route(3-5)
examples/solid/quickstart-webpack-file-based/src/routes/__root.tsx (3)
examples/solid/quickstart-webpack-file-based/src/routes/about.tsx (1)
Route(3-5)examples/solid/quickstart-webpack-file-based/src/routes/index.tsx (1)
Route(3-5)examples/solid/quickstart-file-based/src/routes/__root.tsx (1)
RootComponent(13-41)
examples/solid/quickstart-webpack-file-based/src/routes/index.tsx (2)
examples/solid/quickstart-webpack-file-based/src/routes/__root.tsx (1)
Route(4-6)examples/solid/quickstart-webpack-file-based/src/routes/about.tsx (1)
Route(3-5)
🪛 markdownlint-cli2 (0.18.1)
docs/router/framework/solid/installation/with-webpack.md
29-29: Link text should be descriptive
(MD059, descriptive-link-text)
⏰ 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). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (7)
examples/solid/quickstart-webpack-file-based/README.md (1)
1-6: LGTM!Clear and concise instructions for running the example.
examples/solid/quickstart-webpack-file-based/public/index.html (1)
1-12: LGTM!Standard HTML entry point with proper meta tags and Tailwind CSS CDN for styling. The structure is appropriate for an example application.
examples/solid/quickstart-webpack-file-based/.gitignore (1)
1-11: LGTM!Standard ignore patterns covering local files, build artifacts, and IDE metadata.
examples/solid/quickstart-webpack-file-based/src/routes/index.tsx (1)
1-13: LGTM!Properly structured file-based route using
createFileRoutewith a simple home component. Follows TanStack Router conventions for Solid.examples/solid/quickstart-webpack-file-based/src/routes/about.tsx (1)
1-13: LGTM!Properly structured file-based route for the about page, following the same pattern as the index route.
examples/solid/quickstart-webpack-file-based/tsconfig.json (1)
1-16: LGTM!TypeScript configuration is properly set up for Solid.js with strict mode enabled and appropriate compiler options for the Webpack environment.
examples/solid/quickstart-webpack-file-based/.vscode/settings.json (1)
1-11: LGTM!Properly configures VSCode to treat the autogenerated
routeTree.gen.tsfile as readonly and excludes it from watchers and search results. This aligns with best practices for handling generated files.
Comment on lines
+10
to
+12
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "solid-js": "^1.9.10" |
Contributor
There was a problem hiding this comment.
Use workspace protocol for internal TanStack dependencies.
Internal TanStack packages should use the workspace:* protocol instead of specific version numbers to ensure proper monorepo dependency resolution.
Apply this diff to fix the dependencies:
"dependencies": {
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
"solid-js": "^1.9.10"
},Based on learnings
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "@tanstack/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "solid-js": "^1.9.10" | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "solid-js": "^1.9.10" |
🤖 Prompt for AI Agents
In examples/solid/quickstart-webpack-file-based/package.json around lines 10 to
12, the TanStack internal packages are pinned to fixed versions; replace the
version strings for "@tanstack/solid-router" and
"@tanstack/solid-router-devtools" with the workspace protocol (e.g.,
"workspace:*") so the monorepo resolves internal dependencies correctly, leaving
"solid-js" as-is.
| "@babel/core": "^7.28.5", | ||
| "@babel/preset-typescript": "^7.27.1", | ||
| "@swc/core": "^1.10.15", | ||
| "@tanstack/router-plugin": "^1.135.2", |
Contributor
There was a problem hiding this comment.
Use workspace protocol for @tanstack/router-plugin.
The @tanstack/router-plugin is an internal package and should use the workspace:* protocol.
Apply this diff:
"@swc/core": "^1.10.15",
- "@tanstack/router-plugin": "^1.135.2",
+ "@tanstack/router-plugin": "workspace:*",
"babel-loader": "^10.0.0",Based on learnings
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "@tanstack/router-plugin": "^1.135.2", | |
| "@swc/core": "^1.10.15", | |
| "@tanstack/router-plugin": "workspace:*", | |
| "babel-loader": "^10.0.0", |
🤖 Prompt for AI Agents
In examples/solid/quickstart-webpack-file-based/package.json around line 18, the
dependency "@tanstack/router-plugin" uses a semantic version "^1.135.2" but it
should reference the local/internal package via the workspace protocol; update
the dependency entry to use "workspace:*" (i.e., replace the version string with
workspace:*), save package.json and run your package manager's install so the
workspace link is resolved.
This was referenced Nov 12, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Documentation
New Features