adobe / adobe/react-spectrum

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

Open
#6,694 5 comments 4 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.