RAC as dependency in component library

[BMCwebdev]

Hi everyone,

I'm encountering an issue with integrating react-aria-components in my Vite-powered React application via a component library that I've developed. My component library includes several components like Button, Modal, and AlertDialog, which are essentially copies, and slight modifications, of the component tsx files from the react-aria-components starter kit.

Issue Summary:

Direct Use: When I try to use DialogTrigger directly by importing it from react-aria-components (a dependency within my component library), the Button component (imported from my component library) renders without any issues, but DialogTrigger seems non-functional. Despite DialogTrigger being logged in the console and evidently present, it doesn't exhibit the expected behavior. Occasionally, an error suggests there is no pressable item available.

Direct Dependency Attempt: Adding react-aria-components as a direct dependency in the consuming app (besides it being a dependency of my component library) doesn't resolve the issue.

Workaround: The functionality works as expected only when I explicitly export DialogTrigger from my component library and then import it into the app from there. While this method works, it's not ideal for my use case.

Vite Configuration Attempt: I've also attempted to include react-aria-components in the optimizeDeps section of my vite.config.js:

    optimizeDeps: {
      include: ['react-aria-components'],
    },

Unfortunately, this didn't alleviate the issue.

Has anyone faced a similar challenge or can offer insights into what might be causing this behavior? Any advice on resolving the DialogTrigger functionality issue without resorting to directly exporting it from the component library would be greatly appreciated.

Thank you in advance for your time and help!

[snowystinger]

Sounds like you're possibly getting different context objects, this can happen if you have multiple copies of any of our packages installed. Could you consult your lock file and ensure there is only one copy of each package?

[BMCwebdev]

Well I learned something today:

When react-aria-components is bundled with my-component-library, consumers of my-component-library cannot directly import DialogTrigger or any other component from react-aria-components using the import statement

import { DialogTrigger } from 'react-aria-components';

This is because react-aria-components is a nested dependency within my-component-library, and the way Node.js and most bundlers like Webpack or Vite handle module resolution, they do not allow importing nested dependencies directly by default. The standard behavior is to resolve dependencies from the project's top-level node_modules directory. Since react-aria-components is not a top-level dependency in the consumer's project (but rather a dependency of my-component-library), this direct import will fail.

TLDR: I need to either make react-aria-components a peer dependency in my component library (I assume will work), or export it myself as part of the component library like so

export * as RAC from 'react-aria-components';
export { AlertDialog } from './components/AlertDialog.jsx'
export { Breadcrumbs } from './components/Breadcrumbs.jsx'

The later is the method I am going to use for now. I will evaluate the pros and cons of the two methods.

[snowystinger]

Peer is probably the correct way to go, then if another library makes use of RAC, you won't conflict with them if you're both used in the same application. For instance, maybe you make a Dialog, the app uses DialogTrigger directly, and uses a Button created with RAC from another library. Then all three will play well together.

[BMCwebdev]

Another thing I needed to do was add react-aria-components to external in rollupOptions in my vite build, for those searching this issue.
rollupOptions: {
external: ['react', 'react-dom', 'react-aria-components'],