react-query v4: useSyncExternalStore error with Create React App

[tmm]

Describe the bug

Using react-scripts@4.0.3 (a.k.a. Create React App) does not work with react-query@4.0.0-beta.X. The following is the error that occurs when running the development server:

./node_modules/react-query/lib/reactjs/useSyncExternalStore.mjs
Can't reexport the named export 'useSyncExternalStore' from non EcmaScript module (only default export is available)

Your minimal, reproducible example

https://github.com/tmm/react-query-debug

Steps to reproduce

1. Clone repo
2. Install dependencies npm i
3. Run development server npm start

Expected behavior

I expected to not get an useSyncExternalStore error

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: macOS
• Browser: Firefox, Chrome

react-query version

4.0.0-beta.X

TypeScript version

No response

Additional context

Reporting based on this comment by TkDodo for wevm/wagmi#398

[Chris-Kag]

Same issue here and I'm using windows

[TkDodo]

@hirbod @sachinraja can you maybe also have a look here?

I'm not sure if we're doing some wrong in our imports / exports, or if this is CRA related? We have some examples that run on CRA 3.x and they are fine 🤔

[TkDodo]

FYI, If I change this to use the default import, like the error suggests, it doesn't complain anymore, however, it also doesn't work at runtime:

This suggests to me that the named re-export is actually correct ?

[hirbod]

I am afraid that I am not the best person to answer this. All my knowledge goes down to RN

[sachinraja]

The error is correct. We need to change useSyncExternalStore.ts to this:

import pkg from 'use-sync-external-store/shim/index.js'
export const useSyncExternalStore = pkg.useSyncExternalStore

This is due to esm/cjs interop. The error isn't in react-scripts@3 because it only uses cjs.

[hirbod]

Ah yeah, I remember seeing this fix in another repo, I think it was reanimated or react-native-gesture-handler.

[TkDodo]

thx, I'll make a PR. One more question: is the code for useSyncExternalStore.native.ts correct?

export { useSyncExternalStore } from 'use-sync-external-store/shim/index.native.js'

[sachinraja]

The metro bundler only picks the cjs path for this package but yeah it should probably also be changed.

[tannerlinsley]

🎉 This issue has been resolved in version 4.0.0-beta.17 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀