React Hook Form Schema Migration

Before & After

SchemaShift migrates both the schema definitions and the resolver imports. Here is a typical React Hook Form component before and after migrating from Yup to Zod:

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
});

const { register, handleSubmit } = useForm({
  resolver: yupResolver(schema),
});

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

const { register, handleSubmit } = useForm({
  resolver: zodResolver(schema),
});

Notice that both the schema library imports and the resolver function are rewritten automatically. The useForm call itself remains unchanged — only the resolver wrapper function changes.

Automatic Resolver Migration

SchemaShift's FormResolverMigrator detects @hookform/resolvers imports in your source files and rewrites them to match your target schema library. This happens automatically during any migration that involves a supported form library.

Supported Resolver Mappings

The import path is also updated (e.g., @hookform/resolvers/yup becomes @hookform/resolvers/zod).

Migration Command

No special flags are needed — resolver migration is automatic when SchemaShift detects React Hook Form in your project:

# Preview changes first
schemashift migrate ./src -f yup -t zod --dry-run

# Run the migration
schemashift migrate ./src -f yup -t zod

# Use the react-hook-form preset for guided migration
schemashift migrate ./src --preset react-hook-form-yup-to-zod

Edge Cases & Gotchas

• @hookform/resolvers version: Ensure your installed version of @hookform/resolvers includes the resolver for your target library. The zodResolver has been available since v3.0.0. Run npm install @hookform/resolvers@latest after migration.
• Error message format differences: Yup and Zod produce different error object structures. If your components access raw error objects (beyond what formState.errors provides), you may need to update those accessors. The resolver layer normalizes most differences, but custom error rendering logic should be reviewed.
• Resolver options: Some resolvers accept configuration options (e.g., zodResolver(schema, { mode: 'sync' })). These options are resolver-specific and are not automatically migrated. SchemaShift preserves the second argument as-is and adds a TODO comment if it detects resolver options.
• Dynamic schemas: If you construct schemas dynamically (e.g., inside a component or via a factory function), ensure the resolver call is updated wherever the schema is created. SchemaShift rewrites all detected resolver imports in the scanned files.

After Migration

• Run npm install @hookform/resolvers@latest to ensure resolver compatibility
• Review all TODO(schemashift) comments in migrated files
• Test form submission and validation error display
• Check that custom error rendering still works with the new error format
• Remove the old schema library from package.json if no longer needed
• Run your test suite to verify form behavior

Related Migration Guides

Get Started

React Hook Form's resolver architecture makes schema migration straightforward. SchemaShift handles both the schema conversion and resolver rewriting automatically.

Resolver migration requires the Individual tier or above. View pricing.