Merge branch 'canary' into patch-6

docs/02-app/02-api-reference/04-functions/generate-metadata.mdx

@@ -46,6 +46,7 @@ export async function generateMetadata({ params }) {
 >
 > - The `metadata` object and `generateMetadata` function exports are **only supported in Server Components**.
 > - You cannot export both the `metadata` object and `generateMetadata` function from the same route segment.
+> - On the initial load, streaming is blocked until `generateMetadata` has fully resolved, including any content from `loading.js`.
 
 ## The `metadata` object
 

docs/02-app/02-api-reference/08-legacy-apis/unstable_cache.mdx

@@ -1,10 +1,10 @@
 ---
 title: unstable_cache
 description: API Reference for the unstable_cache function.
-version: unstable
+version: legacy
 ---
 
-> This API will be deprecated in future versions. In version 15 we recommend using the [`use cache`](app/api-reference/directives/use-cache) directive instead.
+In version 15, we recommend using the [`use cache`](/docs/app/api-reference/directives/use-cache) directive instead.
 
 `unstable_cache` allows you to cache the results of expensive operations, like database queries, and reuse them across multiple requests.
 

docs/02-app/02-api-reference/08-legacy-apis/unstable_noStore.mdx

@@ -1,10 +1,10 @@
 ---
 title: unstable_noStore
 description: API Reference for the unstable_noStore function.
-version: unstable
+version: legacy
 ---
 
-> This API will be deprecated in the future. In version 15, we recommend using [`connection`](/docs/app/api-reference/functions/connection) instead of `unstable_noStore`.
+In version 15, we recommend using [`connection`](/docs/app/api-reference/functions/connection) instead of `unstable_noStore`.
 
 `unstable_noStore` can be used to declaratively opt out of static rendering and indicate a particular component should not be cached.
 

examples/reproduction-template/package.json

@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "next": "canary",
-    "react": "19.0.0-rc-1631855f-20241023",
-    "react-dom": "19.0.0-rc-1631855f-20241023"
+    "react": "19.0.0-rc-02c0e824-20241028",
+    "react-dom": "19.0.0-rc-02c0e824-20241028"
   },
   "devDependencies": {
     "@types/node": "20.12.12",

package.json

@@ -209,19 +209,19 @@
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
-    "react": "19.0.0-rc-1631855f-20241023",
+    "react": "19.0.0-rc-02c0e824-20241028",
     "react-17": "npm:[email protected]",
-    "react-builtin": "npm:[email protected]1631855f-20241023",
-    "react-dom": "19.0.0-rc-1631855f-20241023",
+    "react-builtin": "npm:[email protected]02c0e824-20241028",
+    "react-dom": "19.0.0-rc-02c0e824-20241028",
     "react-dom-17": "npm:[email protected]",
-    "react-dom-builtin": "npm:[email protected]1631855f-20241023",
-    "react-dom-experimental-builtin": "npm:[email protected]1631855f-20241023",
-    "react-experimental-builtin": "npm:[email protected]1631855f-20241023",
-    "react-is-builtin": "npm:[email protected]1631855f-20241023",
-    "react-server-dom-turbopack": "19.0.0-rc-1631855f-20241023",
-    "react-server-dom-turbopack-experimental": "npm:[email protected]1631855f-20241023",
-    "react-server-dom-webpack": "19.0.0-rc-1631855f-20241023",
-    "react-server-dom-webpack-experimental": "npm:[email protected]1631855f-20241023",
+    "react-dom-builtin": "npm:[email protected]02c0e824-20241028",
+    "react-dom-experimental-builtin": "npm:[email protected]02c0e824-20241028",
+    "react-experimental-builtin": "npm:[email protected]02c0e824-20241028",
+    "react-is-builtin": "npm:[email protected]02c0e824-20241028",
+    "react-server-dom-turbopack": "19.0.0-rc-02c0e824-20241028",
+    "react-server-dom-turbopack-experimental": "npm:[email protected]02c0e824-20241028",
+    "react-server-dom-webpack": "19.0.0-rc-02c0e824-20241028",
+    "react-server-dom-webpack-experimental": "npm:[email protected]02c0e824-20241028",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -231,8 +231,8 @@
     "resolve-from": "5.0.0",
     "sass": "1.54.0",
     "satori": "0.10.9",
-    "scheduler-builtin": "npm:[email protected]1631855f-20241023",
-    "scheduler-experimental-builtin": "npm:[email protected]1631855f-20241023",
+    "scheduler-builtin": "npm:[email protected]02c0e824-20241028",
+    "scheduler-experimental-builtin": "npm:[email protected]02c0e824-20241028",
     "seedrandom": "3.0.5",
     "semver": "7.3.7",
     "shell-quote": "1.7.3",
@@ -272,10 +272,10 @@
       "@babel/traverse": "7.22.5",
       "@types/react": "npm:[email protected]",
       "@types/react-dom": "npm:[email protected]",
-      "react": "19.0.0-rc-1631855f-20241023",
-      "react-dom": "19.0.0-rc-1631855f-20241023",
-      "react-is": "19.0.0-rc-1631855f-20241023",
-      "scheduler": "0.25.0-rc-1631855f-20241023"
+      "react": "19.0.0-rc-02c0e824-20241028",
+      "react-dom": "19.0.0-rc-02c0e824-20241028",
+      "react-is": "19.0.0-rc-02c0e824-20241028",
+      "scheduler": "0.25.0-rc-02c0e824-20241028"
     },
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]"

packages/create-next-app/templates/index.ts

@@ -13,7 +13,7 @@ import { GetTemplateFileArgs, InstallTemplateArgs } from "./types";
 
 // Do not rename or format. sync-react script relies on this line.
 // prettier-ignore
-const nextjsReactPeerVersion = "19.0.0-rc-1631855f-20241023";
+const nextjsReactPeerVersion = "19.0.0-rc-02c0e824-20241028";
 
 /**
  * Get the file path for a given file in a template, e.g. "next.config.js".

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-api-11.output.tsx

@@ -1,10 +1,10 @@
 import { headers, type UnsafeUnwrappedHeaders } from 'next/headers';
 
 export function MyComp() {
-  (headers() as unknown as UnsafeUnwrappedHeaders)
+  void (headers() as unknown as UnsafeUnwrappedHeaders)
 }
 
 export function generateContentfulMetadata() {
-  (headers() as unknown as UnsafeUnwrappedHeaders)
+  void (headers() as unknown as UnsafeUnwrappedHeaders)
 }
 

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-api-19.output.tsx

@@ -8,6 +8,6 @@ export function myFun() {
 
 export function myFun2() {
   return function () {
-    (headers() as unknown as UnsafeUnwrappedHeaders)
+    void (headers() as unknown as UnsafeUnwrappedHeaders)
   };
 }

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-api-25.input.tsx

@@ -0,0 +1,6 @@
+import { cookies } from 'next/headers'
+
+export function myFunc() {
+  const c = cookies()
+  cookies()
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-apis/async-api-25.output.tsx

@@ -0,0 +1,6 @@
+import { cookies, type UnsafeUnwrappedCookies } from 'next/headers';
+
+export function myFunc() {
+  const c = (cookies() as unknown as UnsafeUnwrappedCookies)
+  void (cookies() as unknown as UnsafeUnwrappedCookies)
+}

packages/next-codemod/transforms/lib/async-request-api/next-async-dynamic-api.ts

@@ -338,7 +338,26 @@ function castTypesOrAddComment(
     )
     // Replace the original expression with the new cast expression,
     // also wrap () around the new cast expression.
-    j(path).replaceWith(j.parenthesizedExpression(newCastExpression))
+    const parent = path.parent.value
+    const wrappedExpression = j.parenthesizedExpression(newCastExpression)
+    path.replace(wrappedExpression)
+
+    // If the wrapped expression `(<expression>)` is the beginning of an expression statement,
+    // add a void operator to separate the statement, to avoid syntax error that being treated as part of previous statement.
+    // example:
+    // input:
+    // <expression>
+    // <expression>
+    // output:
+    // (<expression> as ...)
+    // void (<expression> as ...)
+    if (
+      j.ExpressionStatement.check(parent) &&
+      parent.expression === path.node
+    ) {
+      // append a semicolon to the start of the expression statement
+      parent.expression = j.unaryExpression('void', parent.expression)
+    }
     modified = true
 
     // If cast types are not imported, add them to the import list

packages/next/package.json

@@ -107,8 +107,8 @@
     "@opentelemetry/api": "^1.1.0",
     "@playwright/test": "^1.41.2",
     "babel-plugin-react-compiler": "*",
-    "react": "^18.2.0 || 19.0.0-rc-1631855f-20241023",
-    "react-dom": "^18.2.0 || 19.0.0-rc-1631855f-20241023",
+    "react": "^18.2.0 || 19.0.0-rc-02c0e824-20241028",
+    "react-dom": "^18.2.0 || 19.0.0-rc-02c0e824-20241028",
     "sass": "^1.3.0"
   },
   "peerDependenciesMeta": {

packages/next/src/build/output/log.ts

@@ -31,12 +31,21 @@ function prefixedLog(prefixType: keyof typeof prefixes, ...message: any[]) {
   if (message.length === 0) {
     console[consoleMethod]('')
   } else {
-    console[consoleMethod](' ' + prefix, ...message)
+    // Ensure if there's ANSI escape codes it's concatenated into one string.
+    // Chrome DevTool can only handle color if it's in one string.
+    if (message.length === 1 && typeof message[0] === 'string') {
+      console[consoleMethod](' ' + prefix + ' ' + message[0])
+    } else {
+      console[consoleMethod](' ' + prefix, ...message)
+    }
   }
 }
 
-export function bootstrap(...message: any[]) {
-  console.log(' ', ...message)
+export function bootstrap(...message: string[]) {
+  // logging format: ' <prefix> <message>'
+  // e.g. ' ✓ Compiled successfully'
+  // Add spaces to align with the indent of other logs
+  console.log('   ' + message.join(' '))
 }
 
 export function wait(...message: any[]) {

packages/next/src/build/webpack/config/blocks/base.ts

@@ -2,6 +2,19 @@ import curry from 'next/dist/compiled/lodash.curry'
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
 import { COMPILER_NAMES } from '../../../../shared/lib/constants'
 import type { ConfigurationContext } from '../utils'
+import DevToolsIgnorePlugin from '../../plugins/devtools-ignore-list-plugin'
+import EvalSourceMapDevToolPlugin from '../../plugins/eval-source-map-dev-tool-plugin'
+
+function shouldIgnorePath(modulePath: string): boolean {
+  // TODO: How to ignore list 'webpack:///../../../src/shared/lib/is-thenable.ts'
+  return (
+    modulePath.includes('node_modules') ||
+    // would filter 'webpack://_N_E/./app/page.tsx'
+    // modulePath.startsWith('webpack://_N_E/') ||
+    // e.g. 'webpack:///external commonjs "next/dist/compiled/next-server/app-page.runtime.dev.js"'
+    modulePath.includes('next/dist')
+  )
+}
 
 export const base = curry(function base(
   ctx: ConfigurationContext,
@@ -29,7 +42,14 @@ export const base = curry(function base(
       // original source, including columns and original variable names.
       // This is desirable so the in-browser debugger can correctly pause
       // and show scoped variables with their original names.
-      config.devtool = 'eval-source-map'
+      // We're using a fork of `eval-source-map`
+      config.devtool = false
+      config.plugins ??= []
+      config.plugins.push(
+        new EvalSourceMapDevToolPlugin({
+          shouldIgnorePath,
+        })
+      )
     }
   } else {
     if (
@@ -39,6 +59,14 @@ export const base = curry(function base(
       (ctx.productionBrowserSourceMaps && ctx.isClient)
     ) {
       config.devtool = 'source-map'
+      config.plugins ??= []
+      config.plugins.push(
+        new DevToolsIgnorePlugin({
+          // TODO: eval-source-map has different module paths than source-map.
+          // We're currently not actually ignore listing anything.
+          shouldIgnorePath,
+        })
+      )
     } else {
       config.devtool = false
     }

packages/next/src/build/webpack/plugins/devtools-ignore-list-plugin.ts

@@ -0,0 +1,93 @@
+// Source: https://github.com/mondaychen/devtools-ignore-webpack-plugin/blob/e35ce41d9606a92a455ef247f509a1c2ccab5778/src/index.ts
+
+import { webpack } from 'next/dist/compiled/webpack/webpack'
+
+// Following the naming conventions from
+// https://tc39.es/source-map/#source-map-format
+const IGNORE_LIST = 'ignoreList'
+
+const PLUGIN_NAME = 'devtools-ignore-plugin'
+
+interface SourceMap {
+  sources: string[]
+  [IGNORE_LIST]: number[]
+}
+
+interface PluginOptions {
+  shouldIgnorePath?: (path: string) => boolean
+  isSourceMapAsset?: (name: string) => boolean
+}
+
+interface ValidatedOptions extends PluginOptions {
+  shouldIgnorePath: Required<PluginOptions>['shouldIgnorePath']
+  isSourceMapAsset: Required<PluginOptions>['isSourceMapAsset']
+}
+
+function defaultShouldIgnorePath(path: string): boolean {
+  return path.includes('/node_modules/') || path.includes('/webpack/')
+}
+
+function defaultIsSourceMapAsset(name: string): boolean {
+  return name.endsWith('.map')
+}
+
+/**
+ * This plugin adds a field to source maps that identifies which sources are
+ * vendored or runtime-injected (aka third-party) sources. These are consumed by
+ * Chrome DevTools to automatically ignore-list sources.
+ */
+export default class DevToolsIgnorePlugin {
+  options: ValidatedOptions
+
+  constructor(options: PluginOptions = {}) {
+    this.options = {
+      shouldIgnorePath: options.shouldIgnorePath ?? defaultShouldIgnorePath,
+      isSourceMapAsset: options.isSourceMapAsset ?? defaultIsSourceMapAsset,
+    }
+  }
+
+  apply(compiler: webpack.Compiler) {
+    const { RawSource } = compiler.webpack.sources
+
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
+          additionalAssets: true,
+        },
+        (assets) => {
+          for (const [name, asset] of Object.entries(assets)) {
+            // Instead of using `asset.map()` to fetch the source maps from
+            // SourceMapSource assets, process them directly as a RawSource.
+            // This is because `.map()` is slow and can take several seconds.
+            if (!this.options.isSourceMapAsset(name)) {
+              // Ignore non source map files.
+              continue
+            }
+
+            const mapContent = asset.source().toString()
+            if (!mapContent) {
+              continue
+            }
+
+            const sourcemap = JSON.parse(mapContent) as SourceMap
+
+            const ignoreList = []
+            for (const [index, path] of sourcemap.sources.entries()) {
+              if (this.options.shouldIgnorePath(path)) {
+                ignoreList.push(index)
+              }
+            }
+
+            sourcemap[IGNORE_LIST] = ignoreList
+            compilation.updateAsset(
+              name,
+              new RawSource(JSON.stringify(sourcemap))
+            )
+          }
+        }
+      )
+    })
+  }
+}