remix-validated-form: [Bug]: unable to import zod-form-data with Vite SSR, package is treated as a CJS module

Which packages are impacted?

• remix-validated-form
• @remix-validated-form/with-zod
• @remix-validated-form/with-yup
• zod-form-data

What version of these packages are you using?

zod-form-data: 1.2.4

Please provide a link to a minimal reproduction of the issue.

https://github.com/geoffrich/vite-zfd-repro

Steps to Reproduce the Bug or Issue

1. Create a new Vite SSR project with npm create vite-extra@latest repro-project -- --template ssr-vanilla
2. Install zod and zod-form-data
3. Add the following to /src/entry-server.js

import { zfd } from "zod-form-data";

const schema = zfd.formData({
  name: zfd.text()
});

export function render() {
  const params = schema.parse(new URLSearchParams("name=test"));

  const html = `
    ${JSON.stringify(params)}
  `;
  return { html };
}

1. Run npm run build and npm run preview. See the following error. The issue does not manifest in dev mode, since Vite bundles the package differently.

file:///Users/grich/code/other/vite-zfd-repro/dist/server/entry-server.js:1
import { zfd } from "zod-form-data";
         ^^^
SyntaxError: Named export 'zfd' not found. The requested module 'zod-form-data' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'zod-form-data';
const { zfd } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async file:///Users/grich/code/other/vite-zfd-repro/server.js:51:17

Expected behavior

I expected there not to be an error.

I can workaround it by adding zod-form-data to ssr.noExternal in the Vite config to force it to be bundled, but this error indicates a packaging issue with the package and would be good to have fixed.

Screenshots or Videos

No response

Platform

• OS: MacOS
• Node version: 16.16.0
• Browser: n/a

Additional context

I first ran into this when trying to use this package with SvelteKit, though the provided repo only uses Vite to make reproduction simpler.

I was able to fix it by 1) renaming /dist/zod-form-data.es.js to /dist/zod-form-data.es.mjs and 2) adding "exports": "./dist/zod-form-data.es.mjs" to the package.json. This was suggested by Publint, which validates package.json files to make sure they are valid modules.

Not sure if that has any unintended consequences, but it seemed to do the trick locally.

Thanks for this package, it’s been great to use to validate query params!