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

Separate RSC and SSR jsx-runtime modules #56438

Merged
merged 2 commits into from Oct 4, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/next-swc/crates/next-core/src/next_import_map.rs
Expand Up @@ -452,7 +452,7 @@ async fn insert_next_server_special_aliases(
match runtime {
NextRuntime::Edge => "next/dist/compiled/react/jsx-runtime",
NextRuntime::NodeJs => {
"next/dist/server/future/route-modules/app-page/vendored/shared/\
"next/dist/server/future/route-modules/app-page/vendored/ssr/\
react-jsx-runtime"
}
},
Expand All @@ -465,7 +465,7 @@ async fn insert_next_server_special_aliases(
match runtime {
NextRuntime::Edge => "next/dist/compiled/react/jsx-dev-runtime",
NextRuntime::NodeJs => {
"next/dist/server/future/route-modules/app-page/vendored/shared/\
"next/dist/server/future/route-modules/app-page/vendored/ssr/\
react-jsx-dev-runtime"
}
},
Expand Down Expand Up @@ -579,7 +579,7 @@ async fn insert_next_server_special_aliases(
match runtime {
NextRuntime::Edge => "next/dist/compiled/react/jsx-runtime",
NextRuntime::NodeJs => {
"next/dist/server/future/route-modules/app-page/vendored/shared/\
"next/dist/server/future/route-modules/app-page/vendored/rsc/\
react-jsx-runtime"
}
},
Expand All @@ -592,7 +592,7 @@ async fn insert_next_server_special_aliases(
match runtime {
NextRuntime::Edge => "next/dist/compiled/react/jsx-dev-runtime",
NextRuntime::NodeJs => {
"next/dist/server/future/route-modules/app-page/vendored/shared/\
"next/dist/server/future/route-modules/app-page/vendored/rsc/\
react-jsx-dev-runtime"
}
},
Expand Down
8 changes: 4 additions & 4 deletions packages/next/src/build/webpack-config.ts
Expand Up @@ -176,16 +176,16 @@ function createRSCAliases(
if (!opts.isEdgeServer) {
if (opts.layer === WEBPACK_LAYERS.serverSideRendering) {
alias = Object.assign(alias, {
'react/jsx-runtime$': `next/dist/server/future/route-modules/app-page/vendored/shared/react-jsx-runtime`,
'react/jsx-dev-runtime$': `next/dist/server/future/route-modules/app-page/vendored/shared/react-jsx-dev-runtime`,
'react/jsx-runtime$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-jsx-runtime`,
'react/jsx-dev-runtime$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-jsx-dev-runtime`,
react$: `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react`,
'react-dom$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-dom`,
'react-server-dom-webpack/client.edge$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-server-dom-webpack-client-edge`,
})
} else if (opts.layer === WEBPACK_LAYERS.reactServerComponents) {
alias = Object.assign(alias, {
'react/jsx-runtime$': `next/dist/server/future/route-modules/app-page/vendored/shared/react-jsx-runtime`,
'react/jsx-dev-runtime$': `next/dist/server/future/route-modules/app-page/vendored/shared/react-jsx-dev-runtime`,
'react/jsx-runtime$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-jsx-runtime`,
'react/jsx-dev-runtime$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-jsx-dev-runtime`,
Copy link
Member

Choose a reason for hiding this comment

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

This is matching existing code, but just commenting that right above we check that opts.layer === WEBPACK_LAYERS.reactServerComponents, implying that we could/should just have this constant instead 😅

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah i noticed that but figured I'd maintain the style. should probably clean the whole thing up though

react$: `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react`,
'react-dom$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-dom`,
'react-server-dom-webpack/server.edge$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-server-dom-webpack-server-edge`,
Expand Down
Expand Up @@ -15,13 +15,11 @@ import * as vendoredContexts from './vendored/contexts/entrypoints'

let vendoredReactRSC
let vendoredReactSSR
let vendoredReactShared

// the vendored Reacts are loaded from their original source in the edge runtime
if (process.env.NEXT_RUNTIME !== 'edge') {
vendoredReactRSC = require('./vendored/rsc/entrypoints')
vendoredReactSSR = require('./vendored/ssr/entrypoints')
vendoredReactShared = require('./vendored/shared/entrypoints')
}

type AppPageUserlandModule = {
Expand Down Expand Up @@ -64,7 +62,6 @@ export class AppPageRouteModule extends RouteModule<
const vendored = {
'react-rsc': vendoredReactRSC,
'react-ssr': vendoredReactSSR,
'react-shared': vendoredReactShared,
contexts: vendoredContexts,
}

Expand Down
@@ -1,6 +1,7 @@
import * as React from 'react'

import * as ReactDOM from 'react-dom/server-rendering-stub'
import * as ReactJsxDevRuntime from 'react/jsx-dev-runtime'
import * as ReactJsxRuntime from 'react/jsx-runtime'

function getAltProxyForBindingsDEV(
type: 'Turbopack' | 'Webpack',
Expand Down Expand Up @@ -68,6 +69,8 @@ if (process.env.TURBOPACK) {

export {
React,
ReactJsxDevRuntime,
ReactJsxRuntime,
ReactDOM,
ReactServerDOMWebpackServerEdge,
ReactServerDOMTurbopackServerEdge,
Expand Down
@@ -1,3 +1,3 @@
module.exports = require('../../module.compiled').vendored[
'react-shared'
'react-rsc'
].ReactJsxDevRuntime
@@ -1,3 +1,3 @@
module.exports = require('../../module.compiled').vendored[
'react-shared'
'react-rsc'
].ReactJsxRuntime

This file was deleted.

@@ -1,10 +1,10 @@
import * as React from 'react'

import * as ReactDOM from 'react-dom/server-rendering-stub'
import * as ReactJsxDevRuntime from 'react/jsx-dev-runtime'
import * as ReactJsxRuntime from 'react/jsx-runtime'

// eslint-disable-next-line import/no-extraneous-dependencies
import * as ReactDOMServerEdge from 'react-dom/server.edge'
// eslint-disable-next-line import/no-extraneous-dependencies

function getAltProxyForBindingsDEV(
type: 'Turbopack' | 'Webpack',
Expand Down Expand Up @@ -52,6 +52,8 @@ if (process.env.TURBOPACK) {

export {
React,
ReactJsxDevRuntime,
ReactJsxRuntime,
ReactDOM,
ReactDOMServerEdge,
ReactServerDOMTurbopackClientEdge,
Expand Down
@@ -0,0 +1,3 @@
module.exports = require('../../module.compiled').vendored[
'react-ssr'
].ReactJsxDevRuntime
@@ -0,0 +1,3 @@
module.exports = require('../../module.compiled').vendored[
'react-ssr'
].ReactJsxRuntime
6 changes: 6 additions & 0 deletions packages/next/webpack.config.js
Expand Up @@ -208,6 +208,9 @@ module.exports = ({ dev, turbo, bundleType, experimental }) => {
react$: `next/dist/compiled/react${
experimental ? '-experimental' : ''
}/react.shared-subset`,
'next/dist/compiled/react$': `next/dist/compiled/react${
experimental ? '-experimental' : ''
}/react.shared-subset`,
},
},
layer: 'react-server',
Expand All @@ -220,6 +223,9 @@ module.exports = ({ dev, turbo, bundleType, experimental }) => {
react$: `next/dist/compiled/react${
experimental ? '-experimental' : ''
}/react.shared-subset`,
'next/dist/compiled/react$': `next/dist/compiled/react${
experimental ? '-experimental' : ''
}/react.shared-subset`,
},
},
},
Expand Down
Expand Up @@ -2,7 +2,7 @@ import { GoogleMapsEmbed } from '@next/third-parties/google'

const Page = () => {
return (
<div class="container">
<div className="container">
<h1>Google Maps Embed</h1>
<GoogleMapsEmbed
apiKey="XYZ"
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/app-dir/third-parties/app/youtube-embed/page.js
Expand Up @@ -2,7 +2,7 @@ import { YouTubeEmbed } from '@next/third-parties/google'

const Page = () => {
return (
<div class="container">
<div className="container">
<h1>Youtube Embed</h1>
<YouTubeEmbed videoid="ogfYd705cRs" height={400} />
</div>
Expand Down