[bug] Can't import the named export 'useSyncExternalStore' from non EcmaScript module

[carlomigueldy]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.3.1

Current Behavior

I have no clue where it originates, I only migrated from ^0.1.3 to ^0.3.1 then suddenly it starts becoming an issue

Expected Behavior

Should not throw this exception

Steps To Reproduce

Create a new project and use multiple hooks and specifically use version ^0.1.3 then migrate to ^0.3.1 so you'll have to change most hooks since it returns single object

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

[TkDodo]

Which version of react-query is wagmi using? This should be fixed with v4.0.0-beta.7: https://github.com/tannerlinsley/react-query/releases/tag/v4.0.0-beta.7

[tmm]

@TkDodo wagmi@0.3.1 uses react-query@4.0.0-beta.7. Looks like wagmi's use-sync-external-store is at 1.1.0 not 1.0.0 (like in react-query). Might have something to do with that.

[TkDodo]

interesting - but we also switched to a different bundling strategy in beta.6:

• ESM compliant bundling TanStack/query#3521

maybe this has something to do with it? If you can try out if things still work with beta.5, or even better, if you could provide an isolated reproduction for react-query - that could help narrow it down.

[tmm]

@TkDodo will do. Thanks for the tip!

@carlomigueldy what bundler are you using?

[carlomigueldy]

Hello folks @tmm @TkDodo sorry for getting back late here, just got so busy and flooded with some priorities at hand.

@TkDodo will do. Thanks for the tip!

@carlomigueldy what bundler are you using?

In our codebase we are currently using Create-React-App (CRA)

[carlomigueldy]

interesting - but we also switched to a different bundling strategy in beta.6:

• ESM compliant bundling tannerlinsley/react-query#3521

maybe this has something to do with it? If you can try out if things still work with beta.5, or even better, if you could provide an isolated reproduction for react-query - that could help narrow it down.

Hmm I am gonna check it out!

[tmm]

Sounds good! (Let's also not tag TkDodo here anymore until we have something concrete. I'm sure he's a busy guy.)

[just-toby]

hi @carlomigueldy , my project is also using CRA and hitting the same issue. were you able to find a fix or workaround?

[tmm]

@just-toby What version of CRA?

[just-toby]

@tmm we were using react-scripts@4.0.3 . upgrading to v5 would be a large lift since v5 no longer provides polyfills for node core modules by default. see this issue. is that what would be required to get this working?

[just-toby]

for the record, we're working around this issue using react-app-rewired for the time being, at least until we migrate away from the old CRA version

[davidlee1435]

+1- we're also using react-app-rewired

[youngkidwarrior]

Same error with CRA using react-scripts#3.0.1.

I've not dabbled with webpack much, someone mind explaining the react-app-rewired fix?

Edit: jk, Just looked at facebook/create-react-app#11756
Edit 2: The react-app-rewired fix described here does not work for react-scripts#3.0.1

[doliG]

up

[tmm]

This appears to be an issue with useSyncExternalStore and react-scripts@4. react-scripts@5 works so I recommend upgrading there if you can. Sounds like others have had success with react-app-rewired.

Closing this as wagmi is only supporting react-scripts version 5+ to reduce burden on the core team from debugging old versions.

[SimRunBot]

This appears to be an issue with useSyncExternalStore and react-scripts@4. react-scripts@5 works so I recommend upgrading there if you can. Sounds like others have had success with react-app-rewired.

Closing this as wagmi is only supporting react-scripts version 5+ to reduce burden on the core team from debugging old versions.

can confirm, updating to "react-scripts": "5.0.1" resolved this issue for me

[eenagy]

This is also happening with next.js projects.

[tmm]

@eenagy do you have a minimal reproducible example for Next.js?

[SimRunBot]

useSyncExternalStore was introduced in React v18, maybe that is the underlying issue

[tmm]

useSyncExternalStore is backwards compatible and should work with any version of React that supports hooks.

[milonite]

There's any workaround for this if I want to keep using cra4?

[TkDodo]

please have a look at https://github.com/tannerlinsley/react-query/releases/tag/v4.0.0-beta.17 where we've hopefully fixed the upstream issue.

[EnzoVezzaro]

I'm experiencing the same issue in v1.3.7

How did you guys solve it? For what I can see on the issues, this has been solved last year, but I've been facing the same issue in v1.3.7

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.