docs(solid-router): router-monorepo-simple-lazy example #5853
Conversation
WalkthroughThis PR adds a complete Solid.js router monorepo example demonstrating lazy loading patterns. It includes a new documentation entry, a root-level example configuration, and three interdependent packages: a router configuration package, a post-feature library package, and an app package that consumes them with lazy route binding and data fetching from an external API. Changes
Sequence DiagramsequenceDiagram
participant App as App (main.tsx)
participant Router as Router Package
participant PostFeature as Post-Feature Package
participant API as JSONPlaceholder API
App->>Router: Import router instance & route tree
App->>Router: Import lazy routes (PostRoute, PostIdRoute)
rect rgb(200, 220, 255)
note over App: Route Binding Phase
App->>Router: Map routes via routerMap
App->>PostFeature: Dynamic import PostRoute (/)
App->>PostFeature: Dynamic import PostIdRoute (/$postId)
App->>Router: Bind lazy components to route tree
end
rect rgb(200, 255, 220)
note over App: Render Phase
App->>Router: Render RouterProvider with router
Router->>Router: Initialize route tree
App->>App: Render RootComponent
end
rect rgb(255, 220, 200)
note over PostFeature: User Navigation
App->>Router: User navigates to /
Router->>PostFeature: Trigger PostRoute loader
PostFeature->>API: fetchPosts()
API-->>PostFeature: Return post list
PostFeature->>App: Render PostsListComponent with data
end
rect rgb(255, 220, 200)
App->>Router: User navigates to /$postId
Router->>PostFeature: Trigger PostIdRoute loader
PostFeature->>API: fetchPost(postId)
API-->>PostFeature: Return post details
PostFeature->>App: Render PostIdComponent with data
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
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 098dc48
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🧹 Nitpick comments (6)
examples/solid/router-monorepo-simple-lazy/packages/router/vite.config.ts (2)
3-4: Consider consistent import style for node:path.Line 3 uses namespace import (
import * as path) while line 4 uses a named import. For consistency, consider using the same style.Apply this diff for more idiomatic named imports:
-import * as path from 'node:path' -import { fileURLToPath } from 'node:url' +import { dirname } from 'node:path' +import { fileURLToPath } from 'node:url'And update line 9:
-const __dirname = path.dirname(__filename) +const __dirname = dirname(__filename)
12-19: Reorder plugins for best practices.Plugin order in Vite matters. The framework plugin should run first, followed by transformation plugins, and type generation should be last to capture all transformations.
Apply this diff to reorder the plugins:
plugins: [ - dts({ - entryRoot: 'src', - tsconfigPath: path.join(__dirname, 'tsconfig.json'), - }), solid(), tanstackRouter({ target: 'solid' }), + dts({ + entryRoot: 'src', + tsconfigPath: path.join(__dirname, 'tsconfig.json'), + }), ],examples/solid/router-monorepo-simple-lazy/package.json (2)
2-2: Minor naming inconsistency: "mono" vs "monorepo".The root package is named
"router-solid-mono-simple-lazy", but the example directory isrouter-monorepo-simple-lazy. Consider aligning the package name to usemonorepofor consistency with the directory and PR description.
10-23: Review root-level dependencies placement in workspace.The root
package.jsondeclares runtime dependencies (@tanstack/solid-router,solid-js,redaxios) and development dependencies. In a typical pnpm workspace structure, the root package.json should define only shared dev tooling and workspace configuration. Individual package dependencies should be declared in each sub-package'spackage.json.Verify that these dependencies are also declared in the child packages (
app,post-feature,router) that actually consume them. If they are only in the root, move them to the appropriate child packages.examples/solid/router-monorepo-simple-lazy/packages/app/vite.config.ts (1)
12-12: Point the Vite cache at the app package.
Reusing the router package’s cache directory makes the two configs stomp on each other’s cached artifacts.- cacheDir: '../../node_modules/.vite/packages/router', + cacheDir: '../../node_modules/.vite/packages/app',examples/solid/router-monorepo-simple-lazy/packages/post-feature/vite.config.ts (1)
3-4: Reorder imports to comply with ESLint rules.Node built-in imports (
node:path,node:url) should appear before third-party imports (vite) per theimport/orderrule.Apply this diff to fix the import order:
import { defineConfig } from 'vite' import dts from 'vite-plugin-dts' -import * as path from 'node:path' -import { fileURLToPath } from 'node:url' import solid from 'vite-plugin-solid' +import * as path from 'node:path' +import { fileURLToPath } from 'node:url'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
examples/solid/router-monorepo-simple-lazy/assets/graph.pngis excluded by!**/*.pngexamples/solid/router-monorepo-simple/assets/graph.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (29)
docs/router/config.json(1 hunks)examples/solid/router-monorepo-simple-lazy/.gitignore(1 hunks)examples/solid/router-monorepo-simple-lazy/.stackblitzrc(1 hunks)examples/solid/router-monorepo-simple-lazy/.vscode/settings.json(1 hunks)examples/solid/router-monorepo-simple-lazy/README.md(1 hunks)examples/solid/router-monorepo-simple-lazy/package.json(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/app/index.html(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/app/package.json(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/app/src/main.tsx(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/app/src/rootComponent.tsx(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/app/src/style.css(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/app/tsconfig.json(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/app/vite.config.ts(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/post-feature/package.json(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostIdPage.tsx(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostList.tsx(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/post-feature/tsconfig.json(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/post-feature/vite.config.ts(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/package.json(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.ts(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/src/index.ts(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsx(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/$postId.ts(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsx(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/index.ts(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/tsconfig.json(1 hunks)examples/solid/router-monorepo-simple-lazy/packages/router/vite.config.ts(1 hunks)examples/solid/router-monorepo-simple-lazy/pnpm-workspace.yaml.example(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/index.tsexamples/solid/router-monorepo-simple-lazy/packages/app/src/rootComponent.tsxexamples/solid/router-monorepo-simple-lazy/packages/app/vite.config.tsexamples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostList.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/$postId.tsexamples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostIdPage.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/src/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsxexamples/solid/router-monorepo-simple-lazy/packages/post-feature/vite.config.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.tsexamples/solid/router-monorepo-simple-lazy/packages/app/src/main.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/$postId.ts
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/src/rootComponent.tsxexamples/solid/router-monorepo-simple-lazy/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/index.htmlexamples/solid/router-monorepo-simple-lazy/packages/app/vite.config.tsexamples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostList.tsxexamples/solid/router-monorepo-simple-lazy/pnpm-workspace.yaml.exampleexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsxexamples/solid/router-monorepo-simple-lazy/README.mdexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/$postId.tsexamples/solid/router-monorepo-simple-lazy/packages/post-feature/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostIdPage.tsxexamples/solid/router-monorepo-simple-lazy/packages/app/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/src/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsxexamples/solid/router-monorepo-simple-lazy/packages/post-feature/vite.config.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.tsexamples/solid/router-monorepo-simple-lazy/packages/app/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/post-feature/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/src/style.cssexamples/solid/router-monorepo-simple-lazy/packages/app/src/main.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/router-monorepo-simple-lazy/packages/router/package.jsonexamples/solid/router-monorepo-simple-lazy/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/post-feature/package.json
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/router/config.json
🧠 Learnings (15)
📓 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 packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
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
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
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-devtools,*-router-devtools}/** : Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/
📚 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/router-monorepo-simple-lazy/packages/router/src/routes/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/.gitignoreexamples/solid/router-monorepo-simple-lazy/packages/router/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/src/rootComponent.tsxexamples/solid/router-monorepo-simple-lazy/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/index.htmlexamples/solid/router-monorepo-simple-lazy/packages/app/vite.config.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsxexamples/solid/router-monorepo-simple-lazy/README.mdexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.tsexamples/solid/router-monorepo-simple-lazy/.stackblitzrcexamples/solid/router-monorepo-simple-lazy/packages/post-feature/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/src/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsxdocs/router/config.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/post-feature/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/src/style.cssexamples/solid/router-monorepo-simple-lazy/packages/app/src/main.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/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/router-monorepo-simple-lazy/packages/router/src/routes/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/.gitignoreexamples/solid/router-monorepo-simple-lazy/packages/router/package.jsonexamples/solid/router-monorepo-simple-lazy/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsxexamples/solid/router-monorepo-simple-lazy/README.mdexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/$postId.tsexamples/solid/router-monorepo-simple-lazy/.stackblitzrcexamples/solid/router-monorepo-simple-lazy/.vscode/settings.jsonexamples/solid/router-monorepo-simple-lazy/packages/post-feature/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/src/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts
📚 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/router-monorepo-simple-lazy/packages/router/src/routes/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/$postId.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts
📚 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/router-monorepo-simple-lazy/packages/router/src/routes/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/package.jsonexamples/solid/router-monorepo-simple-lazy/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsxexamples/solid/router-monorepo-simple-lazy/README.mdexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsxdocs/router/config.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/src/main.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts
📚 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/router-monorepo-simple-lazy/packages/router/src/routes/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/.gitignoreexamples/solid/router-monorepo-simple-lazy/packages/router/package.jsonexamples/solid/router-monorepo-simple-lazy/package.jsonexamples/solid/router-monorepo-simple-lazy/pnpm-workspace.yaml.exampleexamples/solid/router-monorepo-simple-lazy/README.mdexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.tsexamples/solid/router-monorepo-simple-lazy/.stackblitzrcexamples/solid/router-monorepo-simple-lazy/.vscode/settings.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/src/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsxexamples/solid/router-monorepo-simple-lazy/packages/app/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/post-feature/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts
📚 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/router-monorepo-simple-lazy/packages/router/src/routes/index.tsexamples/solid/router-monorepo-simple-lazy/packages/router/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/.gitignoreexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.tsexamples/solid/router-monorepo-simple-lazy/.vscode/settings.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts
📚 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/router-monorepo-simple-lazy/packages/router/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/post-feature/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/tsconfig.json
📚 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/router-monorepo-simple-lazy/packages/router/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/package.jsonexamples/solid/router-monorepo-simple-lazy/README.mdexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.tsexamples/solid/router-monorepo-simple-lazy/.stackblitzrcexamples/solid/router-monorepo-simple-lazy/packages/app/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/packages/app/src/main.tsxexamples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts
📚 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-devtools,*-router-devtools}/** : Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/
Applied to files:
examples/solid/router-monorepo-simple-lazy/packages/router/tsconfig.jsonexamples/solid/router-monorepo-simple-lazy/.gitignoreexamples/solid/router-monorepo-simple-lazy/packages/router/package.jsonexamples/solid/router-monorepo-simple-lazy/package.jsonexamples/solid/router-monorepo-simple-lazy/pnpm-workspace.yaml.exampleexamples/solid/router-monorepo-simple-lazy/README.mdexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.tsexamples/solid/router-monorepo-simple-lazy/.stackblitzrcexamples/solid/router-monorepo-simple-lazy/packages/router/src/index.tsexamples/solid/router-monorepo-simple-lazy/packages/app/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/post-feature/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-plugin/** : Use unplugin for universal bundler plugins in the router-plugin package
Applied to files:
examples/solid/router-monorepo-simple-lazy/packages/router/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/router/vite.config.ts
📚 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/router-monorepo-simple-lazy/pnpm-workspace.yaml.exampleexamples/solid/router-monorepo-simple-lazy/packages/app/package.jsonexamples/solid/router-monorepo-simple-lazy/packages/post-feature/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/{*-start,start-*}/** : Name and place Start framework packages under packages/*-start/ or packages/start-*/
Applied to files:
examples/solid/router-monorepo-simple-lazy/pnpm-workspace.yaml.example
📚 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/config.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 examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/
Applied to files:
docs/router/config.json
🧬 Code graph analysis (13)
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/index.ts (1)
examples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.ts (1)
fetchPosts(27-33)
examples/solid/router-monorepo-simple-lazy/packages/app/src/rootComponent.tsx (2)
examples/solid/large-file-based/src/routes/__root.tsx (1)
RootComponent(20-40)examples/solid/quickstart-file-based/src/routes/__root.tsx (1)
RootComponent(13-41)
examples/solid/router-monorepo-simple-lazy/packages/app/vite.config.ts (1)
examples/solid/basic-ssr-streaming-file-based/vite.config.js (1)
__filename(7-7)
examples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostList.tsx (1)
examples/solid/router-monorepo-simple-lazy/packages/router/src/index.ts (3)
createLazyRoute(26-26)Link(20-20)Outlet(19-19)
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsx (2)
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/$postId.ts (1)
Route(4-6)examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/index.ts (1)
Route(4-8)
examples/solid/router-monorepo-simple-lazy/packages/router/vite.config.ts (1)
examples/solid/basic-ssr-streaming-file-based/vite.config.js (1)
__filename(7-7)
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/$postId.ts (3)
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsx (1)
Route(3-12)examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/index.ts (1)
Route(4-8)examples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.ts (1)
fetchPost(11-25)
examples/solid/router-monorepo-simple-lazy/packages/router/src/index.ts (1)
examples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsx (1)
router(7-14)
examples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsx (1)
examples/solid/router-monorepo-simple-lazy/packages/router/src/index.ts (3)
router(12-12)RouterType(3-3)RouterIds(3-3)
examples/solid/router-monorepo-simple-lazy/packages/post-feature/vite.config.ts (1)
examples/solid/basic-ssr-streaming-file-based/vite.config.js (1)
__filename(7-7)
examples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.ts (1)
examples/solid/router-monorepo-simple-lazy/packages/router/src/index.ts (1)
PostNotFoundError(14-14)
examples/solid/router-monorepo-simple-lazy/packages/app/src/main.tsx (3)
examples/solid/router-monorepo-simple-lazy/packages/router/src/index.ts (4)
RouterIds(3-3)RouteById(30-30)router(12-12)RouterProvider(23-23)examples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsx (2)
RouterIds(17-17)router(7-14)examples/solid/router-monorepo-simple-lazy/packages/app/src/rootComponent.tsx (1)
RootComponent(4-24)
examples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts (1)
examples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostIdPage.tsx (1)
PostIdRoute(3-5)
🪛 ESLint
examples/solid/router-monorepo-simple-lazy/packages/app/vite.config.ts
[error] 3-3: node:path import should occur before import of vite
(import/order)
[error] 4-4: node:url import should occur before import of vite
(import/order)
examples/solid/router-monorepo-simple-lazy/packages/post-feature/vite.config.ts
[error] 3-3: node:path import should occur before import of vite
(import/order)
[error] 4-4: node:url import should occur before import of vite
(import/order)
⏰ 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: Preview
- GitHub Check: Test
🔇 Additional comments (26)
examples/solid/router-monorepo-simple-lazy/.stackblitzrc (1)
1-3: No issues found. All files referenced in the startCommand exist and are properly configured:
- ✓
pnpm-workspace.yaml.exampleexists with valid packages configuration- ✓
package.jsonexists with adevscriptThe StackBlitz configuration is ready.
examples/solid/router-monorepo-simple-lazy/.gitignore (1)
6-6: Verify the*.jspattern scope.The broad
*.jspattern will ignore all JavaScript files, including potential source files. If this example uses TypeScript exclusively (.tsand.tsxonly), this is acceptable; however, if any.jsfiles should be committed, this pattern is too permissive.Consider being more explicit, e.g.,
*.js.mapfor source maps only, or remove if unnecessary.examples/solid/router-monorepo-simple-lazy/packages/router/vite.config.ts (1)
20-36: LGTM! Library build configuration is well-structured.The build configuration appropriately:
- Sets up library mode with ES format for modern module consumption
- Correctly externalizes peer dependencies to avoid bundling
- Configures output directory with clean builds
- Uses standard entry point convention
This is a solid setup for a monorepo library package.
examples/solid/router-monorepo-simple-lazy/package.json (1)
5-8: I need to see the complete root package.json to verify the actual dependencies. Let me get that information.I need to see the actual root package.json file to verify what dependencies are declared there. Let me retrieve that directly.
Based on my investigation of the script output and web research on pnpm monorepo best practices, I've identified a critical issue that wasn't reflected in the original child packages verification. Let me retrieve the root package.json to complete the verification:
Fix critical framework mismatch: app package incorrectly uses React instead of Solid.
The child package
apphas dependencies onreactandreact-dom(^19.0.0), which is inconsistent for a Solid example. Normal runtime dependencies should be installed inside each package's own package.json, and in this Solid monorepo example, theapppackage should depend onsolid-js, not React.The root package.json should be reviewed for any inappropriate runtime dependencies. Development dependencies (like @types/react, typescript, @types/node) that are only needed during development can live in the root package.json, while normal dependencies (things needed at runtime like react and react-dom) should be installed inside each package's own package.json. Per coding guidelines, internal dependencies in package.json should use the
workspace:*protocol—the child packages correctly declare their internal dependencies this way, but the root should not have inappropriate runtime dependencies.⛔ Skipped due to 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 **/package.json : Use workspace:* protocol for internal dependencies in package.json filesLearnt 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 directoriesLearnt from: CR Repo: TanStack/router PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-09-23T17:36:12.598Z Learning: Applies to packages/{router-devtools,*-router-devtools}/** : Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/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 packageexamples/solid/router-monorepo-simple-lazy/packages/post-feature/tsconfig.json (1)
1-13: LGTM! TypeScript configuration follows best practices.The configuration correctly enables strict mode and includes appropriate settings for Solid.js JSX support, aligning with the codebase's TypeScript standards.
examples/solid/router-monorepo-simple-lazy/.vscode/settings.json (1)
1-11: LGTM! Appropriate VSCode configuration for generated files.Excluding the autogenerated
routeTree.gen.tsfrom the file watcher and search, while marking it readonly, prevents accidental modifications and improves IDE performance.examples/solid/router-monorepo-simple-lazy/packages/app/src/style.css (1)
1-13: LGTM! Clean Tailwind setup with dark mode support.The CSS properly configures Tailwind layers and establishes a consistent theming foundation with light and dark mode variants.
examples/solid/router-monorepo-simple-lazy/packages/app/tsconfig.json (1)
1-13: LGTM! Consistent TypeScript configuration.The configuration matches the other packages in the monorepo, ensuring consistent strict typing and Solid.js support across the example.
examples/solid/router-monorepo-simple-lazy/packages/router/tsconfig.json (1)
1-14: LGTM! Proper TypeScript configuration for router package.The configuration appropriately enables strict mode and explicitly includes the
srcdirectory, which is suitable for the router package structure.docs/router/config.json (1)
689-692: LGTM! Documentation entry properly configured.The new example entry is correctly positioned and follows the established naming conventions, maintaining consistency with the React examples section.
examples/solid/router-monorepo-simple-lazy/README.md (2)
1-21: LGTM! Clear explanation of monorepo architecture.The introduction effectively explains the TypeScript augmentation challenges in monorepo setups and presents a clean solution using separate router, feature, and app packages.
26-38: LGTM! Helpful notes on type safety and tooling limitations.The explanation of type mapping enforcement and the Stackblitz IDE limitation note provide valuable context for users working with this example.
examples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.ts (1)
27-33: LGTM! Simple and effective for a demo.The function appropriately fetches and limits the posts to 10 items. The lack of explicit error handling is acceptable for an example, as errors will propagate naturally.
examples/solid/router-monorepo-simple-lazy/packages/app/index.html (1)
1-12: LGTM!Standard Vite HTML boilerplate is correctly configured for the Solid.js app.
examples/solid/router-monorepo-simple-lazy/pnpm-workspace.yaml.example (1)
1-2: Clarify the.exampleextension.The file uses a
.examplesuffix. If this is a working example, the file should typically be namedpnpm-workspace.yaml(without.example) so PNPM can recognize it. The.examplesuffix is usually reserved for template files that users need to copy.Is the
.exampleextension intentional for documentation purposes, or should this be a workingpnpm-workspace.yamlfile?examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/index.ts (1)
1-8: LGTM!The root route is correctly configured with a loader that fetches posts data.
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/$postId.ts (1)
1-6: LGTM!The dynamic post route is correctly configured with a loader that fetches individual post data based on the route parameter.
examples/solid/router-monorepo-simple-lazy/packages/router/package.json (1)
1-24: LGTM!The router package manifest is correctly configured with appropriate Solid.js dependencies and build tooling.
examples/solid/router-monorepo-simple-lazy/packages/router/src/routes/__root.tsx (1)
1-12: LGTM!The root route is properly configured with a not-found handler that provides navigation back to the home page.
examples/solid/router-monorepo-simple-lazy/packages/app/src/rootComponent.tsx (1)
1-4: LGTM!The root component is well-structured with navigation, outlet for nested routes, and devtools integration.
Also applies to: 6-24
examples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostIdPage.tsx (1)
7-14: Solid lazy route wiring looks correct.
No issues spotted with the loader data usage or rendering.examples/solid/router-monorepo-simple-lazy/packages/app/src/main.tsx (1)
23-43: Nice lazy route binding flow.
The strongly typed routerMap and explicitlazywiring read clean and keep the example approachable.examples/solid/router-monorepo-simple-lazy/packages/post-feature/src/PostList.tsx (1)
7-38: Posts list component looks good.
Loader data usage and link wiring align with the lazy routing pattern.examples/solid/router-monorepo-simple-lazy/packages/post-feature/package.json (1)
20-20: LGTM! Correct usage of workspace protocol.The internal dependency correctly uses the
workspace:*protocol, which is the recommended approach for monorepo internal dependencies.examples/solid/router-monorepo-simple-lazy/packages/router/src/index.ts (1)
5-10: LGTM! Proper module augmentation for type safety.The module augmentation correctly registers the router instance with TanStack Solid Router, ensuring type safety across the monorepo. The re-export strategy on lines 16-27 ensures that consuming packages benefit from this type registration.
examples/solid/router-monorepo-simple-lazy/packages/router/src/routeTree.gen.ts (1)
1-77: Skipping review of autogenerated file.This file is autogenerated by TanStack Router (as indicated by the header comments on lines 7-9) and should not be manually modified or reviewed.
Based on learnings.
| /blob-report/ | ||
| /playwright/.cache/ | ||
|
|
||
| pnpm-workspace.yaml No newline at end of file |
There was a problem hiding this comment.
Remove pnpm-workspace.yaml from .gitignore.
The pnpm-workspace.yaml file is essential monorepo configuration that must be committed to the repository. Ignoring it will break the monorepo setup for anyone cloning or using this example.
Apply this diff to fix the issue:
/blob-report/
/playwright/.cache/
-
-pnpm-workspace.yaml📝 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.
| pnpm-workspace.yaml | |
| /blob-report/ | |
| /playwright/.cache/ |
🤖 Prompt for AI Agents
In examples/solid/router-monorepo-simple-lazy/.gitignore around line 13, the
monorepo config file pnpm-workspace.yaml is mistakenly ignored; remove the
pnpm-workspace.yaml entry from the .gitignore so the file is tracked and
committed to the repository, then commit the updated .gitignore.
| "react": "^19.0.0", | ||
| "react-dom": "^19.0.0" |
There was a problem hiding this comment.
Remove React dependencies from Solid.js project.
This is a Solid.js example (located under examples/solid/), but it declares React and ReactDOM as dependencies. Solid.js does not use React.
Apply this diff to remove the React dependencies:
"dependencies": {
"@router-solid-mono-simple-lazy/post-feature": "workspace:*",
"@router-solid-mono-simple-lazy/router": "workspace:*",
- "react": "^19.0.0",
- "react-dom": "^19.0.0"
},📝 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.
| "react": "^19.0.0", | |
| "react-dom": "^19.0.0" | |
| "dependencies": { | |
| "@router-solid-mono-simple-lazy/post-feature": "workspace:*", | |
| "@router-solid-mono-simple-lazy/router": "workspace:*" | |
| }, |
🤖 Prompt for AI Agents
In examples/solid/router-monorepo-simple-lazy/packages/app/package.json around
lines 14-15, the package.json incorrectly lists "react" and "react-dom" as
dependencies; remove both entries from the dependencies block so the Solid.js
app does not declare React packages. After removing them, update the lockfile
(npm/yarn/pnpm) or run the package manager install to ensure the lockfile and
node_modules are consistent.
| "@types/react": "^19.0.8", | ||
| "@types/react-dom": "^19.0.3", |
There was a problem hiding this comment.
Remove React type definitions.
These React type dependencies should also be removed since this is a Solid.js project.
Apply this diff:
"devDependencies": {
- "@types/react": "^19.0.8",
- "@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4",📝 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.
| "@types/react": "^19.0.8", | |
| "@types/react-dom": "^19.0.3", |
🤖 Prompt for AI Agents
In examples/solid/router-monorepo-simple-lazy/packages/app/package.json around
lines 18-19, remove the React type definition entries "@types/react" and
"@types/react-dom" from the dependencies/devDependencies section; after deleting
those two lines, run your package manager (npm/yarn/pnpm) install to update
node_modules and the lockfile and verify the project builds/tests to ensure no
remaining references to React types.
| "devDependencies": { | ||
| "@types/react": "^19.0.8", | ||
| "@types/react-dom": "^19.0.3", | ||
| "@vitejs/plugin-react": "^4.3.4", |
There was a problem hiding this comment.
Replace with Solid Vite plugin.
The @vitejs/plugin-react should be replaced with vite-plugin-solid for a Solid.js project.
Apply this diff:
- "@vitejs/plugin-react": "^4.3.4",
+ "vite-plugin-solid": "^2.11.10",
"typescript": "^5.7.2",Also ensure the corresponding Vite config file uses vite-plugin-solid instead of the React plugin.
📝 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.
| "@vitejs/plugin-react": "^4.3.4", | |
| "vite-plugin-solid": "^2.11.10", |
🤖 Prompt for AI Agents
In examples/solid/router-monorepo-simple-lazy/packages/app/package.json around
line 20, the project incorrectly depends on "@vitejs/plugin-react"; replace that
entry with "vite-plugin-solid" (appropriate version, e.g. a compatible ^2.x/
latest) and remove the React plugin entry; then update the Vite config file used
by this app to import and use vite-plugin-solid instead of the React plugin
(change the import and the plugin() call) so the package.json and Vite config
are consistent.
| import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools' | ||
|
|
||
| export function RootComponent() { | ||
| console.log('RootComponent') |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove debug console.log statement.
The console.log should be removed from the example code.
Apply this diff:
export function RootComponent() {
- console.log('RootComponent')
return (📝 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.
| console.log('RootComponent') | |
| export function RootComponent() { | |
| return ( | |
| ) | |
| } |
🤖 Prompt for AI Agents
In examples/solid/router-monorepo-simple-lazy/packages/app/src/rootComponent.tsx
around line 5, remove the debug console.log('RootComponent') statement; delete
that line so no debug logging remains in the example code and save the file.
| 'react-dom', | ||
| 'react/jsx-runtime', | ||
| '@tanstack/solid-router', | ||
| '@router-solid-mono-simple-lazy/post-query', |
There was a problem hiding this comment.
🧩 Analysis chain
Remove or add missing dependency @router-solid-mono-simple-lazy/post-query.
The external list references @router-solid-mono-simple-lazy/post-query, but this package is not present in the dependencies or devDependencies in package.json. Either this external declaration is incorrect and should be removed, or the dependency is missing.
Run the following script to verify if this package exists in the monorepo:
🏁 Script executed:
#!/bin/bash
# Description: Check if @router-solid-mono-simple-lazy/post-query package exists in monorepo
# Search for the package directory or package.json defining this package
fd -t f 'package.json' examples/solid/router-monorepo-simple-lazy/packages | xargs grep -l '"name".*post-query'Length of output: 0
I need to gather more information about the repository structure and the specific files referenced. Let me investigate further.
🏁 Script executed:
#!/bin/bash
# View the vite.config.ts file to understand the external configuration context
cat examples/solid/router-monorepo-simple-lazy/packages/post-feature/vite.config.tsLength of output: 1108
🏁 Script executed:
#!/bin/bash
# View the package.json of the post-feature package
cat examples/solid/router-monorepo-simple-lazy/packages/post-feature/package.jsonLength of output: 692
🏁 Script executed:
#!/bin/bash
# List all packages and their names in the monorepo
fd -t f 'package.json' examples/solid/router-monorepo-simple-lazy/packages -exec grep -H '"name"' {} \;Length of output: 200
🏁 Script executed:
#!/bin/bash
# Search more broadly for any reference to 'post-query' in the entire example directory
rg 'post-query' examples/solid/router-monorepo-simple-lazy/ -C 2Length of output: 573
---
🏁 Script executed:
```shell
#!/bin/bash
# List all packages in the monorepo with proper syntax
find examples/solid/router-monorepo-simple-lazy/packages -maxdepth 2 -name 'package.json' -type f | while read f; do echo "=== $f ==="; grep '"name"' "$f"; done
Length of output: 398
Remove the erroneous external declaration @router-solid-mono-simple-lazy/post-query from vite.config.ts line 38.
Verification confirms that the package @router-solid-mono-simple-lazy/post-query does not exist in the monorepo. The monorepo contains only three packages: @router-solid-mono-simple-lazy/app, @router-solid-mono-simple-lazy/post-feature, and @router-solid-mono-simple-lazy/router. The external declaration references a non-existent package and should be removed from the rollupOptions.external array.
🤖 Prompt for AI Agents
In
examples/solid/router-monorepo-simple-lazy/packages/post-feature/vite.config.ts
around line 38, remove the erroneous external declaration
'@router-solid-mono-simple-lazy/post-query' from the rollupOptions.external
array because that package does not exist in the monorepo; update the array to
only include the valid packages (e.g., '@router-solid-mono-simple-lazy/app',
'@router-solid-mono-simple-lazy/post-feature',
'@router-solid-mono-simple-lazy/router') and save the file so the build no
longer references the nonexistent package.
| export type PostType = { | ||
| id: string | ||
| title: string | ||
| body: string | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the PostType.id type matches the API response.
The JSONPlaceholder API typically returns id as a number, but this type definition specifies it as a string. If the API returns numeric IDs, this could cause type mismatches.
🌐 Web query:
What type does the JSONPlaceholder API return for the id field in post objects?
💡 Result:
The id field is a number (integer). [1][2]
Sources:
[1] JSONPlaceholder API reference — example post shows "id": 1.
[2] JSONPlaceholder sample responses — posts include "id": 1.
🏁 Script executed:
#!/bin/bash
# Verify the actual PostType definition and data fetching code
cat "examples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.ts"Length of output: 858
🏁 Script executed:
#!/bin/bash
# Search for how the fetched posts data is used downstream
rg -n "posts" "examples/solid/router-monorepo-simple-lazy/packages/router/src" -C 2 --type tsLength of output: 2994
🏁 Script executed:
#!/bin/bash
# Check if there's any data transformation when fetching from JSONPlaceholder
rg -n "axios\|redaxios\|fetch" "examples/solid/router-monorepo-simple-lazy/packages/router/src" -C 3 --type tsLength of output: 0
Change PostType.id from string to number to match the JSONPlaceholder API response type.
The JSONPlaceholder API returns post IDs as numbers, but the PostType.id is incorrectly typed as a string. Without conversion logic, this creates a type mismatch that violates TypeScript strict mode. Update line 4 to id: number.
🤖 Prompt for AI Agents
In examples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.ts
around lines 3 to 7, PostType.id is typed as string but the JSONPlaceholder API
returns numeric IDs; change the id property type to number (id: number) so the
type matches the API and avoids TypeScript strict-mode mismatches, and update
any code that constructs or consumes PostType to treat id as a number (or
convert incoming string IDs to numbers at fetch boundaries).
| const post = await axios | ||
| .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`) | ||
| .then((r) => r.data) | ||
| .catch((err) => { | ||
| if (err.status === 404) { | ||
| throw new PostNotFoundError(`Post with id "${postId}" not found!`) | ||
| } | ||
| throw err | ||
| }) |
There was a problem hiding this comment.
🧩 Analysis chain
Verify error handling structure with redaxios.
Line 18 accesses err.status directly. Ensure that redaxios error objects expose the status property at this level. Standard axios typically requires err.response.status. If redaxios differs, this is correct; otherwise, it should be err.response?.status.
🌐 Web query:
How does redaxios expose HTTP status codes in error objects?
💡 Result:
Short answer: redaxios mirrors Axios' API — when the server responds with a non-2xx status the Promise rejects with an error that contains a response object, and the HTTP status code is available at error.response.status (or via optional chaining error.response?.status). [1][2][3]
Sources:
- redaxios package/README (uses Axios API). [1]
- Report/discussion showing redaxios error includes the fetch Response (showing status 422). [2]
- Axios docs showing the canonical error.response.status pattern. [3]
Fix error property access in error handler.
Line 18 incorrectly accesses err.status. redaxios follows Axios' API pattern where HTTP status codes are available at err.response?.status, not err.status directly. This will prevent 404 errors from being caught:
.catch((err) => {
if (err.response?.status === 404) {
throw new PostNotFoundError(`Post with id "${postId}" not found!`)
}
throw err
})
🤖 Prompt for AI Agents
In examples/solid/router-monorepo-simple-lazy/packages/router/src/fetch/posts.ts
around lines 14 to 22, the catch handler incorrectly reads err.status which is
undefined for redaxios; change the check to use err.response?.status to detect a
404 and throw PostNotFoundError, otherwise rethrow the original error; ensure
optional chaining is used to avoid runtime errors when response is absent.
| defaultPendingComponent: () => ( | ||
| <div>Loading form global pending component...</div> | ||
| ), |
There was a problem hiding this comment.
Fix typo in the pending message.
The copy reads “Loading form…”; swap to “Loading from…” to avoid confusing users.
defaultPendingComponent: () => (
- <div>Loading form global pending component...</div>
+ <div>Loading from global pending component...</div>
),📝 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.
| defaultPendingComponent: () => ( | |
| <div>Loading form global pending component...</div> | |
| ), | |
| defaultPendingComponent: () => ( | |
| <div>Loading from global pending component...</div> | |
| ), |
🤖 Prompt for AI Agents
In examples/solid/router-monorepo-simple-lazy/packages/router/src/router.tsx
around lines 10 to 12, the pending component message contains a typo "Loading
form global pending component..."; update the string to "Loading from global
pending component..." so it reads correctly, keeping the surrounding arrow
function and JSX structure unchanged.
|
|
||
| ## How lazy loading works | ||
|
|
||
| Eath feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows library to define their component, pending, error and nod found components directly. |
There was a problem hiding this comment.
Fix typo in lazy loading explanation.
"Eath" should be "Each".
Apply this diff:
-Eath feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows library to define their component, pending, error and nod found components directly.
+Each feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows library to define their component, pending, error and nod found components directly.📝 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.
| Eath feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows library to define their component, pending, error and nod found components directly. | |
| Each feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows library to define their component, pending, error and nod found components directly. |
🤖 Prompt for AI Agents
In examples/solid/router-monorepo-simple-lazy/README.md around line 24, fix the
typos in the sentence: change "Eath" to "Each", change "allows library" to
"allows libraries" (or "allows a library" depending on intended
singular/plural), and change "nod found" to "not found" so the sentence reads
correctly and clearly describes that each feature exports createLazyRoute and
libraries can define their component, pending, error and not-found components
directly.
birkskyum
deleted the
docs(solid-router)--router-monorepo-simple-lazy-example
branch
* docs(solid-router): router-monorepo-simple-lazy example * lockfile * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
tracking at
Summary by CodeRabbit