ESM compliant bundling #3521

sachinraja · 2022-04-17T19:28:19Z

add package.json "exports"
Top level files (exports) now just point to dist files instead of having their own package.json. Individual package.json files are not esm-compliant and this is already handled by "exports".
Types are now emitted into lib instead of a separate types directory. This will help support TypeScript, which will add support for "exports" in the next release.
upgrade and remove various packages related to bundling and building

Unfortunately this makes the process of adding a new export more difficult:

add UMD global to scripts/rollup/umd-config.js
add entry to "exports"
add top level directory with files that re-export built files to support bundlers that do not support "exports"
(not sure) add input file to tsconfig.types.json

vercel · 2022-04-17T19:28:25Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-query	✅ Ready (Inspect)	Visit Preview	Apr 25, 2022 at 11:30PM (UTC)

codesandbox-ci · 2022-04-17T19:29:07Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 340f29b:

Sandbox	Source
tannerlinsley/react-query: basic	Configuration
tannerlinsley/react-query: basic-typescript	Configuration

sachinraja · 2022-04-17T19:36:12Z

Looks like it failed on node v12 because a dependency required at least node v14. Considering v12 is about to go EOL in 13 days, maybe it should be removed from CI?

TkDodo · 2022-04-17T19:44:47Z

Looks like it failed on node v12 because a dependency required at least node v14. Considering v12 is about to go EOL in 13 days, maybe it should be removed from CI?

yes, we can totally do that for v4

codecov · 2022-04-17T20:06:16Z

Codecov Report

Merging #3521 (340f29b) into beta (1af25c6) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             beta    #3521   +/-   ##
=======================================
  Coverage   96.93%   96.93%           
=======================================
  Files          47       47           
  Lines        2381     2381           
  Branches      709      709           
=======================================
  Hits         2308     2308           
  Misses         71       71           
  Partials        2        2

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1af25c6...340f29b. Read the comment docs.

package.json

TkDodo · 2022-04-19T15:28:00Z

Thanks. Can you add some notes to the v4 migration guide about what the breaking changes are?

https://github.com/tannerlinsley/react-query/blob/7bba5a9754d93f7d4c5d3ca5d863b6140caf8228/docs/src/pages/guides/migrating-to-react-query-4.md#L6

TkDodo · 2022-04-19T15:29:38Z

Hmnm, I just tried out the codesandbox preview link from above:
https://codesandbox.io/s/tannerlinsley-react-query-basic-if97xi

and I got:

Error
No QueryClient set, use QueryClientProvider to set one

coming from the devtools 🤔 . Isn't that the issue we were actually trying to fix?

sachinraja · 2022-04-21T01:12:31Z

Well that's unfortunate and I'm really not sure why it's happening. It would help if I could examine the output but doesn't seem like that's possible on CSB. Seems like it's not an issue in devtools either, but rather an issue with the actual query client now.

TkDodo · 2022-04-21T06:05:54Z

Seems like it's not an issue in devtools either, but rather an issue with the actual query client now.

no, it does seem to be an issue with the devtools. The devtools are a separate entry point, but they import directly from react-query.

But, whatever you just changed, it seems to be working now 🎉

sachinraja · 2022-04-21T12:56:42Z

Awesome! It was probably that I set it up to resolve react-query to the index file instead of leaving it. Also looks like basic works, but basic-typescript doesn't (and has the error I was referring to above).

TkDodo · 2022-04-21T13:20:41Z

Also looks like basic works, but basic-typescript doesn't (and has the error I was referring to above).

you are right. in that example, we are using the PersistQueryClientProvider from the "react-query/persistQueryClient" plugin. That's probably the relevant difference?

TkDodo · 2022-04-25T14:46:11Z

thanks. I'm still seeing size differences I cannot quite explain. Compared to beta:

ESM PR: dist/broadcastQueryClient-experimental.production.min.js: 3.55KB
BETA  : dist/broadcastQueryClient-experimental.production.min.js: 3.55KB
ESM PR: dist/createAsyncStoragePersister.production.min.js: 625B
BETA  : dist/createAsyncStoragePersister.production.min.js: 625B
ESM PR: dist/createWebStoragePersister.production.min.js: 674B
BETA  : dist/createWebStoragePersister.production.min.js: 674B
- ESM PR: dist/persistQueryClient.production.min.js: 2.19KB
+ BETA  : dist/persistQueryClient.production.min.js: 1.4KB
ESM PR: dist/react-query-core.production.min.js: 9.85KB
BETA  : dist/react-query-core.production.min.js: 9.85KB
ESM PR: dist/react-query-devtools.production.min.js: 13.71KB
BETA  : dist/react-query-devtools.production.min.js: 13.71KB
- ESM PR: dist/react-query.production.min.js: 11.36KB
+ BETA  : dist/react-query.production.min.js: 11.3KB

so it looks to me like some code of the that was previously in the persistQueryClient bundle has somehow moved towards the main react-query bundle 🤔
maybe I've added a wrong import there that is now resolved differently?

sachinraja · 2022-04-25T23:28:49Z

Looks like that was caused by upgrading to the very latest version of @rollup/plugin-commonjs (published 2 days ago). I downgraded to the version before and I'm seeing the same numbers as the latest beta version published.

TkDodo · 2022-04-26T08:54:40Z

splendid 🤩 . We can take a look at the latest rollup plugin separately. would be curious to know what is changing here :)

tannerlinsley · 2022-04-26T09:00:49Z

🎉 This PR is included in version 4.0.0-beta.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

latin-1 · 2022-04-26T13:39:05Z

Module not found: Error: Can't resolve 'use-sync-external-store/shim' in '/home/runner/work/mono/mono/node_modules/react-query/lib/reactjs'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'use-sync-external-store/shim' failed to resolve only because it was resolved as fully specified

Since use-sync-external-store doesn't include the exports field in its package.json, we should use use-sync-external-store/shim/index.js instead.

TkDodo · 2022-04-26T13:45:32Z

@latin-1 when are you getting this error?

@sachinraja can you have a look please?

latin-1 · 2022-04-26T13:49:24Z

@TkDodo I got that error from Webpack. In Webpack 5, fullySpecified is enabled by default.
https://webpack.js.org/configuration/module/#resolvefullyspecified

sachinraja · 2022-04-26T13:49:41Z

I don't have time to fix it right now, but @latin-1 is correct. We should change all instances of importing from use-sync-external-store/shim to use-sync-external-store/shim/index.js either through a Babel plugin or the actual source code.

TkDodo · 2022-04-26T14:08:13Z

@latin-1 can you contribute that maybe ?

sachinraja · 2022-07-18T22:12:54Z

@TkDodo I'm not sure exactly what happened but it seems like this was (unintentionally?) reverted when the project was converted to a monorepo. The package no longer has (standards-compliant) ESM support and this note in the migration docs is not true.

TkDodo · 2022-07-19T05:20:14Z

@sachinraja yes, seems so. Can you fix it please?

TkDodo · 2022-07-19T12:35:09Z

@sachinraja I'm pretty sure this is also stopping me from fixing this issue:

fix(react-query-devtools): only export devtools in development mode #3861

I tried to make the exports conditional, but it doesn't work for the esm builds. I remember you changed something there as well?

sachinraja added 3 commits April 17, 2022 12:16

fix various bundling issues

7144f97

add package.json to exports

df99ef5

remove @svgr/rollup

d304895

vercel bot deployed to Preview April 17, 2022 19:28 View deployment

vercel bot deployed to Preview April 17, 2022 19:29 View deployment

remove node v12 from CI

f35c303

vercel bot deployed to Preview April 17, 2022 20:00 View deployment

TkDodo reviewed Apr 17, 2022

View reviewed changes

package.json Show resolved Hide resolved

support devtools/development

8008da6

vercel bot deployed to Preview April 17, 2022 20:41 View deployment

do not alias react-query

00b111f

vercel bot deployed to Preview April 21, 2022 00:11 View deployment

add side effect

e8ca1e7

vercel bot deployed to Preview April 21, 2022 00:46 View deployment

sachinraja added 2 commits April 24, 2022 08:21

remove "module"

a2ab79e

fix

02ccab1

vercel bot deployed to Preview April 24, 2022 15:23 View deployment

fix exports

808b5fd

vercel bot deployed to Preview April 24, 2022 15:26 View deployment

update babel

131265a

vercel bot deployed to Preview April 24, 2022 21:33 View deployment

update rollup

c111947

vercel bot deployed to Preview April 24, 2022 21:35 View deployment

downgrade @rollup/plugin-commonjs

340f29b

vercel bot deployed to Preview April 25, 2022 23:30 View deployment

TkDodo merged commit 3fabd41 into TanStack:beta Apr 26, 2022

tannerlinsley added the released on @beta label Apr 26, 2022

sachinraja deleted the fix-bundling branch April 26, 2022 11:15

latin-1 mentioned this pull request Apr 26, 2022

Use fully-specified path to import use-sync-external-store/shim #3561

Merged

TkDodo mentioned this pull request May 2, 2022

[bug] Can't import the named export 'useSyncExternalStore' from non EcmaScript module wevm/wagmi#398

Closed

1 task

yss14 mentioned this pull request May 5, 2022

fix: type issue when void or undefined is returned from query function #3541

Merged

This was referenced May 9, 2022

React Native: Queries not executing on v4 #3582

Closed

my loading is forever "True" apollographql/apollo-client#9668

Closed

sachinraja mentioned this pull request Jul 9, 2022

v2.3.0-beta build is not esm compliant timolins/react-hot-toast#204

Closed

TkDodo mentioned this pull request Jul 20, 2022

ESM support #3882

Closed

DamianOsipiuk mentioned this pull request Jul 21, 2022

fix: restore missing exports declarations #3892

Merged

HansBrende mentioned this pull request Jan 6, 2023

Can't resolve 'use-sync-external-store/shim' in `~/.../node_modules/wouter'. Did you mean 'index.js'? molefrog/wouter#275

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ESM compliant bundling #3521

ESM compliant bundling #3521

sachinraja commented Apr 17, 2022 •

edited

Loading

vercel bot commented Apr 17, 2022 •

edited

Loading

codesandbox-ci bot commented Apr 17, 2022 •

edited

Loading

sachinraja commented Apr 17, 2022

TkDodo commented Apr 17, 2022

codecov bot commented Apr 17, 2022 •

edited

Loading

TkDodo commented Apr 19, 2022

TkDodo commented Apr 19, 2022

sachinraja commented Apr 21, 2022 •

edited

Loading

TkDodo commented Apr 21, 2022

sachinraja commented Apr 21, 2022

TkDodo commented Apr 21, 2022

TkDodo commented Apr 25, 2022

sachinraja commented Apr 25, 2022

TkDodo commented Apr 26, 2022

tannerlinsley commented Apr 26, 2022

latin-1 commented Apr 26, 2022

TkDodo commented Apr 26, 2022

latin-1 commented Apr 26, 2022 •

edited

Loading

sachinraja commented Apr 26, 2022 •

edited

Loading

TkDodo commented Apr 26, 2022

sachinraja commented Jul 18, 2022 •

edited

Loading

TkDodo commented Jul 19, 2022

TkDodo commented Jul 19, 2022

ESM compliant bundling #3521

ESM compliant bundling #3521

Conversation

sachinraja commented Apr 17, 2022 • edited Loading

vercel bot commented Apr 17, 2022 • edited Loading

codesandbox-ci bot commented Apr 17, 2022 • edited Loading

sachinraja commented Apr 17, 2022

TkDodo commented Apr 17, 2022

codecov bot commented Apr 17, 2022 • edited Loading

Codecov Report

TkDodo commented Apr 19, 2022

TkDodo commented Apr 19, 2022

sachinraja commented Apr 21, 2022 • edited Loading

TkDodo commented Apr 21, 2022

sachinraja commented Apr 21, 2022

TkDodo commented Apr 21, 2022

TkDodo commented Apr 25, 2022

sachinraja commented Apr 25, 2022

TkDodo commented Apr 26, 2022

tannerlinsley commented Apr 26, 2022

latin-1 commented Apr 26, 2022

TkDodo commented Apr 26, 2022

latin-1 commented Apr 26, 2022 • edited Loading

sachinraja commented Apr 26, 2022 • edited Loading

TkDodo commented Apr 26, 2022

sachinraja commented Jul 18, 2022 • edited Loading

TkDodo commented Jul 19, 2022

TkDodo commented Jul 19, 2022

sachinraja commented Apr 17, 2022 •

edited

Loading

vercel bot commented Apr 17, 2022 •

edited

Loading

codesandbox-ci bot commented Apr 17, 2022 •

edited

Loading

codecov bot commented Apr 17, 2022 •

edited

Loading

sachinraja commented Apr 21, 2022 •

edited

Loading

latin-1 commented Apr 26, 2022 •

edited

Loading

sachinraja commented Apr 26, 2022 •

edited

Loading

sachinraja commented Jul 18, 2022 •

edited

Loading