ESM support

[TkDodo]

we had it in v4 beta, but it went away with the rebranding.

prior art:

• ESM compliant bundling #3521

there were some useSyncExternalStore issues reported after that, which prompted another fix:

• fix: uSES import for react-native / esm #3601

[TkDodo]

@sachinraja FYI

[TkDodo]

let's try to keep discussion about ESM support here :)

I tried out 4.0.11-beta.0 and it works fine in our simple example, but that one uses vite:

• https://codesandbox.io/s/amazing-carson-7fqsfe

There have been reports on discord that this version "breaks the app", but we'd need more info and try out more bundlers I guess.

cc @DamianOsipiuk

[sachinraja]

@TkDodo Yeah if they share reproductions or at least error messages, I can look into it.

[TkDodo]

@sachinraja I can confirm that 4.0.11-beta.0 doesn't work with react-scripts v4. Here is an (older) repo of mine that uses v4 of react-scripts, and I've merely switched from 4.1.0 where it works (but doesn't render devtools at all as per the issue) to the beta:

• https://github.com/TkDodo/testing-react-query/blob/feature/breaking-react-query/package.json#L16-L17

what I'm seeing when I run it is this:

I can also confirm that removing the rendering of the <ReactQueryDevtools initialIsOpen /> makes the error go away.

[TkDodo]

Another thing I found out with @DamianOsipiuk is that the size of the beta is 5x times too large:

https://bundlephobia.com/package/@tanstack/react-query@4.0.11-beta.0

I think @DamianOsipiuk mentioned that react-dom is included because it wasn't specified as external. Just wanted to note all known issues here :)

[sachinraja]

I've seen that Provider error before, it has to do with bundlers picking the cjs format for one package and the same format for the other package.

[TkDodo]

@DamianOsipiuk I tried the latest beta (4.0.11-beta.4) with react-scripts v4 and it now fails with:

Failed to compile.

./node_modules/@tanstack/react-query-devtools/build/lib/index.mjs
Can't import the named export 'Fragment' from non EcmaScript module (only default export is available)

[DamianOsipiuk]

Hmm it seems that it now complains about esm + cjs interop. At least it's picking up correct entry right now.
Will take a look at that.

[DamianOsipiuk]

So far when i have played with it i was unable to make it work for webpack 4 while maintaining support for other bundlers.

There is additional config needed for webpack 4 to make it work, which will be a pain for react-scripts users due to webpack config being inaccessible without third party tools.

I have one more idea which i will test when i will have some time, via exports.node.

All other ideas to solve this problem appreciated.

[TkDodo]

can I ask all interested parties to please try out the latest and greatest beta version:

https://github.com/TanStack/query/releases/tag/v4.3.0-beta.3

on my create-react-app v4, I see no problems now:

• app works in dev mode
• devtools show up
• devtools are stripped from production builds 🎉