Add package.json exports for use-sync-external-store #26230

devongovett · 2023-02-24T17:35:15Z

Summary

We recently added support for Node ESM to React Aria, allowing all of our packages to be loaded via import. However, one problem remains – import 'use-sync-external-store/shim' throws an error:

Error: Directory import '/Users/govett/dev/rsp-next/node_modules/use-sync-external-store/shim' is not supported resolving ES modules imported from /Users/govett/dev/rsp-next/node_modules/@react-stately/toast/dist/import.mjs

This occurs both when using Node and when using webpack (e.g. in Next.js), which treats dependencies resolved from .mjs files as more strictly.

This PR adds the "exports" field to package.json for use-sync-external-store, mapping the various extensionless and directory specifiers to the correct locations. Building the package itself as ESM is not necessary, we only need package exports for it to work in Node. This matches what react-dom and other packages with modules under subpaths do as well.

For backward compatibility I have included all files in the package in the exports map, since non-exported files will throw an error.

How did you test this change?

Copied the build output into a directory under node_modules, and ran import('use-sync-external-store/shim') in a Node REPL. Also copied this into a Next.js project and it worked.

react-sizebot · 2023-02-24T18:11:17Z

Comparing: ca2cf31...5e6fa47

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	154.46 kB	154.46 kB	=	48.75 kB	48.75 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	156.45 kB	156.45 kB	=	49.41 kB	49.42 kB
facebook-www/ReactDOM-prod.classic.js	=	530.70 kB	530.70 kB	=	94.57 kB	94.57 kB
facebook-www/ReactDOM-prod.modern.js	=	514.63 kB	514.63 kB	=	92.12 kB	92.12 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 5e6fa47

eps1lon · 2023-02-25T06:25:47Z

Could you check the same steps as the test plan in #25231?

I guess my PR had to patch some files because it's still on old Rollup?

devongovett · 2023-02-26T03:55:56Z

Ah missed that there was already a PR for this. Any reason it hasn't been merged?

devongovett · 2023-02-27T17:13:13Z

@eps1lon Fixed a couple small things and ran your test repo against the latest commit and all passes now.

eps1lon · 2023-02-27T17:52:54Z

For backward compatibility I have included all files in the package in the exports map, since non-exported files will throw an error.

So this change could be released as SemVer Minor while #25231 would be SemVer Major?

devongovett · 2023-02-27T18:59:28Z

I think so, yes.

markerikson · 2023-06-21T02:41:51Z

Hiya, folks. I'm working on upgrading React-Redux to have full ESM/CJS compat for our upcoming v9.0 major, and just ran into this lovely problem myself.

In our case, we'll need to be importing "use-sync-external-store/with-selector" and are dropping the shim usage, but same issue overall.

I just did a quick check and confirmed that hand-editing a locally installed node_modules/use-sync-external-store/package.json file with these "exports" changes appears to allow a simple .mjs test script to run okay:

import { useSelector } from "react-redux";
console.log(useSelector)

Could we get this merged and released?

EskiMojo14 · 2023-09-22T16:59:37Z

any update on this?

github-actions · 2024-04-09T19:04:13Z

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

markerikson · 2024-04-09T19:08:16Z

This is definitely not stale!

* feat(package/core): scoped query * feat(package/subscriptions): drop the package for graphql-ws * feat(packages/utils): drop unused package * fix(packages/logger): scoped query shim * feat: refactor resolvers for react * chore: error message * feat(packages/react): new core shim * fix: facebook/react#26230 * fix: generated subscription client * feat(packages/gqty): compat with queryFetcher and subsscriptionsClient * chore(compat): queryFetcher and subscriptionsClient * fix(package/react): infinite render loop * feat(package/gqty): separate Cache instantiation from client * chore(package/gqty): compat and optimized normalization * fix(package/react): react hooks * chore(deps): upgrade multidict * feat(package/gqty): rename fetchPolicy to cachePolicy * feat(package/gqty): add reload in cachePolicy * fix(package/react): consistent API * feat(package/react): Added onComplete for useMutation * feat(packages/cli): interactive mode * feat(examples): added the gnt example * fix(package/react): missing fetches in useQuery * fix(package/react): incorrect suspense in usePrepared * feat(package/cli): rename introspectionOptions to introspections * fix(deps): upgrade faulty multidict * fix(ci): use esm imports * fix(packages/gqty): compat, cache option should be optional. * fix(ci): dlx errors * feat(package/gqty): batching with microtask * chore(package/cli): refactor generated client * chore: remove legacy website * feat(package/gqty): passthru return types of selectors * chore(deps): upgrade testing-library for React 18 * fix(examples/vite): compatibility with v3 * chore(package/gqty): warn about empty selections * fix(packages/gqty): pure peer dep of graphql-ws * feat(package/gqty): edge compatible microtask * chore(examples/github): remove stale example * chore(deps): upgrade and dedupe typescript * feat(package/gqty): added extensions option * fix(packages/react): defaults to soft to match the docs * fix(packages/react): better simulate useTransactionQuery * chore(docs): self-contained images in README.md * fix(packages/react): flaky waitFor * chore(deps): make type-fest optional * feat(package/cli): error handling in generated client * chore(package/cli): code-splitting for watch mode * chore(deps): remove ws dependency * fix(package/react): infinite render loop * fix(package/react): early cache hydration * fix(package/react): default mode * feat(core): even more stickier fetches * chore: verbatimModuleSyntax * chore: test grommet fetch loop * fix(package/react): properly dispose cache subscribers * chore(deps): update esbuild * feat(cli): prompt for destination * fix(packages/react): infinite fetch via stale proxy #1588 * feat(examples/gnt): add bundle analyzer * fix(cli): compat with config.introspection * fix(cli): fetch all schemas before merging * fix(cli): install peer dep 'graphql' * fix(cli): allow disable subscription via arg * fix(packages/cli): typo on options definition * feat(cli): add negative options * fix(gqty): safe auto-selection on nullable interfaces * feat(gqty): remove default return from resolve() * fix(package/react): clear selections post-fetch in useQuery (#1594) * chore(compat): normalize import.meta.url to increase compatibility. * fix(package/gqty, package/react): error handling * feat(chore): prettier v3 * fix(cli): revert prettier to v2, deps are not ready for it * fix(package/react): reduce over-fetching between renders #1594 * feat(cli): enable suspense in the generated client * chore(examples/gnt): simulate noverby's infinite fetch bug * fix(package/react): reduce infinite fetch when normalization is disabled * fix(package/react): prevent non-query types from sticky fetching * chore(ci): test theguild's snapshot action * fix(cli): missing default import in watch mode * feat(cli): do not exit on fetch errors during watch mode * chore(deps): remove unused packages * chore(lint): add prettier-plugin-jsdoc * feat(package/react): add extensions option to useMutation * chore(prettier): remove jsdoc plugin to prevent noisy changes * feat(package/react): increase compatibility with non-web environments * fix(package/react): prevent infinite fetches * feat(package/react): experimental greedy fetch * feat(package/gqty): expose aliasLength option * feat(package/gqty): supress empty warnings when onEmptyResolve is specified * chore(exampels/vite-react): upgrade deprecated deps * feat(package/logger): fix fetch timer * chore(packages/gqty): user communication on fallbacks * chore(ci): fix release errors * chore(packages/gqty): prevent fetching stale inputs * chore(package/gqty): add mutation test for the new core * chore(examples/vite-react): clean up for suspense * fix(package/gqty): properly batch with microtask * feat(package/cli): allow force disabling of react * feat(package/react): add initialLoadingState option * chore(package/gqty): tidy up file structure * fix(packages/react): prevent fetch loops from cofetching resolvers * fix(packages/gqty): disable initialLoadingState upon first fetch * fix(package/gqty): rerender after first fetch to refresh isLoading * chore(examples/gnt): upgrade nhost client * chore: fix type resolutions in esm * chore(packages/cli): TypeScript v5 friendly type imports * chore(packages/react): reduce redundant iterations * chore(deps): upgrade pnpm * chore(examples/gnt): preparation work for Supabase example API * chore(package/react): remove experimental feature

alexander-riss · 2024-06-04T07:58:32Z

@acdlite any chance of getting this merged? it seems this is blocking ESM adoption in client libraries like Redux

markerikson · 2024-06-04T13:56:54Z

Pinging @rickhanlonii - I think we briefly discussed this at ReactConf.

phryneas · 2024-06-20T13:12:43Z

This would also allow Apollo Client to use the shim - currently we ship an inlined copy of the package, as the missing exports field caused too many problems to our users.

facebook-github-bot added the CLA Signed label Feb 24, 2023

Add package.json exports for use-sync-external-store

70e246d

devongovett force-pushed the use-sync-external-store-exports branch from 29d0a5f to 70e246d Compare February 24, 2023 18:07

devongovett mentioned this pull request Feb 24, 2023

Fix toast ESM build and SSR support adobe/react-spectrum#4124

Merged

devongovett added 2 commits February 27, 2023 08:16

Small fix

72db0b7

Rename file so src structure matches build

5e6fa47

vicary added a commit to gqty-dev/gqty that referenced this pull request Mar 10, 2023

fix: facebook/react#26230

5ab7425

vicary added a commit to gqty-dev/gqty that referenced this pull request Mar 10, 2023

fix: facebook/react#26230

e00d5ed

vicary added a commit to gqty-dev/gqty that referenced this pull request Mar 10, 2023

fix: facebook/react#26230

c1c5be4

vicary added a commit to gqty-dev/gqty that referenced this pull request Mar 10, 2023

fix: facebook/react#26230

277ec18

vicary added a commit to gqty-dev/gqty that referenced this pull request Mar 10, 2023

fix: facebook/react#26230

ad4d999

vicary added a commit to gqty-dev/gqty that referenced this pull request Mar 10, 2023

fix: facebook/react#26230

bd01a81

vicary added a commit to gqty-dev/gqty that referenced this pull request Mar 10, 2023

fix: facebook/react#26230

10427ec

vicary added a commit to gqty-dev/gqty that referenced this pull request Apr 6, 2023

fix: facebook/react#26230

340b801

vicary added a commit to gqty-dev/gqty that referenced this pull request Jul 4, 2023

fix: facebook/react#26230

21cdcee

vicary added a commit to gqty-dev/gqty that referenced this pull request Aug 26, 2023

fix: facebook/react#26230

22c8907

p-j mentioned this pull request Aug 30, 2023

use-sync-external-store causes ERR_UNSUPPORTED_DIR_IMPORT error lingui/js-lingui#1754

Closed

3 tasks

vonovak mentioned this pull request Aug 31, 2023

fix: revert use useSyncExternalStore to subscribe for context updates lingui/js-lingui#1755

Merged

7 tasks

EskiMojo14 mentioned this pull request Sep 22, 2023

9.0.0-alpha.0: 'ERR_MODULE_NOT_FOUND' 'use-sync-external-store/with-selector' from react-redux/dist/react-redux.mjs within Vitest reduxjs/react-redux#2063

Closed

1 task

github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 9, 2024

github-actions bot removed the Resolution: Stale Automatically closed due to inactivity label Apr 10, 2024

HansBrende mentioned this pull request Apr 19, 2024

Bug: Support ESM for the use-sync-external-store shim #24590

Open

phryneas mentioned this pull request Jun 20, 2024

adds "rehackt/use-sync-external-store-shim" phryneas/rehackt#12

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add package.json exports for use-sync-external-store #26230

Add package.json exports for use-sync-external-store #26230

devongovett commented Feb 24, 2023 •

edited by eps1lon

Loading

react-sizebot commented Feb 24, 2023 •

edited

Loading

eps1lon commented Feb 25, 2023

devongovett commented Feb 26, 2023

devongovett commented Feb 27, 2023

eps1lon commented Feb 27, 2023

devongovett commented Feb 27, 2023

markerikson commented Jun 21, 2023 •

edited

Loading

EskiMojo14 commented Sep 22, 2023

github-actions bot commented Apr 9, 2024

markerikson commented Apr 9, 2024

alexander-riss commented Jun 4, 2024

markerikson commented Jun 4, 2024

phryneas commented Jun 20, 2024

Add package.json exports for use-sync-external-store #26230

Are you sure you want to change the base?

Add package.json exports for use-sync-external-store #26230

Conversation

devongovett commented Feb 24, 2023 • edited by eps1lon Loading

Summary

How did you test this change?

react-sizebot commented Feb 24, 2023 • edited Loading

Critical size changes

Significant size changes

eps1lon commented Feb 25, 2023

devongovett commented Feb 26, 2023

devongovett commented Feb 27, 2023

eps1lon commented Feb 27, 2023

devongovett commented Feb 27, 2023

markerikson commented Jun 21, 2023 • edited Loading

EskiMojo14 commented Sep 22, 2023

github-actions bot commented Apr 9, 2024

markerikson commented Apr 9, 2024

alexander-riss commented Jun 4, 2024

markerikson commented Jun 4, 2024

phryneas commented Jun 20, 2024

devongovett commented Feb 24, 2023 •

edited by eps1lon

Loading

react-sizebot commented Feb 24, 2023 •

edited

Loading

markerikson commented Jun 21, 2023 •

edited

Loading