Open ppoulard opened 1 month ago
but I'm not sure whether it is reliable because I read somewhere in the docs that there was some specific stuff in the shim that are expected by react-aria
Where did you read this? I'm not sure what we'd be relying on that would be different between the two, but I might be forgetting something, this was added a while ago.
but I'm not sure whether it is reliable because I read somewhere in the docs that there was some specific stuff in the shim that are expected by react-aria
Where did you read this? I'm not sure what we'd be relying on that would be different between the two, but I might be forgetting something, this was added a while ago.
Here in the code : node_modules/react-aria-components/dist/Collection.mjs
// React 16 and 17 don't support useSyncExternalStore natively, and the shim provided by React does not support getServerSnapshot.
// This wrapper uses the shim, but additionally calls getServerSnapshot during SSR (according to SSRProvider).
function $7135fc7d473fd974$var$useSyncExternalStoreFallback(subscribe, getSnapshot, getServerSnapshot) {
It shouldn't be an issue for you. You don't get to that code unless you're using a version of React which doesn't have useSyncExternalStore
which is React 16 and 17. But you've said you're using
However, I don't intend to use react < 18
So you shouldn't get to that code and it's fine to just replace it. https://github.com/adobe/react-spectrum/blob/4b27a0c027f4fbab9ed1070c748966c902b13429/packages/%40react-aria/collections/src/CollectionBuilder.tsx#L87
You might have something with the cjs/mjs observation. They should be fine to use together, your bundler should be able to interop them. However, you might look to see if Vite has any issues with that.
For example, you'll notice we have mjs/module.js/main.js, the cjs one just isn't called cjs because webpack 4 had issues with that.
I think it'd be best to create a minimal reproduction so we can see what's going on. Given the stack, I'd guess you should try some lazy/suspense components to try to reproduce it. Maybe Vite can't interop that.
Provide a general summary of the issue here
I wrote my first components almost like the ones supplied in react-aria (with vanilla css), and they worked in Storybook But when imported in my big app made with vite (just starting with a little Tooltip) it just crashes
🤔 Expected Behavior?
It should not crash
😯 Current Behavior
Fatal error in the console, due to
react-aria-components/dist/Collection.mjs
:💁 Possible Solution
Temporarily, I used the following config in vite :
but I'm not sure whether it is reliable because I read somewhere in the docs that there was some specific stuff in the shim that are expected by react-aria
However, I don't intend to use react < 18
Thanks for your help
🔦 Context
No response
🖥️ Steps to Reproduce
It's a rather big app, so I have not a minimal test case, but it sounds like a typescript import incompability cjs from mjs due to
use-sync-external-store/shim
Version
"react-aria-components": "1.2.1"
What browsers are you seeing the problem on?
Firefox
If other, please specify.
No response
What operating system are you using?
Mac OS 14.4.1 (23E224)
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response