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

Restrict React DOM imports from Server Components #27382

Merged
merged 1 commit into from
Sep 15, 2023

Conversation

acdlite
Copy link
Collaborator

@acdlite acdlite commented Sep 15, 2023

Adds a separate entry point for the react-dom package when it's accessed from a Server Component environment, using the "react-server" export condition.

When you're inside a Server Component module, you won't be able to import client-only APIs like useState. This applies to almost all React DOM exports, except for Float ones like preload.

@facebook-github-bot facebook-github-bot added the React Core Team Opened by a member of the React Core Team label Sep 15, 2023
@acdlite acdlite requested a review from gnoff September 15, 2023 17:25
@sebmarkbage
Copy link
Collaborator

Since /client just reexports these it'll break. It doesn't make much sense to import it anyway so maybe we can also make it throw an early error if imported at all.

@acdlite acdlite force-pushed the restrict-react-dom-rsc branch 3 times, most recently from e240130 to e986147 Compare September 15, 2023 18:08
@react-sizebot
Copy link

react-sizebot commented Sep 15, 2023

Comparing: d6dcad6...e539173

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 = 166.62 kB 166.62 kB = 52.13 kB 52.13 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 176.05 kB 176.05 kB = 54.97 kB 54.97 kB
facebook-www/ReactDOM-prod.classic.js = 571.73 kB 571.73 kB = 100.64 kB 100.64 kB
facebook-www/ReactDOM-prod.modern.js = 555.46 kB 555.46 kB = 97.75 kB 97.75 kB
oss-experimental/react-dom/cjs/react-dom.shared-subset.development.js +∞% 0.00 kB 14.24 kB +∞% 0.00 kB 3.03 kB
oss-experimental/react-dom/cjs/react-dom.shared-subset.production.min.js +∞% 0.00 kB 2.43 kB +∞% 0.00 kB 0.81 kB
oss-stable-semver/react-dom/cjs/react-dom.shared-subset.development.js +∞% 0.00 kB 14.24 kB +∞% 0.00 kB 3.03 kB
oss-stable-semver/react-dom/cjs/react-dom.shared-subset.production.min.js +∞% 0.00 kB 2.43 kB +∞% 0.00 kB 0.81 kB
oss-stable/react-dom/cjs/react-dom.shared-subset.development.js +∞% 0.00 kB 14.24 kB +∞% 0.00 kB 3.03 kB
oss-stable/react-dom/cjs/react-dom.shared-subset.production.min.js +∞% 0.00 kB 2.43 kB +∞% 0.00 kB 0.81 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-dom/cjs/react-dom.shared-subset.development.js +∞% 0.00 kB 14.24 kB +∞% 0.00 kB 3.03 kB
oss-experimental/react-dom/cjs/react-dom.shared-subset.production.min.js +∞% 0.00 kB 2.43 kB +∞% 0.00 kB 0.81 kB
oss-stable-semver/react-dom/cjs/react-dom.shared-subset.development.js +∞% 0.00 kB 14.24 kB +∞% 0.00 kB 3.03 kB
oss-stable-semver/react-dom/cjs/react-dom.shared-subset.production.min.js +∞% 0.00 kB 2.43 kB +∞% 0.00 kB 0.81 kB
oss-stable/react-dom/cjs/react-dom.shared-subset.development.js +∞% 0.00 kB 14.24 kB +∞% 0.00 kB 3.03 kB
oss-stable/react-dom/cjs/react-dom.shared-subset.production.min.js +∞% 0.00 kB 2.43 kB +∞% 0.00 kB 0.81 kB

Generated by 🚫 dangerJS against e539173

Adds a separate entry point for the react-dom package when it's
accessed from a Server Component environment, using the "react-server"
export condition.

When you're inside a Server Component module, you won't be able to
import client-only APIs like useState. This applies to almost all React
DOM exports, except for Float ones like preload.
@acdlite acdlite merged commit 2d2f2af into facebook:main Sep 15, 2023
2 checks passed
github-actions bot pushed a commit that referenced this pull request Sep 15, 2023
Adds a separate entry point for the react-dom package when it's accessed
from a Server Component environment, using the "react-server" export
condition.

When you're inside a Server Component module, you won't be able to
import client-only APIs like useState. This applies to almost all React
DOM exports, except for Float ones like preload.

DiffTrain build for [2d2f2af](2d2f2af)
kodiakhq bot pushed a commit to vercel/next.js that referenced this pull request Sep 20, 2023
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Adds a separate entry point for the react-dom package when it's accessed
from a Server Component environment, using the "react-server" export
condition.

When you're inside a Server Component module, you won't be able to
import client-only APIs like useState. This applies to almost all React
DOM exports, except for Float ones like preload.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
Adds a separate entry point for the react-dom package when it's accessed
from a Server Component environment, using the "react-server" export
condition.

When you're inside a Server Component module, you won't be able to
import client-only APIs like useState. This applies to almost all React
DOM exports, except for Float ones like preload.

DiffTrain build for commit 2d2f2af.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants