feat(deps): update react-hook-form to v8 beta and re-enable React Compiler - #1850
feat(deps): update react-hook-form to v8 beta and re-enable React Compiler#1850pedrobonamin wants to merge 2 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
🦋 Changeset detectedLatest commit: 5ddb277 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
✅ E2E Tests🟢 26 passed • view full report • view run Studio: https://plugins-e2e-test-studio-agw69p2e8.sanity.dev Datasets: |
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
193b322 to
d2f2c63
Compare
cursor
Bot
changed the title
…piler Bump the react-hook-form catalog entry to 8.0.0-beta.3 for sanity-plugin-media and sanity-plugin-dashboard-widget-vercel. v8 adds first-class React Compiler support, so the temporary 'use no memo' opt-out in the media asset details form is removed and the plugin ships fully compiled again. None of the v8 breaking changes affect this codebase: no useFieldArray, Watch component, watch(callback), or setValue on field arrays; the register() input-ref change is transparent to prop-spreading consumers. Also convert the remaining inline Footer/Header dialog components to plain JSX, dropping the react/react-compiler lint suppressions that pattern required. @hookform/resolvers has no v8-compatible release yet (peers ^7.0.0); the resolver contract is unchanged and works with the beta, so allow it via peerDependencyRules.allowedVersions.
d2f2c63 to
7bd4791
Compare
There was a problem hiding this comment.
Pull request overview
Updates the monorepo’s react-hook-form catalog entry to 8.0.0-beta.3 to restore compatibility with React Compiler output in affected plugins, and refactors remaining inline dialog subcomponents to avoid remount churn.
Changes:
- Bump
react-hook-formfrom^7.84.0→8.0.0-beta.3(catalog + lockfile) and allow@hookform/resolvers’ peer mismatch viapeerDependencyRules.allowedVersions. - Remove the React Compiler opt-out (
'use no memo') fromDialogAssetEdit/Details. - Replace inline
Footer/Headercomponent definitions with plain JSX nodes passed toDialogprops.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Pins react-hook-form to 8.0.0-beta.3 and adds an allowed peer override for @hookform/resolvers. |
| pnpm-lock.yaml | Updates lockfile resolution entries to match the new react-hook-form version. |
| plugins/sanity-plugin-media/src/components/DialogTagEdit/index.tsx | Converts inline Footer component to a JSX node passed via footer. |
| plugins/sanity-plugin-media/src/components/DialogTagCreate/index.tsx | Converts inline Footer component to a JSX node passed via footer. |
| plugins/sanity-plugin-media/src/components/DialogFolderCreate/index.tsx | Converts inline Footer component to a JSX node passed via footer. |
| plugins/sanity-plugin-media/src/components/DialogConfirm/index.tsx | Converts inline Footer/Header components to JSX nodes passed via footer/header. |
| plugins/sanity-plugin-media/src/components/DialogAssetEdit/Details.tsx | Removes the React Compiler opt-out directive/comments. |
| .changeset/vercel-widget-react-hook-form-v8.md | Adds a changeset for the Vercel dashboard widget dependency update. |
| .changeset/media-react-hook-form-v8.md | Adds a changeset for the media plugin update + compiler re-enable. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
stipsan
left a comment
stipsan
left a comment
There was a problem hiding this comment.
It looks like @hookform/resolvers doesn't allow v8 in its peer deps, so we have to document in the plugin how to handle peer dep errors (like we already do in bynder for react 19) before we can ship this.
Alternatively there might be a beta of @hookform/resolvers that we could use
| # @hookform/resolvers has no react-hook-form v8 compatible release yet (peers ^7.0.0); | ||
| # the resolver contract is unchanged and it works with the v8 beta | ||
| '@hookform/resolvers>react-hook-form': '8.0.0-beta.3' |
There was a problem hiding this comment.
For this change to make sense we have to document the peer dep warning in the plugin README.md, similar to what bynder does regarding react 19 peer deps
There was a problem hiding this comment.
Good point, given this will land into a warning in user land I think we should skip it until react-hook-form v8 is out of beta, which will probably land with the fix for the peer dep.
The fix is already in place, this was only to re enable the compiler, but this is not a hot path , this is in the edit dialog.
There was a problem hiding this comment.
there is not beta of @hookform/resolvers
…ent the peer warning Address review feedback on the v8 upgrade: - Move the react-hook-form v8 beta to a named catalog (catalog:react-hook-form-v8) so only sanity-plugin-media upgrades; sanity-plugin-dashboard-widget-vercel stays on the default catalog (v7) and its changeset is dropped. - Document the @hookform/resolvers peer dependency warning (and how to allow it with npm/pnpm) in the plugin README, mirroring the Bynder plugin's React 19 section. No v8-compatible @hookform/resolvers release exists yet (latest 5.7.1 declares react-hook-form ^7.55.0).
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 10 changed files in this pull request and generated no new comments.
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
Suppressed comments (1)
plugins/sanity-plugin-media/README.md:65
- The README states that
@hookform/resolversdeclares a peer dependency ofreact-hook-form ^7.55.0, but the actual peer range for the version used here (@hookform/resolvers@4.1.3) is^7.0.0(see pnpm-lock.yaml). This should be corrected so consumers aren’t misled about the peer conflict.
The plugin uses [`react-hook-form`](https://react-hook-form.com/) v8 together with [`@hookform/resolvers`](https://www.npmjs.com/package/@hookform/resolvers), which doesn't declare react-hook-form v8 in its peer dependencies yet (it declares `react-hook-form ^7.55.0`), even though the resolver contract is unchanged and works fine with v8. Until a v8-compatible release is published, tell your package manager to allow it:
Summary
Self-contained alternative to #1841, based directly on
main. Updatesreact-hook-formto8.0.0-beta.3forsanity-plugin-mediaonly per the v7 → v8 migration guide and removes the temporary'use no memo'compiler opt-out that #1840 shipped, so the plugin builds fully compiled again — without needing #1841'skeepFieldsRefworkaround at all.The v8 beta lives in a named catalog (
catalog:react-hook-form-v8); the default catalog stays on^7.84.0, sosanity-plugin-dashboard-widget-vercelis untouched by this PR.Why v8 makes the opt-out unnecessary
The bug behind #1840:
DialogAssetEditcallsreset(generateDefaultValues(...))in an effect (on mount and when the asset is updated elsewhere). v7'sreset()empties react-hook-form's internal field registry and relies on the render-timeregister()calls re-running on the next render — which React Compiler memoizes away (keyed on the stableregisterreference). Fields stayed unregistered, so typing updated the DOM but never marked the form dirty, and Save stayed disabled. v8 has first-class React Compiler support: the compiled form works with a plainreset(). Verified both by an isolated repro harness compiled withbabel-plugin-react-compiler(fails on v7, passes on v8) and in a real browser (video below).Breaking changes audit
Checked every breaking change from the migration guide against the plugin:
registerpasses the input ref directly (not a partial ref object)register()onto inputs / forwardsrefas a prop; build + type-aware lint pass unchangeduseFieldArray:idrenamed tokey,keyNameremoved<Watch names>renamed tonamewatch(callback)subscription API removedsetValueno longer updatesuseFieldArrayfieldsController, notuseFieldArraySo no source changes were required by the breaking changes themselves.
@hookform/resolverspeer dependencyNo v8-compatible release exists yet (latest
5.7.1declaresreact-hook-form: ^7.55.0; thebeta/nextdist-tags are old v1/v2-era lines). The resolver contract is unchanged and works with the beta (all resolver-based validation tests pass). Handled the same way as the Bynder plugin's React 19 peers:peerDependencyRules.allowedVersionswith an explanatory commentREADME.md(npm--legacy-peer-deps/ pnpmpeerDependencyRules.allowedVersions)Also included
Footer/Headerdialog components converted to plain JSX (DialogTagCreate,DialogTagEdit,DialogConfirm,DialogFolderCreate), matching what fix(media): enable Save when editing asset string fields #1840 already did forDialogAssetEdit. Inline components get a new identity whenever captured values change, remounting the footer subtree — including the Save button — on every form-state change. This also removes all thereact/react-compilerlint suppressions that pattern required.Notes
8.0.0-beta.3) rather than a range, so consumers of the published plugin get a deterministic beta version.sanity@next);pnpm install --frozen-lockfilepasses.Test plan
pnpm --filter sanity-plugin-media exec vitest run— 205 tests passpnpm --filter sanity-plugin-dashboard-widget-vercel exec vitest runpasses (still on v7)pnpm format,pnpm lint(type-aware),pnpm knip,pnpm build,pnpm test run(1281 tests) all passpnpm peers check— no peer dependency issuesreact-hook-form@8.0.0-beta.3, the Vercel dashboard widget resolves7.84.0dev/test-studio(pnpm dev, compiler on, no'use no memo', plainreset()): typing enables Save; after an external API update resets the open form, typing re-enables Save and the edit persists — the exact scenario that broke v7 under the compiler:v8_demo_save_works_after_external_reset.mp4
To show artifacts inline, enable in settings.