Importing RAC from two separate dependencies

[kayewrobleski]

Our company is trying to build a design system using React Aria Components. Our design system is a library of React components that wrap RAC components and add some additional props and styling. We aren't changing the logic of the RAC components, simply just adding our company-branded styling using Tailwind and an additional className prop that enables the user to customize styles.

Our goal was to only include the components that would be frequently used across different applications in the design system. Then, each application would use a combination of components from the design system and OOB react aria components to create any custom components specific to that application.

We're running into any issue importing components from our design system and trying to use them alongside components imported from react-aria-components. See the example below.

A button component from our design system looks like this:

import {
  Button as ReactAriaButton,
  ButtonProps as ReactAriaButtonProps
} from 'react-aria-components';

export interface ButtonProps extends ReactAriaButtonProps {
  /**
   * The level of emphasis of the button.  Primary is the highest level of emphasis. Inverse is medium emphasis. Muted is low emphasis.
   */
  variant?: 'primary' | 'inverse' | 'muted'
  /**
   * Additional classes to apply to the Button
   */
  className?: string
}

export const Button = React.forwardRef(({
  variant = 'primary',
  children,
  className,
  ...otherProps
}: ButtonProps, 
ref: React.ForwardedRef<HTMLButtonElement>) => {
  return (
    <ReactAriaButton
      // buttonClasses returns a string of tailwind classes that styles the component
      className={buttonClasses({ variant, className })}
      {...otherProps}
      ref={ref}
    >
      {children}
    </ReactAriaButton>
  )
});

Here is an example of trying to build a Popover in an application using the design system.

// Custom button component from design system example above
import { Button } from 'my-design-system';
import { DialogTrigger, Popover } from 'react-aria-components';

export const PopoverExample = () => {
    return <DialogTrigger>
        <Button>Popover button</Button>
        <Popover>Popover content</Popover>
    </DialogTrigger>
}

This doesn't end up working - clicking the button does not actually trigger the popover to open. The HTML below is how the button example above gets rendered. The popover does not get rendered at all when the button is clicked.

When creating a popover with components all exported from react-aria-components OR with components all exported from my-design-system everything seems to work properly. This is how a working example gets rendered.

Button

Popover

You'll notice the ids and react aria attributes are missing from the first example. It seems like the DialogTrigger component from react-aria-components is not able to recognize that Button is also a react aria components, and isn't hooking the components up properly.

I'm wondering if this is expected behavior, a bug within react aria components, or are we just doing something wrong? At the end of the day, our goal is to only have custom-styled React components for low level components (e.g. Button, Input, etc.) and allow each application to combine those with other react aria components to create more complex components. We worked around this issue by re-exporting all the react aria components from our design system, but that is turning out to be messy and hard to maintain.

Any advice or help on this problem would be much appreciated!

[snowystinger]

Most likely you have multiple copies of our packages installed. This usually appears as a node_modules insides another node_modules package. Can you check if you have duplicates?
If you do, you should be able to resolve it to just one copy and the issue should resolve.

Most likely the my-design-system has either a dependency on RAC instead of a peer + dev dependency, or it isn't setting a flexible enough range dependency. Either approach should work.

[kayewrobleski]

Thank you! This worked for us. Initially, we had react-aria-components as a regular dependency and a peerDependency. We also are using vite to build our project, so we had to include the following in our vite.config

export default defineConfig({
  build: {
      external: [
          'react/jsx-runtime', 
          ...Object.keys(peerDependencies)
       ]
  },
...
})

Changing react-aria-components to a devDependency and including ...Object.keys(peerDependencies) in our external build options was required to keep it from getting bundled with our project.