Modules export errors when using with Vite

[ng-hai]

I have two issues when working with Uniforms in a Vite project (Remix | React Router).

JSONSchemaBridgeModule cannot be used as constructor

__vite_ssr_import_2__.default is not a constructor

Named export error from uniforms-unstyled package (could be other themes as well)

[vite] Named export 'AutoForm' not found.
The requested module 'uniforms-unstyled' is a CommonJS module,
which may not support all module.exports as named exports.

Reproduce on codesandbox: https://codesandbox.io/p/devbox/tw9mnm

What I have tried
For the named export issue, I can make it work by changing

- import { AutoForm } from "uniforms-unstyled"
+ import * as Unstyled from "uniforms-unstyled"

- <AutoForm />
+ <Unstyled.AutoForm />

[piotrpospiech]

Hi @ng-hai, thank you for the reproduction. It was very helpful.

There is a problem with CommonJS modules when server-side render is configured (ssr option in the react-router.config.ts). I think it should resolve to the ES module, but somehow it uses CommonJS. If the ssr option is disabled, imports work correctly.

As a temporary solution, use changed imports like you suggested:

import * as JSONSchemaBridgeModule from "uniforms-bridge-json-schema";
import * as Unstyled from "uniforms-unstyled";

// ...

const schema = new JSONSchemaBridgeModule.JSONSchemaBridge({
  schema: jsonSchema,
  validator,
});

export default function Home() {
  return <Unstyled.AutoForm schema={schema} />;
}

In the meantime, we will work on solving the module resolution problem.

[ng-hai]

Thanks for quick reply. I changed the import style for JSONSchemaBridgeModule but the error still occurred. I tried to turn off SSR mode also.

[piotrpospiech]

Try following imports instead

import JSONSchemaBridgeModule from "uniforms-bridge-json-schema";
import Unstyled from "uniforms-unstyled";

With disabled ssr option, you can use imports normally:

import { JSONSchemaBridge } from "uniforms-bridge-json-schema";
import { AutoForm } from "uniforms-unstyled";

However, it looks like you need to update all react-router packages to the latest version v7.4.0.

[chmelevskij]

What worked for me was

import ZodBridgeModule from "uniforms-bridge-zod";
import * as AutoFormModule from "uniforms-unstyled";
import { z } from "zod";

const userSchema = z.object({
  firstName: z.string(),
  lastName: z.string(),
  email: z.string().email(),
});

const schema =
  typeof window !== "undefined"
    ? new ZodBridgeModule({ schema: userSchema })
    : new ZodBridgeModule.ZodBridge({ schema: userSchema });

const AutoForm =
  typeof window === "undefined" ? AutoFormModule.default.AutoForm : AutoFormModule.AutoForm;

export default function Uniforms() {
  console.log("Uniforms AutoForm:", AutoFormModule);
  return (
    <div className="col-span-full row-span-full flex items-center justify-center">
      <h1 className="text-2xl font-bold mb-4">Uniforms Example</h1>
      <AutoForm schema={schema} onSubmit={(model) => window.alert(JSON.stringify(model))} />
    </div>
  );
}

[chmelevskij]

Ok, so we've kind of monkey patched it with vite plugin:

import type { Plugin } from "vite";

/**
 * Vite plugin to fix uniforms module export issues with SSR
 * Handles the CommonJS/ESM dual module resolution problem
 * @see https://github.com/vazco/uniforms/issues/1405
 */
export function uniformsFix(): Plugin {
  const uniformsModules = [
    "uniforms-bridge-zod",
    "uniforms-bridge-json-schema",
    "uniforms-bridge-simple-schema",
    "uniforms-bridge-simple-schema-2",
    "uniforms-unstyled",
    "uniforms-antd",
    "uniforms-bootstrap3",
    "uniforms-bootstrap4",
    "uniforms-bootstrap5",
    "uniforms-material",
    "uniforms-mui",
    "uniforms-semantic",
  ];

  const bridgeModules = [
    "uniforms-bridge-zod",
    "uniforms-bridge-json-schema",
    "uniforms-bridge-simple-schema",
    "uniforms-bridge-simple-schema-2",
  ];

  return {
    name: "vite-plugin-uniforms-fix",

    resolveId(id) {
      // Create virtual modules for uniforms packages
      if (uniformsModules.some((mod) => id === `virtual:${mod}`)) {
        return `\0${id}`;
      }
    },

    load(id) {
      // Handle virtual modules
      if (id.startsWith("\0virtual:")) {
        const moduleName = id.slice("\0virtual:".length);

        if (bridgeModules.includes(moduleName)) {
          // For bridge modules, export a wrapper that handles the constructor issue
          const bridgeClass = getBridgeClassName(moduleName);
          return `
import BridgeModule from "${moduleName}";

export default BridgeModule;

// Export the bridge class with conditional instantiation
export class ${bridgeClass} {
  constructor(options) {
    const BridgeConstructor = typeof window !== "undefined" 
      ? BridgeModule 
      : BridgeModule.${bridgeClass};
    
    return new BridgeConstructor(options);
  }
}

// Re-export all other exports
export * from "${moduleName}";
`;
        }
        if (moduleName.includes("uniforms-")) {
          // For UI component modules, handle the named export issue
          return `
import * as UniformsModule from "${moduleName}";

// Handle default export variations
const moduleExports = typeof window === "undefined" 
  ? UniformsModule.default || UniformsModule
  : UniformsModule;

// Export all components
${getComponentExports()}

// Default export
export default moduleExports;
`;
        }
      }
    },

    transform(code, id) {
      // Transform imports to use virtual modules
      if (id.endsWith(".tsx") || id.endsWith(".ts") || id.endsWith(".jsx") || id.endsWith(".js")) {
        let transformed = code;
        let hasTransformations = false;

        for (const moduleName of uniformsModules) {
          const importRegex = new RegExp(
            `(import\\s+(?:{[^}]*}|\\*\\s+as\\s+\\w+|\\w+)\\s+from\\s+["'])${moduleName}(["'])`,
            "g"
          );

          if (importRegex.test(transformed)) {
            hasTransformations = true;
            transformed = transformed.replace(importRegex, `$1virtual:${moduleName}$2`);
          }
        }

        return hasTransformations ? transformed : null;
      }
    },
  };
}

function getBridgeClassName(moduleName: string): string {
  const bridgeMap: Record<string, string> = {
    "uniforms-bridge-zod": "ZodBridge",
    "uniforms-bridge-json-schema": "JSONSchemaBridge",
    "uniforms-bridge-simple-schema": "SimpleSchemaBridge",
    "uniforms-bridge-simple-schema-2": "SimpleSchema2Bridge",
  };

  return bridgeMap[moduleName] || "Bridge";
}

function getComponentExports(): string {
  // Common uniforms components that should be exported
  const commonComponents = [
    "AutoForm",
    "AutoField",
    "AutoFields",
    "BaseForm",
    "BoolField",
    "DateField",
    "ErrorField",
    "ErrorsField",
    "HiddenField",
    "ListAddField",
    "ListDelField",
    "ListField",
    "ListItemField",
    "LongTextField",
    "NestField",
    "NumField",
    "QuickForm",
    "RadioField",
    "SelectField",
    "SubmitField",
    "TextField",
    "ValidatedForm",
    "ValidatedQuickForm",
  ];

  return commonComponents
    .map(
      (component) => `
export const ${component} = moduleExports.${component} || moduleExports.default?.${component};`
    )
    .join("");
}