ESHOPMAN Admin Dashboard: Restoring Client-Side Form Validation After Core Updates

Effective storefront management within HubSpot relies on a seamless and intuitive ESHOPMAN Admin Dashboard experience. A critical component of this experience is client-side form validation, which provides immediate feedback to users, preventing errors and ensuring data integrity. Recently, some ESHOPMAN users and developers observed an issue where form validation messages in the Admin Dashboard silently failed to render after updating core ESHOPMAN packages.

Understanding the Client-Side Validation Gap in ESHOPMAN Admin

The problem manifests when submitting forms in the ESHOPMAN Admin Dashboard (e.g., managing products, orders, or other storefront entities). Instead of seeing inline error messages for invalid or empty required fields, the form simply appears to accept the input client-side, even though it's technically invalid. This can lead to confusion and a less efficient workflow for merchants and administrators managing their headless commerce operations via HubSpot.

The Technical Root Cause: Dependency Version Skew

This behavior stems from a specific dependency version conflict within the ESHOPMAN core components, particularly affecting the Admin Dashboard. ESHOPMAN leverages robust frontend libraries like react-hook-form for form management and zod for schema validation. Recent updates to ESHOPMAN's internal dependencies introduced zod v4. However, the @hookform/resolvers package, which bridges react-hook-form and zod, was still pinned to an older version (v3.4.2) that only supported zod v3.

The incompatibility arises because zod v4 changed the structure of its error objects. The older @hookform/resolvers v3.x expects the ZodError shape from zod v3. When presented with a zod v4 schema, it fails to correctly map the validation issues back into react-hook-form's formState.errors, resulting in no error messages being rendered on the client side.

Immediate Workaround for ESHOPMAN Developers

While ESHOPMAN's core team works on an official update to resolve this dependency skew upstream, developers managing their ESHOPMAN backend (built on Node.js/TypeScript) can implement a consumer-side workaround. This involves explicitly overriding the problematic dependency versions using Yarn's resolutions feature in your project's package.json file.

To restore client-side validation, you need to bump both @hookform/resolvers and its peer dependency, react-hook-form, to versions that are compatible with zod v4. Specifically, @hookform/resolvers v5.2.2 and react-hook-form v7.55.0 are required.

Implementing the Resolution

Add the following to your ESHOPMAN backend's package.json:

"resolutions": {
  "@hookform/resolvers": "5.2.2",
  "react-hook-form": "7.55.0"
}

After adding these resolutions, run your package manager's install command (e.g., yarn install) to apply the changes. This will force your project to use the specified versions, overriding the conflicting ones.

Important Considerations:

• Overriding @hookform/resolvers alone is insufficient; it has a peer dependency on react-hook-form@^7.55.0, so both must be updated.
• Ensure that zod is deduped to a single v4 copy in your dependency tree. Multiple versions of zod can lead to unexpected behavior with the resolver.

Expected Outcome

Once these resolutions are applied, your ESHOPMAN Admin Dashboard forms will once again correctly render inline field-level validation errors. This restores the intended user experience for managing your storefront data within HubSpot, ensuring that administrators receive immediate feedback on invalid inputs and can maintain data quality more effectively.

This insight highlights the dynamic nature of headless commerce platforms built on modern JavaScript ecosystems. Staying informed about dependency updates and community-driven solutions is key to maintaining a robust and efficient ESHOPMAN deployment, whether you're leveraging the Admin API for custom integrations or managing your storefront directly through the HubSpot application.