Currently, I am in the process of creating a custom UI library using Vite that acts as a simple wrapper for ShadCN Uis components. While everything works smoothly when utilizing the library within pages router components in a couple of NextJS apps, import errors start to surface when integrating it into app router components.

The root cause of these errors lies in the imports (and re-exports) from a third-party dependency called react-hook-form within the library codebase. Specifically, I encounter the following issues when executing npm run build:

./node_modules/shadcn-ui-lib/dist/index6.js Attempted import error: 'FormProvider' is not exported from 'react-hook-form' (imported as 'u').

Import trace for requested module: ./node_modules/shadcn-ui-lib/dist/index6.js ./node_modules/shadcn-ui-lib/dist/index.js ./src/app/rsc/page.tsx

./node_modules/shadcn-ui-lib/dist/index6.js Attempted import error: 'Controller' is not exported from 'react-hook-form' (imported as 'p')

Here is an excerpt from index6.js in the node_modules directory of the consuming app referenced in the error:

import { Label as f } from "./index5.js";
import { Slot as F } from "@radix-ui/react-slot";
import * as e from "react";
import { FormProvider as u, Controller as p, useFormContext as x } from "react-hook-form";
import { useForm as M } from "react-hook-form";
const R = u;

// ...

export { R as Form, C as FormControl, w as FormDescription, $ as FormField, I as FormItem, g as FormLabel, E as FormMessage, M as useForm, a as useFormField };

A few perplexing observations have left me puzzled:

• The error solely occurs in app router components, functioning flawlessly in pages router components.
• The successful import of Slot from @radix-ui/react-slot, despite treating dependencies like @radix-ui/react-slot and react-hook-form identically, raises questions.
• Upon inspecting the node_modules folder in the consuming app, react-hook-form installation and the exportation of FormProvider match expectations.
• Errors persist even without directly importing anything from react-hook-form in the consuming app but arise as soon as any component from the library is utilized.

Implementation Details

library/vite.config.ts

// @ts-ignore Not sure how to solve this but not worth the time to figure it out...
import * as packageJson from './package.json';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    react({
      // Not really required but seems to make the bundle a bit smaller
      jsxRuntime: 'classic',
    }),
    dts({
      include: ['src/**/*'],
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'src', 'index.ts'),
      formats: ['es'],
      fileName: 'index',
    },
    rollupOptions: {
      external: [...Object.keys(packageJson.peerDependencies || {}), ...Object.keys(packageJson.dependencies)],
      output: { preserveModules: true, exports: 'named' },
    },

    target: 'esnext',
    sourcemap: true,
  },
});

library/package.json

{
  "name": "shadcn-ui-lib",
  // ...
}
</p>

library/src/components/form.tsx The Source which holds the troublesome imports & re-expors from react-hook-form):

'use client';

import { cn } from '../lib/css.utils.js';
import { Label } from './label.js';
import type * as LabelPrimitive from '@radix-ui/react-label';
import { Slot } from '@radix-ui/react-slot';
import * as React from 'react';
import { Controller, type ControllerProps, type FieldError, type FieldPath, type FieldValues, FormProvider, useForm, useFormContext } from 'react-hook-form';

const Form = FormProvider;

// Definitions of form components, hooks etc. (`FormItem`, `FormField`, `useFormField`, ...)

export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useForm };

consuming-app/src/app/rsc/page.tsx

import { Card } from 'shadcn-ui-lib';

export default function Home() {
  return (
    <main>
      <Card>RSC test page</Card>
    </main>
  );
}

Guesswork

I specifically restricted my library to "ESM only" due to complications encountered when attempting to export both CJS & ESM concurrently causing unresolved issues in the consuming apps. Perhaps this restriction contributes to the problem?

In comparing

@radix-ui/react-slot/package.json

(functioning correctly) with react-hook-form/package.json (resulting in issues), I noticed that react-slot lacks cjs files while react-hook-form offers both cjs and esm files.

Could it be that my consuming apps (or the library itself) are trying to import the cjs files from react-hook-form instead of the esm files? If so, how can this be rectified?

Reproduction

To reproduce the issue, you can download a minimal example of the library and a test-consuming app here:

• https://github.com/CombeeMike/shadcn-ui-lib (the library)
• https://github.com/CombeeMike/shadcn-ui-lib-test (the consuming app)

Run npm i && npm run dev or npm run build in the consuming app to replicate the issues.

Conclusion

Being relatively new to library authoring, the intricacies of ESM & CJS elicit confusion, especially regarding their implications. The source of the issue remains uncertain, whether originating from my library, the consuming apps, or the third-party dependencies.

Your insights and guidance on this matter would be deeply appreciated, and I am willing to provide additional information if necessary.

Update

Edit actions performed directly on react-hook-form/package.json within my consuming app yielded interesting results:

Eliminating the react-server condition from the conditional exports appeared to resolve the issue (at least apparent through the absence of build errors...):

"exports": {
  "./package.json": "./package.json",
  ".": {
    "types": "./dist/index.d.ts",
    "react-server": "./dist/react-server.esm.mjs", // <-- Remove this
    "import": "./dist/index.esm.mjs",
    "require": "./dist/index.cjs.js"
  }
},

Hence, it appears that the errors may not stem from ESM/CJS distinctions but rather the presence of this react-server export.

Question

This development prompts a crucial question about possible adjustments in either my consuming app or library to address this anomaly?

For your reference, this issue does not manifest when directly importing react-hook-form in a Next JS app router but only surfaces when imported indirectly via my library.