From Collection.mjs : use-sync-external-store/shim/index.js doesn't provide an export named: 'useSyncExternalStore'
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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 :
```js
// 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_
Contributor guide
Research direction
Start with react-aria-components/dist/Collection.mjs and the use-sync-external-store/shim/index.js export named in the browser error, then compare the Vite resolve.alias workaround in the report. Reproduce with react-aria-components 1.2.1 in a Vite app if possible; done means importing a component no longer causes the missing-export crash.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript, vite
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100