chore(deps): update remix guide and playground - #1204
Conversation
|
📝 WalkthroughWalkthroughUpgrade Remix and Cloudflare-related dependencies in two package.json files; replace server-side file upload parsing/validation flow in Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant Server
participant Parser as "parseFileUpload\n(`@conform-to/dom`)"
participant Normalizer
participant Zod as "schema.safeParse"
participant Resolver
Browser->>Server: POST multipart/form-data (files + fields)
Server->>Parser: parse incoming FormData
Parser->>Normalizer: produce raw field values (File/Blob/arrays)
Normalizer->>Zod: normalize (remove empty uploads, convert JsonFile→Blob) and call safeParse
Zod-->>Resolver: success (value) or failure (errors)
Resolver-->>Server: format errors into {path: string[]} or return value
Server-->>Browser: json(submission.reply()) with parsed result
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
Deploying conform with
|
| Latest commit: |
9934b12
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://23be4cc2.conform.pages.dev |
| Branch Preview URL: | https://update-security-guide-playgr.conform.pages.dev |
More templates
@conform-to/dom
@conform-to/react
@conform-to/valibot
@conform-to/validitystate
@conform-to/yup
@conform-to/zod
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
guide/package.json (1)
6-12:⚠️ Potential issue | 🟠 Major
viteadded todevDependenciesbut scripts and config still target the classic Remix compiler.The scripts invoke
remix build/remix dev --manual(classic compiler), andremix.config.jsuses classic-only options (serverBuildPath,serverDependenciesToBundle,serverMinify,serverModuleFormat,serverPlatform). Novite.config.{js,ts}exists in the guide directory, and@remix-run/dev/viteis not referenced. Under this setup,vite^6.4.2 is unused dead weight.If migrating to the Remix Vite plugin is the intent, complete the migration:
- Add
vite.config.tswith@remix-run/dev/vite+@remix-run/dev/vite/cloudflare- Replace scripts with
vite build/vite dev(remove--manualandpredev)- Remove classic-only options from
remix.config.js- Update
server.tswiring for Vite outputOtherwise, remove
vitefromdevDependencies.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@guide/package.json` around lines 6 - 12, The project added vite to devDependencies but the repo still uses the classic Remix compiler; either complete the Vite migration or remove vite. To migrate: add a vite.config.ts that imports and uses `@remix-run/dev/vite` (and `@remix-run/dev/vite/cloudflare` if deploying to Pages), update package.json scripts replacing "remix build"/"remix dev --manual" and the "predev" step with "vite build" and "vite dev" (remove --manual and predev), remove classic-only keys from remix.config.js (serverBuildPath, serverDependenciesToBundle, serverMinify, serverModuleFormat, serverPlatform), and update server.ts wiring to consume Vite/Remix Vite output; otherwise simply remove vite from devDependencies and keep existing scripts/config.
♻️ Duplicate comments (1)
playground/package.json (1)
5-10:⚠️ Potential issue | 🟠 MajorSame
vitevs. classic-compiler mismatch asguide/package.json.Scripts use
remix build,remix dev, andremix-serve build/index.js— classic Remix compiler output paths.playground/remix.config.jsis the minimal classic config. With novite.config.*present, the newly addedvite ^6.4.2is unused.Additionally,
remix-serve build/index.jswill not serve a Vite-built Remix app (Vite output layout isbuild/server/index.js+build/client/), so a partial migration here would breakpnpm start.Please either complete the Vite plugin migration (add
vite.config.ts, update scripts tovite build/vite dev, updatestartto the Vite output path) or dropvitefromdevDependencies.#!/bin/bash fd -HI -t f 'vite\.config\.(js|ts|mjs|cjs)$' playground rg -nP -C2 '@remix-run/dev/vite' playground cat playground/package.json | jq '.scripts' cat playground/remix.config.jsAlso applies to: 40-40
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@playground/package.json` around lines 5 - 10, package.json scripts ("start", "build", "dev") currently call classic Remix commands and expect classic output (build/index.js), but vite is present in devDependencies while no vite.config.* exists and remix.config.js is classic; either finish the Vite migration or remove vite: Option A — complete migration by adding a Vite config (vite.config.ts using `@remix-run/dev/vite`), update "build" to run vite build, "dev" to vite dev, and change "start" to run the Vite server output (build/server/index.js with appropriate serve command); Option B — revert to classic setup by removing vite from devDependencies and keep "remix build", "remix dev", and "remix-serve build/index.js" as-is; update package.json accordingly and ensure playground/remix.config.js remains consistent with the chosen approach.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@guide/package.json`:
- Around line 6-12: The project added vite to devDependencies but the repo still
uses the classic Remix compiler; either complete the Vite migration or remove
vite. To migrate: add a vite.config.ts that imports and uses `@remix-run/dev/vite`
(and `@remix-run/dev/vite/cloudflare` if deploying to Pages), update package.json
scripts replacing "remix build"/"remix dev --manual" and the "predev" step with
"vite build" and "vite dev" (remove --manual and predev), remove classic-only
keys from remix.config.js (serverBuildPath, serverDependenciesToBundle,
serverMinify, serverModuleFormat, serverPlatform), and update server.ts wiring
to consume Vite/Remix Vite output; otherwise simply remove vite from
devDependencies and keep existing scripts/config.
---
Duplicate comments:
In `@playground/package.json`:
- Around line 5-10: package.json scripts ("start", "build", "dev") currently
call classic Remix commands and expect classic output (build/index.js), but vite
is present in devDependencies while no vite.config.* exists and remix.config.js
is classic; either finish the Vite migration or remove vite: Option A — complete
migration by adding a Vite config (vite.config.ts using `@remix-run/dev/vite`),
update "build" to run vite build, "dev" to vite dev, and change "start" to run
the Vite server output (build/server/index.js with appropriate serve command);
Option B — revert to classic setup by removing vite from devDependencies and
keep "remix build", "remix dev", and "remix-serve build/index.js" as-is; update
package.json accordingly and ensure playground/remix.config.js remains
consistent with the chosen approach.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 025d6bf5-084a-4f65-bec3-a54873928bd4
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
guide/package.jsonplayground/package.json
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@playground/package.json`:
- Around line 21-31: The dependency entries for "@remix-run/node",
"@remix-run/react", "@remix-run/serve" (and the devDependency "@remix-run/dev")
were changed from caret ranges (e.g. "^2.9.1") to exact pins ("2.9.1"), which
prevents automatic patch/minor upgrades; either revert those values back to
caret-prefixed ranges (restore "^2.9.1" for the listed packages) so pnpm can
pick up patch/security fixes, or if exact pinning is intentional, add a short
comment in package.json or the PR description stating that "@remix-run/*"
versions are intentionally pinned for the playground to justify the change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: bb0d0092-01ff-4de8-855e-4e244d00ee2f
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
guide/package.jsonplayground/package.json
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
playground/app/routes/file-upload.tsx (1)
107-109:⚠️ Potential issue | 🟠 MajorClient-side validation bypasses the empty-file normalization, yielding a different error than the server.
onValidatecallsparseWithZod(formData, { schema })directly, without going through thenormalizeFile/normalizeFileshelpers used server-side. BecauseFile extends Blob, a browser-sent empty file (empty name, size 0) still satisfiesz.instanceof(Blob, { message: 'File is required' })and instead trips the.refine(file => file.type === 'application/json', 'Only JSON file is accepted')check.Net effect with client validation enabled:
- Submit empty
file→ client shows "Only JSON file is accepted".- Same submission on server (no client validation) → "File is required".
Since this playground page exists to demonstrate correct behavior, the two paths should agree. Reuse
parseFileUploadon the client as well.🛠️ Proposed fix
const [form, fields] = useForm({ lastResult, onValidate: !noClientValidate - ? ({ formData }) => parseWithZod(formData, { schema }) + ? ({ formData }) => parseFileUpload(formData) : undefined, });If
parseWithZodis no longer needed, its import can be dropped too.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@playground/app/routes/file-upload.tsx` around lines 107 - 109, Client-side validation currently calls parseWithZod(formData, { schema }) directly in the onValidate handler, bypassing normalizeFile/normalizeFiles and causing empty-file behavior to differ from the server; change the onValidate to call parseFileUpload(formData) (the same parser used server-side) so client and server use the same normalization/validation logic, and remove the now-unused parseWithZod import if it becomes unused. Ensure you update the onValidate reference in the file-upload route to use parseFileUpload and keep error messaging consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@playground/app/routes/file-upload.tsx`:
- Around line 107-109: Client-side validation currently calls
parseWithZod(formData, { schema }) directly in the onValidate handler, bypassing
normalizeFile/normalizeFiles and causing empty-file behavior to differ from the
server; change the onValidate to call parseFileUpload(formData) (the same parser
used server-side) so client and server use the same normalization/validation
logic, and remove the now-unused parseWithZod import if it becomes unused.
Ensure you update the onValidate reference in the file-upload route to use
parseFileUpload and keep error messaging consistent.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: a8dc9e7e-4f14-4003-9162-61480e54ae18
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
playground/app/routes/file-upload.tsxplayground/package.json
1 participant
Generated Summary
guide/package.json
playground/package.json
playground/app/routes/file-upload.tsx
Example (server parse resolver):