From Collection.mjs : use-sync-external-store/shim/index.js doesn't provide an export named: 'useSyncExternalStore'

[ppoulard]

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 :

Uncaught SyntaxError: The requested module 'https://localradar.inria.fr:3000/@fs/.../node_modules/use-sync-external-store/shim/index.js?v=0d8975ec' doesn't provide an export named: 'useSyncExternalStore' [Collection.mjs:4:9](https://localradar.inria.fr:3000/@fs/...node_modules/react-aria-components/dist/Collection.mjs?v=0d8975ec)
    React 11
        lazyInitializer
        mountLazyComponent
        beginWork
        callCallback2
        invokeGuardedCallbackDev
        invokeGuardedCallback
        beginWork$1
        performUnitOfWork
        workLoopConcurrent
        renderRootConcurrent
        performConcurrentWorkOnRoot
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533

💁 Possible Solution

Temporarily, I used the following config in vite :

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: [{
            find: 'use-sync-external-store/shim/index.js',
            replacement: 'react'
        }],
   } 
})

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

[snowystinger]

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.

[ppoulard]

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) {

[snowystinger]

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.

react-spectrum/packages/@react-aria/collections/src/CollectionBuilder.tsx

Line 87 in 4b27a0c

const useSyncExternalStore = typeof React['useSyncExternalStore'] === 'function'

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.

[stdavis]

@ppoulard My app started having this same issue today. Did you ever find a resolution? I'm on react 18. I wonder if this react issue is related?

[ppoulard]

@ppoulard My app started having this same issue today. Did you ever find a resolution? I'm on react 18. I wonder if this react issue is related?

@stdavis Hi, the only workaround I found is the one mentioned at the start of this thread.