Skip to content

Avoid acccessing React internals from use-sync-external-store/shim - #29868

Merged
eps1lon merged 10 commits into
react:mainfrom
phryneas:pr/uSES-avoid-internals-access
Jun 12, 2024
Merged

Avoid acccessing React internals from use-sync-external-store/shim#29868
eps1lon merged 10 commits into
react:mainfrom
phryneas:pr/uSES-avoid-internals-access

Conversation

@phryneas

Copy link
Copy Markdown
Contributor

Fixes #29854

Summary

Prior to this change, the build process or use-sync-external-store would replace console.error with
an error call that then again would call printWarning, which accesses
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED in current stable
versions (see https://unpkg.com/browse/use-sync-external-store@1.2.2/cjs/use-sync-external-store-shim.development.js)
and React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE in future versions
(see https://unpkg.com/browse/use-sync-external-store@0.0.0-experimental-a26e3f403e-20240611/cjs/use-sync-external-store-shim.development.js).

This might cause builds to fail, as there would be no version of the package that is compatible with both React 18 and 19.

With this change, that replacement is avoided and a normal console.error
call is made instead.

How did you test this change?

I verified by locally building this locally with yarn build use-sync-external-store and looking at the build output at build/oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.

Prior to this change, the build process would replace `console.error` with
an `error` call that then again would call `printWarning`, which accesses
`React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` in current stable
versions (see https://unpkg.com/browse/use-sync-external-store@1.2.2/cjs/use-sync-external-store-shim.development.js)
and `React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` in future versions
(see https://unpkg.com/browse/use-sync-external-store@0.0.0-experimental-a26e3f403e-20240611/cjs/use-sync-external-store-shim.development.js).

This might cause builds to fail.

With this change, that replacement is avoided and a normal `console.error`
call is made instead.
@vercel

vercel Bot commented Jun 12, 2024

Copy link
Copy Markdown

@phryneas is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

@eps1lon eps1lon left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can add a test to packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js for the warning by extracting the necessary code from https://codesandbox.io/p/sandbox/react-19-uses-old-react-vl547c?file=%2Fsrc%2Findex.js%3A11%2C43

Comment thread packages/use-sync-external-store/src/useSyncExternalStore.js
@phryneas

phryneas commented Jun 12, 2024

Copy link
Copy Markdown
Contributor Author

I believe just changing the existing test to "should never include a stack trace" should test for this sufficiently - I'm not sure how to run the tests with different flags, though.
I trust CI will know :)

@vercel

vercel Bot commented Jun 12, 2024

Copy link
Copy Markdown

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

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 12, 2024 5:50pm

@react-sizebot

react-sizebot commented Jun 12, 2024

Copy link
Copy Markdown

Comparing: fb57fc5...c12120a

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.js = 6.66 kB 6.66 kB = 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 497.80 kB 497.80 kB = 89.24 kB 89.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 502.62 kB 502.62 kB = 89.94 kB 89.94 kB
facebook-www/ReactDOM-prod.classic.js = 597.56 kB 597.56 kB = 105.38 kB 105.38 kB
facebook-www/ReactDOM-prod.modern.js = 571.49 kB 571.49 kB = 101.27 kB 101.27 kB
oss-stable-rc/use-sync-external-store/cjs/use-sync-external-store-shim.development.js = 4.15 kB 3.46 kB = 1.41 kB 1.13 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store-shim.development.js = 4.15 kB 3.46 kB = 1.41 kB 1.13 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store-shim.development.js = 4.15 kB 3.46 kB = 1.41 kB 1.13 kB
oss-stable-rc/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js = 3.86 kB 3.17 kB = 1.36 kB 1.08 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js = 3.86 kB 3.17 kB = 1.36 kB 1.08 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js = 3.86 kB 3.17 kB = 1.36 kB 1.08 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store-shim.development.js = 4.23 kB 3.46 kB = 1.43 kB 1.13 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js = 3.94 kB 3.17 kB = 1.38 kB 1.08 kB
oss-stable-rc/use-sync-external-store/cjs/use-sync-external-store.development.js = 2.05 kB 1.37 kB = 0.91 kB 0.62 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store.development.js = 2.05 kB 1.37 kB = 0.91 kB 0.62 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store.development.js = 2.05 kB 1.37 kB = 0.91 kB 0.62 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store.development.js = 2.13 kB 1.37 kB = 0.94 kB 0.62 kB
test_utils/ReactAllWarnings.js Deleted 63.88 kB 0.00 kB Deleted 15.96 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-rc/use-sync-external-store/cjs/use-sync-external-store-shim.development.js = 4.15 kB 3.46 kB = 1.41 kB 1.13 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store-shim.development.js = 4.15 kB 3.46 kB = 1.41 kB 1.13 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store-shim.development.js = 4.15 kB 3.46 kB = 1.41 kB 1.13 kB
oss-stable-rc/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js = 3.86 kB 3.17 kB = 1.36 kB 1.08 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js = 3.86 kB 3.17 kB = 1.36 kB 1.08 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js = 3.86 kB 3.17 kB = 1.36 kB 1.08 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store-shim.development.js = 4.23 kB 3.46 kB = 1.43 kB 1.13 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js = 3.94 kB 3.17 kB = 1.38 kB 1.08 kB
oss-stable-rc/use-sync-external-store/cjs/use-sync-external-store.development.js = 2.05 kB 1.37 kB = 0.91 kB 0.62 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store.development.js = 2.05 kB 1.37 kB = 0.91 kB 0.62 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store.development.js = 2.05 kB 1.37 kB = 0.91 kB 0.62 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store.development.js = 2.13 kB 1.37 kB = 0.94 kB 0.62 kB
test_utils/ReactAllWarnings.js Deleted 63.88 kB 0.00 kB Deleted 15.96 kB 0.00 kB

Generated by 🚫 dangerJS against c12120a

Comment thread packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js Outdated

@eps1lon eps1lon left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@eps1lon
eps1lon merged commit 50e89ec into react:main Jun 12, 2024
@phryneas

Copy link
Copy Markdown
Contributor Author

Thank you for walking me through this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[React 19] useSyncExternalStore shim might break

4 participants