[ci] Enable Vercel-prod e2e for tanstack-start#1904
[ci] Enable Vercel-prod e2e for tanstack-start#1904VaguelySerious wants to merge 11 commits intomainfrom
Conversation
The workbench-tanstack-start-workflow Vercel project is now connected, so re-enable the matrix entry that was commented out when the workbench landed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: d9a5c90 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
🧪 E2E Test Results✅ All tests passed Summary
Details by Category✅ ▲ Vercel Production
✅ 💻 Local Development
✅ 📦 Local Production
✅ 🐘 Local Postgres
✅ 📋 Other
❌ Some E2E test jobs failed:
Check the workflow run for details. |
📊 Benchmark Results⏳ Benchmarks are running... This comment will be updated with the results when the benchmarks complete. _Started at: _ |
| TanStack Start runs on Vite, so the Workflow SDK is wired in via the same `workflow/vite` plugin. Add `workflow()` to your Vite config to enable usage of the `"use workflow"` and `"use step"` directives. | ||
| TanStack Start runs on Vite, so the Workflow SDK is wired in via the same `workflow/vite` plugin. Add `workflow()` to the existing `plugins` array in your Vite config — don't replace the other plugins the scaffold sets up. | ||
|
|
||
| ```typescript title="vite.config.ts" lineNumbers | ||
| import { devtools } from "@tanstack/devtools-vite"; | ||
| import { tanstackStart } from "@tanstack/react-start/plugin/vite"; | ||
| import viteReact from "@vitejs/plugin-react"; | ||
| import tailwindcss from "@tailwindcss/vite"; | ||
| import { nitro } from "nitro/vite"; | ||
| import { defineConfig } from "vite"; | ||
| import { workflow } from "workflow/vite"; | ||
|
|
||
| export default defineConfig({ | ||
| plugins: [ | ||
| workflow(), // [!code highlight] | ||
| devtools(), | ||
| tanstackStart(), | ||
| viteReact(), | ||
| nitro(), | ||
| tailwindcss(), |
There was a problem hiding this comment.
this might get outdated quickly as the tanstack start bootstrap code changes, and it make the guide look longer like we need all these things..
perhaps simpligy the guide to just show the detlas and use ... in place for existing stuff. my understanding is we just need workflow, nitro and tanstackStart are the minimal plugins needed here for this code sample
There was a problem hiding this comment.
Done — collapsed to just the workflow() delta with // ... for the rest of the scaffold plugins.
| ``` | ||
|
|
||
| <Callout> | ||
| Plugin order between `workflow()` and the rest of the TanStack/Vite plugins doesn't matter for this integration; we list `workflow()` first so the `"use workflow"` and `"use step"` transforms run before anything else processes the file. |
There was a problem hiding this comment.
seems right from my 1 off agentbut does this sound right to you? 🤔 am kinda surprised by this
There was a problem hiding this comment.
On reflection, no — vite plugins do run in order for transforms, so it is safer to put workflow() first. Dropped the contradictory callout and folded the rationale into the prose.
|
|
||
| ```typescript title="src/workflows/user-signup.ts" lineNumbers | ||
| import { sleep } from "workflow"; | ||
| import { FatalError, sleep } from "workflow"; |
There was a problem hiding this comment.
actually sorry let's revert this back to how it was (fatalerror being imported in the next example). that's what all the other code samples do and it incrementally builds up only importing FatalError when needed for next step
There was a problem hiding this comment.
Reverted — FatalError is back in the second snippet so the guide builds up imports incrementally like the others.
| npm run dev | ||
| ``` | ||
|
|
||
| The dev server listens on `http://localhost:3000`. If something else is already on `3000`, Vite silently falls through to the next free port (`3001`, `3002`, …) — adjust the URLs below to match. Pin the port by passing `--port 3000` to the dev script if that matters for you. |
There was a problem hiding this comment.
honestly unnecessary and self-evident I think. can skip this
pranaygp
left a comment
pranaygp
left a comment
There was a problem hiding this comment.
left some comments to simplify docs guide :)
…rbo.json Without this declaration, Turbo strips WORKFLOW_PUBLIC_MANIFEST from the env at build time on Vercel even though it is set on the project (and vercel.json#env provides it). The result is that the workflow nitro module sees the env var unset during \`vite build\` and skips registering the manifest handler, so \`/.well-known/workflow/v1/manifest.json\` 404s in prod and every e2e test that calls \`fetchManifest()\` fails before it can reach the workflow under test. Other workbench apps inherit \`env: ["WORKFLOW_PUBLIC_MANIFEST"]\` from the root turbo.json's build task, but that inheritance evidently doesn't satisfy Turbo's per-package env filter when the package's own turbo.json overrides the build task (which all the workbenches do, to set framework-specific \`outputs\`). Declaring env explicitly at the package level fixes the production build and silences the related warning at the same time. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Show only the workflow() delta in the vite.config.ts snippet (with
ellipses for the existing scaffold plugins) so the guide doesn't drift
every time TanStack changes its bootstrap.
- Drop the plugin-order Callout and fold its rationale into the prose; the
callout was self-contradictory ("doesn't matter, but we put it first").
- Move the FatalError import back into the second code sample so the guide
still incrementally builds up imports as readers go, matching the other
framework guides.
- Drop the dev-server port-3000 paragraph; it's self-evident.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Peter Wielander <mittgfu@gmail.com>
Signed-off-by: Peter Wielander <mittgfu@gmail.com>
2 participants
Summary
Two changes:
Re-enable the
tanstack-startmatrix entry in thee2e-vercel-prodjob, which was commented out when the workbench app landed in [workbench] Add TanStack Start workbench #1875 because the Vercel project wasn't connected yet. The project is now set up.Fix the
@types/reactmismatch breaking nextjs-turbopack/nextjs-webpack preview builds. When [workbench] Add TanStack Start workbench #1875 added the tanstack-start workbench, its package.json pinned@types/react@19.2.3/@types/react-dom@19.2.3while every other workbench used^19(resolved to19.1.13). With two@types/reactcopies in the workspace, framer-motion'sMotionStyle(computed fromCSSProperties) was built against one copy while the consuming code referenced another, surfacing on Vercel CI as:This started failing on
example-nextjs-workflow-turbopackandexample-nextjs-workflow-webpackexactly at the SHA where [workbench] Add TanStack Start workbench #1875 landed. Pinning tanstack-start to the same versions nextjs-turbopack uses (react@19.2.4,@types/react@19.1.13,@types/react-dom@19.1.9) makes pnpm dedupe to a single copy across the workspace.Test plan
cd workbench/nextjs-turbopack && pnpm buildsucceeds.cd workbench/tanstack-start && pnpm buildsucceeds.pnpm install,grep "@types/react@" pnpm-lock.yamlshows only one version (19.1.13).Vercel – example-nextjs-workflow-turbopackandVercel – example-nextjs-workflow-webpackdeployments succeed.E2E Vercel Prod Tests (tanstack-start)runs against the new project and passes.🤖 Generated with Claude Code