Add basic Cloudflare E2E tests #5260
Merged
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
WalkthroughAdds a new e2e React Start example for Cloudflare Workers: project scaffolding, Vite/Cloudflare/Tailwind/PostCSS configs, TanStack Router setup and generated route tree, UI components and utilities, Playwright E2E tests with global setup/teardown, and Cloudflare Wrangler config with a MY_VAR binding. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Browser
participant App as React App
participant Router as TanStack Router
participant IndexRoute as "/"
participant ServerFn as createServerFn().handler
participant CFEnv as Cloudflare Env (MY_VAR)
User->>Browser: Navigate to "/"
Browser->>App: Load app
App->>Router: Resolve route
Router->>IndexRoute: Run loader
IndexRoute->>ServerFn: invoke server handler
ServerFn->>CFEnv: read MY_VAR
CFEnv-->>ServerFn: "Hello from Cloudflare"
ServerFn-->>IndexRoute: return { message, myVar }
IndexRoute-->>App: render Home with data
App-->>Browser: display UA and MY_VAR
sequenceDiagram
autonumber
participant CI as Playwright
participant Setup as Global Setup
participant Preview as build+preview server
participant App as Preview App
participant Tests as app.spec.ts
participant Teardown as Global Teardown
CI->>Setup: e2eStartDummyServer(pkgName)
Setup-->>CI: dummy server started
CI->>Preview: run build + preview
Preview-->>App: app started (baseURL)
CI->>Tests: execute specs
Tests->>App: GET "/"
App-->>Tests: HTML with UA + MY_VAR
CI->>Teardown: e2eStopDummyServer(pkgName)
Teardown-->>CI: cleanup done
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25–30 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Comment |
|
View your CI Pipeline Execution ↗ for commit 1af5aef
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
e2e/react-start/basic-cloudflare/tsconfig.json (1)
9-19: Add Cloudflare/Vite ambient types to avoid implicitanysThis project includes a Cloudflare Worker entry point and Vite-driven frontend code. Without explicitly pulling in
@cloudflare/workers-typesandvite/client, strict mode will flagExecutionContext,KVNamespace,import.meta.env, etc., as missing and push teams to sprinkle manual globals. Please wire the types in here."resolveJsonModule": true, "skipLibCheck": true, "target": "ES2022", "allowJs": true, "forceConsistentCasingInFileNames": true, "baseUrl": ".", + "types": ["@cloudflare/workers-types", "vite/client"], "paths": { "~/*": ["./src/*"] },e2e/react-start/basic-cloudflare/src/components/NotFound.tsx (1)
1-25: Narrow thechildrenprop type.We can keep strict typing by using
ReactNodeinstead ofany, which helps downstream consumers and tooling.-import { Link } from '@tanstack/react-router' +import type { ReactNode } from 'react' +import { Link } from '@tanstack/react-router' -export function NotFound({ children }: { children?: any }) { +export function NotFound({ children }: { children?: ReactNode }) {e2e/react-start/basic-cloudflare/public/site.webmanifest (1)
2-3: Populate PWA manifest namesLeaving
nameandshort_nameempty yields blank labels in install prompts. Please fill these fields with a recognizable app name (even a placeholder for the sample) so the manifest produces valid metadata.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
e2e/react-start/basic-cloudflare/public/android-chrome-192x192.pngis excluded by!**/*.pnge2e/react-start/basic-cloudflare/public/android-chrome-512x512.pngis excluded by!**/*.pnge2e/react-start/basic-cloudflare/public/apple-touch-icon.pngis excluded by!**/*.pnge2e/react-start/basic-cloudflare/public/favicon-16x16.pngis excluded by!**/*.pnge2e/react-start/basic-cloudflare/public/favicon-32x32.pngis excluded by!**/*.pnge2e/react-start/basic-cloudflare/public/favicon.icois excluded by!**/*.icoe2e/react-start/basic-cloudflare/public/favicon.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (21)
e2e/react-start/basic-cloudflare/.gitignore(1 hunks)e2e/react-start/basic-cloudflare/.prettierignore(1 hunks)e2e/react-start/basic-cloudflare/package.json(1 hunks)e2e/react-start/basic-cloudflare/playwright.config.ts(1 hunks)e2e/react-start/basic-cloudflare/postcss.config.mjs(1 hunks)e2e/react-start/basic-cloudflare/public/site.webmanifest(1 hunks)e2e/react-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx(1 hunks)e2e/react-start/basic-cloudflare/src/components/NotFound.tsx(1 hunks)e2e/react-start/basic-cloudflare/src/routeTree.gen.ts(1 hunks)e2e/react-start/basic-cloudflare/src/router.tsx(1 hunks)e2e/react-start/basic-cloudflare/src/routes/__root.tsx(1 hunks)e2e/react-start/basic-cloudflare/src/routes/index.tsx(1 hunks)e2e/react-start/basic-cloudflare/src/styles/app.css(1 hunks)e2e/react-start/basic-cloudflare/src/utils/seo.ts(1 hunks)e2e/react-start/basic-cloudflare/tailwind.config.mjs(1 hunks)e2e/react-start/basic-cloudflare/tests/app.spec.ts(1 hunks)e2e/react-start/basic-cloudflare/tests/setup/global.setup.ts(1 hunks)e2e/react-start/basic-cloudflare/tests/setup/global.teardown.ts(1 hunks)e2e/react-start/basic-cloudflare/tsconfig.json(1 hunks)e2e/react-start/basic-cloudflare/vite.config.ts(1 hunks)e2e/react-start/basic-cloudflare/wrangler.jsonc(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
e2e/react-start/basic-cloudflare/src/router.tsxe2e/react-start/basic-cloudflare/src/utils/seo.tse2e/react-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsxe2e/react-start/basic-cloudflare/src/components/NotFound.tsxe2e/react-start/basic-cloudflare/tests/app.spec.tse2e/react-start/basic-cloudflare/tests/setup/global.teardown.tse2e/react-start/basic-cloudflare/src/routes/__root.tsxe2e/react-start/basic-cloudflare/src/routeTree.gen.tse2e/react-start/basic-cloudflare/src/routes/index.tsxe2e/react-start/basic-cloudflare/tests/setup/global.setup.tse2e/react-start/basic-cloudflare/playwright.config.tse2e/react-start/basic-cloudflare/vite.config.ts
e2e/**
📄 CodeRabbit inference engine (AGENTS.md)
Store end-to-end tests under the e2e/ directory
Files:
e2e/react-start/basic-cloudflare/src/router.tsxe2e/react-start/basic-cloudflare/src/styles/app.csse2e/react-start/basic-cloudflare/src/utils/seo.tse2e/react-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsxe2e/react-start/basic-cloudflare/src/components/NotFound.tsxe2e/react-start/basic-cloudflare/tests/app.spec.tse2e/react-start/basic-cloudflare/wrangler.jsonce2e/react-start/basic-cloudflare/tests/setup/global.teardown.tse2e/react-start/basic-cloudflare/src/routes/__root.tsxe2e/react-start/basic-cloudflare/src/routeTree.gen.tse2e/react-start/basic-cloudflare/public/site.webmanifeste2e/react-start/basic-cloudflare/src/routes/index.tsxe2e/react-start/basic-cloudflare/postcss.config.mjse2e/react-start/basic-cloudflare/tailwind.config.mjse2e/react-start/basic-cloudflare/tsconfig.jsone2e/react-start/basic-cloudflare/package.jsone2e/react-start/basic-cloudflare/tests/setup/global.setup.tse2e/react-start/basic-cloudflare/playwright.config.tse2e/react-start/basic-cloudflare/vite.config.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
e2e/react-start/basic-cloudflare/src/routes/__root.tsxe2e/react-start/basic-cloudflare/src/routes/index.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
e2e/react-start/basic-cloudflare/package.json
🧠 Learnings (4)
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#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:
e2e/react-start/basic-cloudflare/.prettierignore
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to e2e/** : Store end-to-end tests under the e2e/ directory
Applied to files:
e2e/react-start/basic-cloudflare/tests/app.spec.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#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:
e2e/react-start/basic-cloudflare/src/routes/__root.tsx
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#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:
e2e/react-start/basic-cloudflare/tsconfig.json
🧬 Code graph analysis (10)
e2e/react-start/basic-cloudflare/src/router.tsx (4)
e2e/react-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)e2e/react-start/basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)e2e/react-start/server-routes/src/router.tsx (1)
createRouter(6-16)e2e/react-start/server-functions/src/router.tsx (1)
createRouter(6-21)
e2e/react-start/basic-cloudflare/src/utils/seo.ts (1)
scripts/llms-generate.mjs (1)
title(96-96)
e2e/react-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx (3)
e2e/react-start/server-routes/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)e2e/solid-start/server-routes/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/solid/start-basic/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)
e2e/react-start/basic-cloudflare/src/components/NotFound.tsx (1)
e2e/react-start/server-routes/src/components/NotFound.tsx (1)
NotFound(3-25)
e2e/react-start/basic-cloudflare/tests/setup/global.teardown.ts (6)
e2e/react-start/basic/tests/setup/global.teardown.ts (1)
teardown(4-6)e2e/react-router/basic-file-based-code-splitting/tests/setup/global.teardown.ts (1)
teardown(4-6)e2e/react-start/basic-react-query/tests/setup/global.teardown.ts (1)
teardown(4-6)e2e/react-start/scroll-restoration/tests/setup/global.teardown.ts (1)
teardown(4-6)e2e/solid-start/basic/tests/setup/global.teardown.ts (1)
teardown(4-6)e2e/react-router/basic-esbuild-file-based/tests/setup/global.teardown.ts (1)
teardown(4-6)
e2e/react-start/basic-cloudflare/src/routes/__root.tsx (4)
e2e/react-start/basic-cloudflare/src/routes/index.tsx (1)
Route(5-8)e2e/react-start/basic-cloudflare/src/utils/seo.ts (1)
seo(1-33)e2e/react-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)e2e/react-start/basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)
e2e/react-start/basic-cloudflare/src/routeTree.gen.ts (1)
e2e/react-start/basic-cloudflare/src/router.tsx (1)
getRouter(6-16)
e2e/react-start/basic-cloudflare/src/routes/index.tsx (2)
e2e/react-start/basic-cloudflare/src/routes/__root.tsx (1)
Route(15-57)e2e/react-start/basic-cloudflare/worker-configuration.d.ts (1)
env(7814-7814)
e2e/react-start/basic-cloudflare/tests/setup/global.setup.ts (7)
e2e/solid-router/basic-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/basic-file-based-code-splitting/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/basic-virtual-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/basic-virtual-named-export-config-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/basic-file-based-code-splitting/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/basic-file-based/tests/setup/global.setup.ts (1)
setup(4-6)
e2e/react-start/basic-cloudflare/playwright.config.ts (1)
scripts/set-ts-version.js (1)
packageJson(33-33)
⏰ 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 (12)
e2e/react-start/basic-cloudflare/.gitignore (1)
1-11: Ignore patterns cover the expected Cloudflare + Playwright artifactsNothing to change here; the list neatly keeps build outputs and test artifacts out of version control.
e2e/react-start/basic-cloudflare/tests/setup/global.setup.ts (1)
1-6: LGTM – setup hooks into the shared dummy server lifecycle.This mirrors the existing e2e patterns and ensures the Cloudflare preview spins up before tests run. Nice.
e2e/react-start/basic-cloudflare/postcss.config.mjs (1)
1-6: LGTM – PostCSS stack matches the Tailwind usage.Straightforward Tailwind + Autoprefixer config, consistent with the rest of our e2e apps.
e2e/react-start/basic-cloudflare/tests/setup/global.teardown.ts (1)
1-6: LGTM – teardown cleanly stops the dummy server.Complements the global setup and keeps the test harness tidy.
e2e/react-start/basic-cloudflare/src/router.tsx (1)
1-16: LGTM – router factory matches our standard configuration.Fresh router instance per call with the expected defaults, error boundary, and not-found component.
e2e/react-start/basic-cloudflare/src/styles/app.css (1)
1-22: LGTM – base Tailwind layer aligns with the app shell.Styles mirror the other React Start examples and keep the dark/light contrast consistent.
e2e/react-start/basic-cloudflare/.prettierignore (1)
1-4: Generated artifacts excluded appropriatelyNo issues—the ignore patterns cover the generated/public assets we don't want Prettier to touch.
e2e/react-start/basic-cloudflare/wrangler.jsonc (1)
1-9: Wrangler config aligns with worker setupSettings look consistent: the compatibility flag and entrypoint match the SSR worker expectations.
e2e/react-start/basic-cloudflare/vite.config.ts (1)
1-16: Plugin stack looks correct
tsconfigpaths, Cloudflare SSR, TanStack Start, and React plugins are wired in the expected order. All good.e2e/react-start/basic-cloudflare/playwright.config.ts (1)
5-30: Deterministic preview port setupDeriving the port via
getTestServerPortkeeps parallel e2e runs isolated. Nice touch.e2e/react-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx (1)
20-49: Error boundary mirrors shared patternMatches the existing React Start catch-boundary behavior, including invalidate-and-retry plus conditional back navigation. Looks good.
e2e/react-start/basic-cloudflare/tests/app.spec.ts (1)
4-18: E2E coverage hits the key Cloudflare data pathsHappy-path assertions exercise both the user agent marker and the binding value, so the worker wiring is covered.
Comment on lines
+16
to
+37
| "@tanstack/react-router": "workspace:^", | ||
| "@tanstack/react-router-devtools": "workspace:^", | ||
| "@tanstack/react-start": "workspace:^", | ||
| "react": "^19.0.0", | ||
| "react-dom": "^19.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@cloudflare/vite-plugin": "^1.13.7", | ||
| "@playwright/test": "^1.50.1", | ||
| "@tanstack/router-e2e-utils": "workspace:^", | ||
| "@types/node": "^22.10.2", | ||
| "@types/react": "^19.0.8", | ||
| "@types/react-dom": "^19.0.3", | ||
| "@vitejs/plugin-react": "^4.3.4", | ||
| "autoprefixer": "^10.4.20", | ||
| "postcss": "^8.5.1", | ||
| "tailwindcss": "^3.4.17", | ||
| "typescript": "^5.7.2", | ||
| "vite": "^7.1.1", | ||
| "vite-tsconfig-paths": "^5.1.4", | ||
| "wrangler": "^4.40.2" | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use workspace:* for all internal TanStack dependencies.
Per our workspace convention, internal packages should be referenced with the workspace:* protocol, not workspace:^. Please update both the dependencies and devDependencies entries accordingly.
Apply this diff:
- "@tanstack/react-router": "workspace:^",
- "@tanstack/react-router-devtools": "workspace:^",
- "@tanstack/react-start": "workspace:^",
+ "@tanstack/react-router": "workspace:*",
+ "@tanstack/react-router-devtools": "workspace:*",
+ "@tanstack/react-start": "workspace:*",
@@
- "@tanstack/router-e2e-utils": "workspace:^",
+ "@tanstack/router-e2e-utils": "workspace:*",📝 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/react-router": "workspace:^", | |
| "@tanstack/react-router-devtools": "workspace:^", | |
| "@tanstack/react-start": "workspace:^", | |
| "react": "^19.0.0", | |
| "react-dom": "^19.0.0" | |
| }, | |
| "devDependencies": { | |
| "@cloudflare/vite-plugin": "^1.13.7", | |
| "@playwright/test": "^1.50.1", | |
| "@tanstack/router-e2e-utils": "workspace:^", | |
| "@types/node": "^22.10.2", | |
| "@types/react": "^19.0.8", | |
| "@types/react-dom": "^19.0.3", | |
| "@vitejs/plugin-react": "^4.3.4", | |
| "autoprefixer": "^10.4.20", | |
| "postcss": "^8.5.1", | |
| "tailwindcss": "^3.4.17", | |
| "typescript": "^5.7.2", | |
| "vite": "^7.1.1", | |
| "vite-tsconfig-paths": "^5.1.4", | |
| "wrangler": "^4.40.2" | |
| } | |
| "@tanstack/react-router": "workspace:*", | |
| "@tanstack/react-router-devtools": "workspace:*", | |
| "@tanstack/react-start": "workspace:*", | |
| "react": "^19.0.0", | |
| "react-dom": "^19.0.0" | |
| }, | |
| "devDependencies": { | |
| "@cloudflare/vite-plugin": "^1.13.7", | |
| "@playwright/test": "^1.50.1", | |
| "@tanstack/router-e2e-utils": "workspace:*", | |
| "@types/node": "^22.10.2", | |
| "@types/react": "^19.0.8", | |
| "@types/react-dom": "^19.0.3", | |
| "@vitejs/plugin-react": "^4.3.4", | |
| "autoprefixer": "^10.4.20", | |
| "postcss": "^8.5.1", | |
| "tailwindcss": "^3.4.17", | |
| "typescript": "^5.7.2", | |
| "vite": "^7.1.1", | |
| "vite-tsconfig-paths": "^5.1.4", | |
| "wrangler": "^4.40.2" | |
| } |
🤖 Prompt for AI Agents
In e2e/react-start/basic-cloudflare/package.json around lines 16 to 37, update
internal TanStack package references to use the workspace:* protocol instead of
workspace:^; specifically change "@tanstack/react-router",
"@tanstack/react-router-devtools", and "@tanstack/react-start" in "dependencies"
and "@tanstack/router-e2e-utils" in "devDependencies" to "workspace:*" (and
apply the same change for any other @tanstack/* entries in this range).
Comment on lines
+61
to
+82
| <html> | ||
| <head> | ||
| <HeadContent /> | ||
| </head> | ||
| <body> | ||
| <div className="p-2 flex gap-2 text-lg"> | ||
| <Link | ||
| to="/" | ||
| activeProps={{ | ||
| className: 'font-bold', | ||
| }} | ||
| activeOptions={{ exact: true }} | ||
| > | ||
| Home | ||
| </Link> | ||
| </div> | ||
| <hr /> | ||
| {children} | ||
| <TanStackRouterDevtools position="bottom-right" /> | ||
| <Scripts /> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
Add the document language attribute.
<html> without a lang fails WCAG 2.1 level A, so screen readers don’t know what locale to use. Please set the appropriate language (e.g. "en").
- <html>
+ <html lang="en">📝 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
| <html> | |
| <head> | |
| <HeadContent /> | |
| </head> | |
| <body> | |
| <div className="p-2 flex gap-2 text-lg"> | |
| <Link | |
| to="/" | |
| activeProps={{ | |
| className: 'font-bold', | |
| }} | |
| activeOptions={{ exact: true }} | |
| > | |
| Home | |
| </Link> | |
| </div> | |
| <hr /> | |
| {children} | |
| <TanStackRouterDevtools position="bottom-right" /> | |
| <Scripts /> | |
| </body> | |
| </html> | |
| <html lang="en"> | |
| <head> | |
| <HeadContent /> | |
| </head> | |
| <body> | |
| <div className="p-2 flex gap-2 text-lg"> | |
| <Link | |
| to="/" | |
| activeProps={{ | |
| className: 'font-bold', | |
| }} | |
| activeOptions={{ exact: true }} | |
| > | |
| Home | |
| </Link> | |
| </div> | |
| <hr /> | |
| {children} | |
| <TanStackRouterDevtools position="bottom-right" /> | |
| <Scripts /> | |
| </body> | |
| </html> |
🤖 Prompt for AI Agents
In e2e/react-start/basic-cloudflare/src/routes/__root.tsx around lines 61 to 82,
the top-level <html> element is missing a lang attribute which fails WCAG;
update the <html> tag to include an appropriate language attribute (e.g.
lang="en") or derive it from your app/locale config and ensure it is set on the
rendered <html> element so screen readers receive the correct document language.
| @@ -0,0 +1,27 @@ | |||
| import { createFileRoute } from '@tanstack/react-router' | |||
| import { createServerFn } from '@tanstack/react-start' | |||
| import { env } from 'cloudflare:workers' | |||
There was a problem hiding this comment.
Avoid importing cloudflare:workers in the shared route module.
This file is bundled for the browser as well as the worker. Pulling in cloudflare:workers at the top level causes the client build to fail because that virtual module only exists in the Cloudflare Worker runtime. Keep the import inside the server-only handler (or use the server context) so the browser bundle never tries to resolve it.
Apply this diff to confine the import to the server handler:
-import { env } from 'cloudflare:workers'
-
const getData = createServerFn().handler(async () => {
+ const { env } = await import('cloudflare:workers')
return {
message: `Running in ${navigator.userAgent}`,
myVar: env.MY_VAR,
}
})🤖 Prompt for AI Agents
In e2e/react-start/basic-cloudflare/src/routes/index.tsx around line 3,
importing the virtual module 'cloudflare:workers' at the top-level causes the
browser bundle to fail because that module only exists in the Worker runtime;
move the import (or access env via the server-only context) inside the
server-only handler so the client build never tries to resolve it—remove the
top-level import and require or import env within the worker/loader function (or
use the server runtime API) and reference it only inside code guarded for server
execution.
Comment on lines
+20
to
+28
| { name: 'og:type', content: 'website' }, | ||
| { name: 'og:title', content: title }, | ||
| { name: 'og:description', content: description }, | ||
| ...(image | ||
| ? [ | ||
| { name: 'twitter:image', content: image }, | ||
| { name: 'twitter:card', content: 'summary_large_image' }, | ||
| { name: 'og:image', content: image }, | ||
| ] |
There was a problem hiding this comment.
Fix Open Graph meta attributes
On Line 20 and the surrounding OG entries we’re using name="og:*" instead of property="og:*". Open Graph parsers ignore name, so the tags will not be picked up. Please swap these to property.
- { name: 'og:type', content: 'website' },
- { name: 'og:title', content: title },
- { name: 'og:description', content: description },
+ { property: 'og:type', content: 'website' },
+ { property: 'og:title', content: title },
+ { property: 'og:description', content: description },
@@
- { name: 'og:image', content: image },
+ { property: 'og:image', content: image },📝 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
| { name: 'og:type', content: 'website' }, | |
| { name: 'og:title', content: title }, | |
| { name: 'og:description', content: description }, | |
| ...(image | |
| ? [ | |
| { name: 'twitter:image', content: image }, | |
| { name: 'twitter:card', content: 'summary_large_image' }, | |
| { name: 'og:image', content: image }, | |
| ] | |
| { property: 'og:type', content: 'website' }, | |
| { property: 'og:title', content: title }, | |
| { property: 'og:description', content: description }, | |
| ...(image | |
| ? [ | |
| { name: 'twitter:image', content: image }, | |
| { name: 'twitter:card', content: 'summary_large_image' }, | |
| { property: 'og:image', content: image }, | |
| ] |
🤖 Prompt for AI Agents
e2e/react-start/basic-cloudflare/src/utils/seo.ts around lines 20 to 28: the
Open Graph meta entries currently use name="og:*" which Open Graph parsers
ignore; change those entries to use property="og:type", property="og:title",
property="og:description" and property="og:image" (leave the twitter:* tags
using name as-is) so OG tags are recognized by parsers.
| test('returns the correct user agent', async ({ page }) => { | ||
| await page.goto('/') | ||
|
|
||
| await expect(page.locator('p').nth(0)).toHaveText( |
There was a problem hiding this comment.
please use data-testid instead of locator to make those tests simpler and more robust to changes
schiller-manuel
requested changes
Sep 26, 2025
| }) => { | ||
| await page.goto('/') | ||
|
|
||
| await expect(page.locator('p').nth(1)).toHaveText('Hello from Cloudflare') |
There was a problem hiding this comment.
please use data-testid instead of locator to make those tests simpler and more robust to changes
schiller-manuel
approved these changes
Sep 26, 2025
This was referenced Sep 26, 2025
This was referenced Oct 3, 2025
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Adds
e2e/react-start/basic-cloudflarewith tests.Summary by CodeRabbit
New Features
Tests
Chores