Combine styled RAC and default RAC.

[brenotx]

Hi everyone,

I'm having trouble integrating styled react-aria-components in a regular application that uses RAC. To isolate the issue, I created two projects using create-create-app:

• rac-button-test that only has a RAC Button wrapper and it is published as npm package.
• my-app which is just an fresh create-create-app that imports rac-button-test and combines it with RAC components.

Example:

import Button from "rac-button-test";
import { DialogTrigger, Popover } from "react-aria-components";

<DialogTrigger>
  <Button>Open Popover</Button>
  <Popover>
    <h2>Popover</h2>
    <p>Popover content</p>
  </Popover>
</DialogTrigger>

The problem is that the Popover won't open and the rac-button-test button component doesn't id that is rendered when implementing the same code above with just react-aria-components imports.

I found two(1st, 2nd) solved discussions that were solved by declaring react-aria-components as peerDependency> but the solution didn't work for me. I also ran the lockCheck script and found no multiple versions of any package.

My current workout is to reexport the DialogTrigger in the rac-button-test package.

Has anyone experienced a similar issue or can shed light on what might be causing this behavior? I would greatly appreciate any suggestions on how to fix the DialogTrigger functionality without needing to export it directly from the component library.

Thanks in advance for your help and support!

[snowystinger]

Depends on what files are being referenced, it can behavior in a similar way to the bugs seen when there are multiple copies of a package.
What I mean by that is that we support ESM and CommonJS through three different files (for reasons, thanks webpack 4).
So for instance

Breadcrumbs.main.js
Breadcrumbs.mjs
Breadcrumbs.module.js

Depending on your bundler and package manager, you may be resolving to a different one in your app vs in your rac-button-test

Can you verify? one quick way is to just put a console log into the top level of each of those files so you know if they are imported

[brenotx]

I added a console log to each Buttton.(main/mjs/module).js file. Here are the results:

• When I import the Button component from react-aria-components I can see the log from File:Button.mjs and the Popover is opens on click.
• Importing Button from rac-button-test I don't see any console log from node_modules/react-aria-components and the popover does not open:

Test projects:

• test app: regular create-react-app that imports react-aria-componets and rac-button-test.
• rac-button-test: RAC Button wrapper published to npm

[snowystinger]

Should RAC be in externals? https://github.com/brenotx/rac-button-wrapper/blob/main/webpack.config.js#L27

I haven't used webpack to bundle a library, but I'd double check everything here https://webpack.js.org/guides/author-libraries/ for instance, I don't see this key in your webpack config https://webpack.js.org/guides/author-libraries/#expose-the-library and this section would seem to indicate that RAC should be externalized https://webpack.js.org/guides/author-libraries/#externalize-lodash

Sounds like you should also make RAC a devDependency in addition to peer

That we aren't seeing any of the console logs I suggested means that your library isn't referencing the installed version and instead likely has its own copy bundled in

[brenotx]

I added RAC as external, as Webpack suggested.

After adding the library as a dev dependency, I can see the console log. It looks like the console log in RAC Button.main.js is being triggered as expected, but clicking the button doesn't open the popover. I guess RAC's DialogTrigger is not identifying the button as a valid button, although the button is working as expected.

screen-recording-2024-08-29-at-104918-am_UkxATt0j.mp4

[snowystinger]

I found your issue. rac-button-test is using the main.js files, however, your app is using the mjs files. You'll need to get them aligned. Probably by either adding more exports in your package.json for rac-test-button and transpiling to more options. Or by changing your app so that it resolves to the some thing that rac-test-button does.

[brenotx]

Thank you so much for your help! I was losing my hair debugging this 😆

In case more people face the same issue, I'd also recommend reading Dual CommonJS/ES module packages for extra context.