Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Jun 12, 2024

Conversation

phryneas
Copy link
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.
Copy link

vercel bot commented Jun 12, 2024

@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.

Copy link
Collaborator

@eps1lon eps1lon left a comment

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

@phryneas
Copy link
Contributor Author

phryneas commented Jun 12, 2024

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 :)

Copy link

vercel bot commented Jun 12, 2024

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
Copy link

react-sizebot commented Jun 12, 2024

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

Copy link
Collaborator

@eps1lon eps1lon left a comment

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 facebook:main Jun 12, 2024
44 checks passed
@phryneas
Copy link
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