Implements module preinitialization for SSR when using turbopack

gnoff · gnoff · commit 6d72ecd654b8 · 2023-09-09T21:51:15.000-07:00
diff --git a/packages/next-swc/crates/next-api/src/app.rs b/packages/next-swc/crates/next-api/src/app.rs
@@ -213,6 +213,7 @@ impl AppProject {
                 "next-dynamic".to_string(),
                 Vc::upcast(NextDynamicTransition::new(self.client_transition())),
             ),
+            ("next-ssr".to_string(), Vc::upcast(self.ssr_transition())),
         ]
         .into_iter()
         .collect();
diff --git a/packages/next-swc/crates/next-core/js/src/build/client/app-bootstrap.ts b/packages/next-swc/crates/next-core/js/src/build/client/app-bootstrap.ts
@@ -6,7 +6,6 @@ import '../shims'
 import { appBootstrap } from 'next/dist/client/app-bootstrap'
 
 appBootstrap(() => {
-  require('./app-turbopack')
   const { hydrate } = require('./app-index')
   hydrate()
 })
diff --git a/packages/next-swc/crates/next-core/js/src/build/client/app-turbopack.ts b/packages/next-swc/crates/next-core/js/src/build/client/app-turbopack.ts
diff --git a/packages/next-swc/crates/next-core/js/src/entry/app-renderer.tsx b/packages/next-swc/crates/next-core/js/src/entry/app-renderer.tsx
@@ -20,7 +20,7 @@ import { PassThrough } from 'node:stream'
 import entry from 'APP_ENTRY'
 import BOOTSTRAP from 'APP_BOOTSTRAP'
 import { createServerResponse } from '../internal/http'
-import { createManifests, installRequireAndChunkLoad } from './app/manifest'
+import { createManifests } from './app/manifest'
 import { join } from 'node:path'
 import { nodeFs } from 'next/dist/server/lib/node-fs-methods'
 import { IncrementalCache } from 'next/dist/server/lib/incremental-cache'
@@ -29,8 +29,6 @@ const {
   renderToHTMLOrFlight,
 } = require('next/dist/compiled/next-server/app-page.runtime.dev')
 
-installRequireAndChunkLoad()
-
 const MIME_TEXT_HTML_UTF8 = 'text/html; charset=utf-8'
 
 startOperationStreamHandler(async (renderData: RenderData, respond) => {
@@ -94,10 +92,6 @@ async function runOperation(renderData: RenderData) {
     },
     ComponentMod: {
       ...entry,
-      __next_app__: {
-        require: __next_require__,
-        loadChunk: __next_chunk_load__,
-      },
       pages: ['page.js'],
     },
     incrementalCache: new IncrementalCache({
diff --git a/packages/next-swc/crates/next-core/js/src/entry/app/edge-page-bootstrap.ts b/packages/next-swc/crates/next-core/js/src/entry/app/edge-page-bootstrap.ts
@@ -5,13 +5,11 @@ import { renderToHTMLOrFlight } from 'next/dist/server/app-render/app-render'
 ;('TURBOPACK { chunking-type: isolatedParallel }')
 import entry from 'APP_ENTRY'
 import BOOTSTRAP from 'APP_BOOTSTRAP'
-import { createManifests, installRequireAndChunkLoad } from './manifest'
+import { createManifests } from './manifest'
 import type { NextRequest, NextFetchEvent } from 'next/server'
 import type { RenderOpts } from 'next/dist/server/app-render/types'
 import type { ParsedUrlQuery } from 'querystring'
 
-installRequireAndChunkLoad()
-
 // avoid limiting stack traces to 10 lines
 Error.stackTraceLimit = 100
 
@@ -43,10 +41,6 @@ async function render(request: NextRequest, event: NextFetchEvent) {
     },
     ComponentMod: {
       ...entry,
-      __next_app__: {
-        require: __next_require__,
-        loadChunk: __next_chunk_load__,
-      },
       pages: ['page.js'],
     },
     clientReferenceManifest,
diff --git a/packages/next-swc/crates/next-core/js/src/entry/app/hydrate.tsx b/packages/next-swc/crates/next-core/js/src/entry/app/hydrate.tsx
@@ -2,7 +2,7 @@ import ReactDOMClient from 'react-dom/client'
 import React, { use } from 'react'
 import type { ReactElement } from 'react'
 import { version } from 'next/package.json'
-import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client'
+import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-turbopack/client'
 import { callServer } from 'next/dist/client/app-call-server'
 import { linkGc } from 'next/dist/client/app-link-gc'
 
@@ -19,12 +19,6 @@ window.next = {
   appDir: true,
 }
 
-globalThis.__next_require__ = (data) => {
-  const [client_id] = JSON.parse(data)
-  return __turbopack_require__(client_id)
-}
-globalThis.__next_chunk_load__ = __turbopack_load__
-
 const appElement = document
 
 const getCacheKey = () => {
diff --git a/packages/next-swc/crates/next-core/js/src/entry/app/manifest.ts b/packages/next-swc/crates/next-core/js/src/entry/app/manifest.ts
@@ -114,11 +114,3 @@ export function createManifests() {
 
   return { clientReferenceManifest }
 }
-
-export function installRequireAndChunkLoad() {
-  globalThis.__next_require__ = (data) => {
-    const [, , ssr_id] = JSON.parse(data)
-    return __turbopack_require__(ssr_id)
-  }
-  globalThis.__next_chunk_load__ = () => Promise.resolve()
-}
diff --git a/packages/next-swc/crates/next-core/js/types/compiled-next.d.ts b/packages/next-swc/crates/next-core/js/types/compiled-next.d.ts
@@ -1 +1,2 @@
 declare module 'next/dist/compiled/react-server-dom-webpack/client'
+declare module 'next/dist/compiled/react-server-dom-turbopack/client'
diff --git a/packages/next-swc/crates/next-core/js/types/globals.d.ts b/packages/next-swc/crates/next-core/js/types/globals.d.ts
@@ -8,8 +8,6 @@ declare global {
   var __webpack_public_path__: string | undefined
   var __DEV_MIDDLEWARE_MATCHERS: any[]
 
-  var __next_require__: (id: string) => any
-  var __next_chunk_load__: (id: string) => Promise
   var __next_f: (
     | [isBootStrap: 0]
     | [isNotBootstrap: 1, responsePartial: string]
diff --git a/packages/next-swc/crates/next-core/src/app_source.rs b/packages/next-swc/crates/next-core/src/app_source.rs
@@ -968,10 +968,12 @@ impl AppRenderer {
             formatdoc!(
                 "
                 \"TURBOPACK {{ chunking-type: isolatedParallel; transition: {rsc_transition} }}\";
-                import GlobalErrorMod from \"next/dist/client/components/error-boundary\"
+                import GlobalErrorMod from \"next/dist/client/components/error-boundary\";
                 const {{ GlobalError }} = GlobalErrorMod;
                 \"TURBOPACK {{ chunking-type: isolatedParallel; transition: {rsc_transition} }}\";
-                import base from \"next/dist/server/app-render/entry-base\"\n
+                import base from \"next/dist/server/app-render/entry-base\";
+                \"TURBOPACK {{ chunking-type: isolatedParallel; transition: next-ssr }}\";
+                import baseSsr from \"next/dist/server/app-render/entry-base-ssr\";\n
             "
             )
             .into_bytes(),
@@ -991,7 +993,7 @@ impl AppRenderer {
             result,
             // Need this hack because "export *" from CommonJS will trigger a warning
             // otherwise
-            "__turbopack_export_value__({{ tree, GlobalError, pathname, ...base }});\n"
+            "__turbopack_export_value__({{ tree, GlobalError, pathname, ...base, ...baseSsr }});\n"
         )?;
 
         let file = File::from(result.build());
diff --git a/packages/next-swc/crates/next-core/src/next_import_map.rs b/packages/next-swc/crates/next-core/src/next_import_map.rs
@@ -89,6 +89,14 @@ pub async fn get_next_client_import_map(
             );
         }
         ClientContextType::App { app_dir } => {
+            import_map.insert_exact_alias(
+                "server-only",
+                request_to_import_mapping(app_dir, "next/dist/compiled/server-only"),
+            );
+            import_map.insert_exact_alias(
+                "client-only",
+                request_to_import_mapping(app_dir, "next/dist/compiled/client-only"),
+            );
             import_map.insert_exact_alias(
                 "react",
                 request_to_import_mapping(app_dir, "next/dist/compiled/react"),
@@ -107,7 +115,10 @@ pub async fn get_next_client_import_map(
             );
             import_map.insert_wildcard_alias(
                 "react-server-dom-webpack/",
-                request_to_import_mapping(app_dir, "next/dist/compiled/react-server-dom-webpack/*"),
+                request_to_import_mapping(
+                    app_dir,
+                    "next/dist/compiled/react-server-dom-turbopack/*",
+                ),
             );
             import_map.insert_exact_alias(
                 "next/dynamic",
@@ -234,7 +245,10 @@ pub async fn get_next_server_import_map(
             import_map.insert_wildcard_alias("react-dom/", external);
             import_map.insert_exact_alias("styled-jsx", external);
             import_map.insert_wildcard_alias("styled-jsx/", external);
-            import_map.insert_wildcard_alias("react-server-dom-webpack/", external);
+            import_map.insert_exact_alias(
+                "react-server-dom-webpack/",
+                ImportMapping::External(Some("react-server-dom-turbopack".into())).cell(),
+            );
             // TODO: we should not bundle next/dist/build/utils in the pages renderer at all
             import_map.insert_wildcard_alias("next/dist/build/utils", external);
         }
@@ -465,9 +479,9 @@ async fn insert_next_server_special_aliases(
             );
             import_map.insert_wildcard_alias(
                 "react-server-dom-webpack/",
-                passthrough_external_if_node(
+                request_to_import_mapping(
                     app_dir,
-                    "next/dist/compiled/react-server-dom-webpack/*",
+                    "next/dist/compiled/react-server-dom-turbopack/*",
                 ),
             );
         }
@@ -492,6 +506,14 @@ async fn insert_next_server_special_aliases(
                 // @opentelemetry/api
                 request_to_import_mapping(app_dir, "next/dist/compiled/@opentelemetry/api"),
             );
+            import_map.insert_exact_alias(
+                "server-only",
+                request_to_import_mapping(app_dir, "next/dist/compiled/server-only"),
+            );
+            import_map.insert_exact_alias(
+                "client-only",
+                request_to_import_mapping(app_dir, "next/dist/compiled/client-only"),
+            );
             if matches!(ty, ServerContextType::AppRSC { .. }) {
                 import_map.insert_exact_alias(
                     "react",
@@ -518,7 +540,7 @@ async fn insert_next_server_special_aliases(
                 ("react-dom/", "next/dist/compiled/react-dom/*"),
                 (
                     "react-server-dom-webpack/",
-                    "next/dist/compiled/react-server-dom-webpack/*",
+                    "next/dist/compiled/react-server-dom-turbopack/*",
                 ),
             ] {
                 import_map.insert_wildcard_alias(
@@ -529,12 +551,21 @@ async fn insert_next_server_special_aliases(
         }
         // ## SSR
         //
-        // * always uses externals, to ensure we're using the same React instance as the Next.js
-        //   runtime
+        // * uses externals (except for react-server-dom-turbopack), to ensure we're using the same
+        //   React instance as the Next.js runtime
         // * maps react-dom -> react-dom/server-rendering-stub
-        // * passes through react and (react|react-dom|react-server-dom-webpack)/(.*) to
+        // * maps react-server-dom-webpack -> react-server-dom-turbopack
+        // * passes through react and (react|react-dom|react-server-dom-turbopack)/(.*) to
         //   next/dist/compiled/react and next/dist/compiled/$1/$2 resp.
         (NextMode::Build | NextMode::Development, ServerContextType::AppSSR { app_dir }) => {
+            import_map.insert_exact_alias(
+                "server-only",
+                request_to_import_mapping(app_dir, "next/dist/compiled/server-only"),
+            );
+            import_map.insert_exact_alias(
+                "client-only",
+                request_to_import_mapping(app_dir, "next/dist/compiled/client-only"),
+            );
             import_map.insert_exact_alias(
                 "react",
                 external_if_node(app_dir, "next/dist/compiled/react"),
@@ -547,15 +578,26 @@ async fn insert_next_server_special_aliases(
                 ),
             );
 
+            // The react-server-dom-webpack mappings are intended to be bundled in every
+            // environment. These imports contain references to magic globals
+            // for bundlers that need to be processed by that bundler to work effectively
+            import_map.insert_exact_alias(
+                "react-server-dom-webpack",
+                request_to_import_mapping(app_dir, "next/dist/compiled/react-server-dom-turbopack"),
+            );
+            import_map.insert_wildcard_alias(
+                "react-server-dom-webpack/",
+                request_to_import_mapping(
+                    app_dir,
+                    "next/dist/compiled/react-server-dom-turbopack/*",
+                ),
+            );
+
             for (wildcard_alias, request) in [
                 ("react/", "next/dist/compiled/react/*"),
                 ("react-dom/", "next/dist/compiled/react-dom/*"),
-                (
-                    "react-server-dom-webpack/",
-                    "next/dist/compiled/react-server-dom-webpack/*",
-                ),
             ] {
-                let import_mapping = external_if_node(app_dir, request);
+                let import_mapping: Vc<ImportMapping> = external_if_node(app_dir, request);
                 import_map.insert_wildcard_alias(wildcard_alias, import_mapping);
             }
         }
diff --git a/packages/next-swc/crates/next-core/src/next_manifests/client_reference_manifest.rs b/packages/next-swc/crates/next-core/src/next_manifests/client_reference_manifest.rs
@@ -32,6 +32,8 @@ impl ClientReferenceManifest {
         ssr_chunking_context: Vc<Box<dyn EcmascriptChunkingContext>>,
     ) -> Result<Vc<Box<dyn OutputAsset>>> {
         let mut entry_manifest: ClientReferenceManifest = Default::default();
+        entry_manifest.module_loading.prefix = "/_next/".to_string();
+        entry_manifest.module_loading.cross_origin = None;
         let client_references_chunks = client_references_chunks.await?;
         let client_relative_path = client_relative_path.await?;
         let node_root_ref = node_root.await?;
diff --git a/packages/next-swc/crates/next-core/src/next_manifests/mod.rs b/packages/next-swc/crates/next-core/src/next_manifests/mod.rs
@@ -178,6 +178,7 @@ pub enum ActionManifestWorkerEntry {
 #[derive(Serialize, Default, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct ClientReferenceManifest {
+    pub module_loading: ModuleLoading,
     /// Mapping of module path and export name to client module ID and required
     /// client chunks.
     pub client_modules: ManifestNode,
@@ -192,6 +193,13 @@ pub struct ClientReferenceManifest {
     pub entry_css_files: HashMap<String, Vec<String>>,
 }
 
+#[derive(Serialize, Default, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct ModuleLoading {
+    pub prefix: String,
+    pub cross_origin: Option<String>,
+}
+
 #[derive(Serialize, Default, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct ManifestNode {
diff --git a/packages/next/src/client/app-turbopack.ts b/packages/next/src/client/app-turbopack.ts
@@ -1,13 +0,0 @@
-declare let __turbopack_require__: any
-
-// @ts-expect-error
-process.env.__NEXT_NEW_LINK_BEHAVIOR = true
-
-// eslint-disable-next-line no-undef
-;(self as any).__next_require__ = __turbopack_require__
-
-// @ts-ignore
-// eslint-disable-next-line no-undef
-;(self as any).__next_chunk_load__ = __turbopack_load__
-
-export {}
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/helpers/group-stack-frames-by-framework.ts b/packages/next/src/client/components/react-dev-overlay/internal/helpers/group-stack-frames-by-framework.ts
@@ -14,7 +14,7 @@ function getFramework(
   if (!sourcePackage) return undefined
 
   if (
-    /^(react|react-dom|react-is|react-refresh|react-server-dom-webpack|scheduler)$/.test(
+    /^(react|react-dom|react-is|react-refresh|react-server-dom-webpack|react-server-dom-turbopack|scheduler)$/.test(
       sourcePackage
     )
   ) {
diff --git a/packages/next/src/server/app-render/entry-base-ssr.ts b/packages/next/src/server/app-render/entry-base-ssr.ts
@@ -1,3 +1,4 @@
+'TURBOPACK { transition: next-ssr }'
 // @ts-ignore
 // eslint-disable-next-line import/no-extraneous-dependencies
 export { createFromReadableStream } from 'react-server-dom-webpack/client.edge'
diff --git a/packages/next/src/server/app-render/ssr/index.ts b/packages/next/src/server/app-render/ssr/index.ts
diff --git a/packages/next/src/server/lib/router-utils/setup-dev.ts b/packages/next/src/server/lib/router-utils/setup-dev.ts
@@ -318,10 +318,16 @@ async function startWatcher(opts: SetupOpts) {
             require.resolve(
               'next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js'
             ),
+            require.resolve(
+              'next/dist/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js'
+            ),
             // And this redirecting module as well
             require.resolve(
               'next/dist/compiled/react-server-dom-webpack/client.edge.js'
             ),
+            require.resolve(
+              'next/dist/compiled/react-server-dom-turbopack/client.edge.js'
+            ),
           ])
       )
 
diff --git a/packages/next/src/server/require-hook.ts b/packages/next/src/server/require-hook.ts
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
diff --git a/packages/next/types/misc.d.ts b/packages/next/types/misc.d.ts

Original file line number	Diff line number	Diff line change
`@@ -213,6 +213,7 @@ impl AppProject {`
`213`	`213`	`"next-dynamic".to_string(),`
`214`	`214`	`Vc::upcast(NextDynamicTransition::new(self.client_transition())),`
`215`	`215`	`),`
	`216`	`+ ("next-ssr".to_string(), Vc::upcast(self.ssr_transition())),`
`216`	`217`	`]`
`217`	`218`	`.into_iter()`
`218`	`219`	`.collect();`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`declare module 'next/dist/compiled/react-server-dom-webpack/client'`
	`2`	`+declare module 'next/dist/compiled/react-server-dom-turbopack/client'`