Merge branch 'canary' into update-with-react-hook-form-example

lint-staged.config.js

@@ -30,7 +30,12 @@ module.exports = {
 
     return [
       `prettier --with-node-modules --ignore-path .prettierignore --write ${escapedFileNames}`,
-      `eslint --no-ignore --max-warnings=0 --fix ${escape(eslintFileNames.filter((filename) => filename !== null)).join(' ')}`,
+      `eslint --no-ignore --max-warnings=0 --fix ${eslintFileNames
+        .filter((filename) => filename !== null)
+        .map((filename) => {
+          return `"${filename}"`
+        })
+        .join(' ')}`,
       `git add ${escapedFileNames}`,
     ]
   },

packages/next/src/build/entries.ts

@@ -812,11 +812,14 @@ export function finalizeEntrypoint({
       }
     }
     case COMPILER_NAMES.edgeServer: {
+      const layer = isApi
+        ? WEBPACK_LAYERS.api
+        : isMiddlewareFilename(name) || isInstrumentation
+          ? WEBPACK_LAYERS.middleware
+          : undefined
+
       return {
-        layer:
-          isMiddlewareFilename(name) || isApi || isInstrumentation
-            ? WEBPACK_LAYERS.middleware
-            : undefined,
+        layer,
         library: { name: ['_ENTRIES', `middleware_[name]`], type: 'assign' },
         runtime: EDGE_RUNTIME_WEBPACK,
         asyncChunks: false,

packages/next/src/build/handle-externals.ts

@@ -10,7 +10,7 @@ import {
   NODE_ESM_RESOLVE_OPTIONS,
   NODE_RESOLVE_OPTIONS,
 } from './webpack-config'
-import { isWebpackAppLayer, isWebpackServerOnlyLayer } from './utils'
+import { isWebpackBundledLayer, isWebpackServerOnlyLayer } from './utils'
 import { normalizePathSep } from '../shared/lib/page-path/normalize-path-sep'
 const reactPackagesRegex = /^(react|react-dom|react-server-dom-webpack)($|\/)/
 
@@ -174,7 +174,7 @@ export function makeExternalHandler({
       return `commonjs next/dist/lib/import-next-warning`
     }
 
-    const isAppLayer = isWebpackAppLayer(layer)
+    const isAppLayer = isWebpackBundledLayer(layer)
 
     // Relative requires don't need custom resolution, because they
     // are relative to requests we've already resolved here.

packages/next/src/build/utils.ts

@@ -1389,7 +1389,7 @@ export async function buildAppStaticPaths({
       renderOpts: {
         originalPathname: page,
         incrementalCache,
-        supportsDynamicHTML: true,
+        supportsDynamicResponse: true,
         isRevalidate: false,
         experimental: {
           after: false,
@@ -2256,6 +2256,15 @@ export function getSupportedBrowsers(
   return MODERN_BROWSERSLIST_TARGET
 }
 
+// Use next/dist/compiled/react packages instead of installed react
+export function isWebpackBuiltinReactLayer(
+  layer: WebpackLayerName | null | undefined
+): boolean {
+  return Boolean(
+    layer && WEBPACK_LAYERS.GROUP.builtinReact.includes(layer as any)
+  )
+}
+
 export function isWebpackServerOnlyLayer(
   layer: WebpackLayerName | null | undefined
 ): boolean {
@@ -2278,8 +2287,8 @@ export function isWebpackDefaultLayer(
   return layer === null || layer === undefined
 }
 
-export function isWebpackAppLayer(
+export function isWebpackBundledLayer(
   layer: WebpackLayerName | null | undefined
 ): boolean {
-  return Boolean(layer && WEBPACK_LAYERS.GROUP.app.includes(layer as any))
+  return Boolean(layer && WEBPACK_LAYERS.GROUP.bundled.includes(layer as any))
 }

packages/next/src/build/webpack-config.ts

@@ -9,7 +9,8 @@ import { escapeStringRegexp } from '../shared/lib/escape-regexp'
 import { WEBPACK_LAYERS, WEBPACK_RESOURCE_QUERIES } from '../lib/constants'
 import type { WebpackLayerName } from '../lib/constants'
 import {
-  isWebpackAppLayer,
+  isWebpackBuiltinReactLayer,
+  isWebpackBundledLayer,
   isWebpackClientOnlyLayer,
   isWebpackDefaultLayer,
   isWebpackServerOnlyLayer,
@@ -409,8 +410,7 @@ export default async function getBaseWebpackConfig(
     loggedIgnoredCompilerOptions = true
   }
 
-  const shouldIncludeExternalDirs =
-    config.experimental.externalDir || !!config.transpilePackages
+  const shouldIncludeExternalDirs = config.experimental.externalDir
   const codeCondition = {
     test: { or: [/\.(tsx|ts|js|cjs|mjs|jsx)$/, /__barrel_optimize__/] },
     ...(shouldIncludeExternalDirs
@@ -543,7 +543,7 @@ export default async function getBaseWebpackConfig(
     // This will cause some performance overhead but
     // acceptable as Babel will not be recommended.
     getSwcLoader({
-      serverComponents: false,
+      serverComponents: true,
       bundleLayer: WEBPACK_LAYERS.middleware,
     }),
     babelLoader,
@@ -592,13 +592,12 @@ export default async function getBaseWebpackConfig(
   // Loader for API routes needs to be differently configured as it shouldn't
   // have RSC transpiler enabled, so syntax checks such as invalid imports won't
   // be performed.
-  const apiRoutesLayerLoaders =
-    hasAppDir && useSWCLoader
-      ? getSwcLoader({
-          serverComponents: false,
-          bundleLayer: WEBPACK_LAYERS.api,
-        })
-      : defaultLoaders.babel
+  const apiRoutesLayerLoaders = useSWCLoader
+    ? getSwcLoader({
+        serverComponents: false,
+        bundleLayer: WEBPACK_LAYERS.api,
+      })
+    : defaultLoaders.babel
 
   const pageExtensions = config.pageExtensions
 
@@ -1304,7 +1303,7 @@ export default async function getBaseWebpackConfig(
                 test: /next[\\/]dist[\\/](esm[\\/])?server[\\/]future[\\/]route-modules[\\/]app-page[\\/]module/,
               },
               {
-                issuerLayer: isWebpackAppLayer,
+                issuerLayer: isWebpackBundledLayer,
                 resolve: {
                   alias: createNextApiEsmAliases(),
                 },
@@ -1326,7 +1325,7 @@ export default async function getBaseWebpackConfig(
         ...(hasAppDir && !isClient
           ? [
               {
-                issuerLayer: isWebpackServerOnlyLayer,
+                issuerLayer: isWebpackBuiltinReactLayer,
                 test: {
                   // Resolve it if it is a source code file, and it has NOT been
                   // opted out of bundling.
@@ -1388,7 +1387,7 @@ export default async function getBaseWebpackConfig(
                 // Alias react for switching between default set and share subset.
                 oneOf: [
                   {
-                    issuerLayer: isWebpackServerOnlyLayer,
+                    issuerLayer: isWebpackBuiltinReactLayer,
                     test: {
                       // Resolve it if it is a source code file, and it has NOT been
                       // opted out of bundling.
@@ -1469,11 +1468,17 @@ export default async function getBaseWebpackConfig(
               test: codeCondition.test,
               issuerLayer: WEBPACK_LAYERS.middleware,
               use: middlewareLayerLoaders,
+              resolve: {
+                conditionNames: reactServerCondition,
+              },
             },
             {
               test: codeCondition.test,
               issuerLayer: WEBPACK_LAYERS.instrument,
               use: instrumentLayerLoaders,
+              resolve: {
+                conditionNames: reactServerCondition,
+              },
             },
             ...(hasAppDir
               ? [

packages/next/src/build/webpack/loaders/next-edge-ssr-loader/render.ts

@@ -93,7 +93,7 @@ export function getRender({
       extendRenderOpts: {
         buildId,
         runtime: SERVER_RUNTIME.experimentalEdge,
-        supportsDynamicHTML: true,
+        supportsDynamicResponse: true,
         disableOptimizedLoading: true,
         serverActionsManifest,
         serverActions,

packages/next/src/build/webpack/plugins/middleware-plugin.ts

@@ -28,7 +28,10 @@ import type { Telemetry } from '../../../telemetry/storage'
 import { traceGlobals } from '../../../trace/shared'
 import { EVENT_BUILD_FEATURE_USAGE } from '../../../telemetry/events'
 import { normalizeAppPath } from '../../../shared/lib/router/utils/app-paths'
-import { INSTRUMENTATION_HOOK_FILENAME } from '../../../lib/constants'
+import {
+  INSTRUMENTATION_HOOK_FILENAME,
+  WEBPACK_LAYERS,
+} from '../../../lib/constants'
 import type { CustomRoutes } from '../../../lib/load-custom-routes'
 import { isInterceptionRouteRewrite } from '../../../lib/generate-interception-routes-rewrites'
 import { getDynamicCodeEvaluationError } from './wellknown-errors-plugin/parse-dynamic-code-evaluation-error'
@@ -272,7 +275,8 @@ function buildWebpackError({
 }
 
 function isInMiddlewareLayer(parser: webpack.javascript.JavascriptParser) {
-  return parser.state.module?.layer === 'middleware'
+  const layer = parser.state.module?.layer
+  return layer === WEBPACK_LAYERS.middleware || layer === WEBPACK_LAYERS.api
 }
 
 function isNodeJsModule(moduleName: string) {
@@ -849,7 +853,8 @@ export async function handleWebpackExternalForEdgeRuntime({
   getResolve: () => any
 }) {
   if (
-    contextInfo.issuerLayer === 'middleware' &&
+    (contextInfo.issuerLayer === WEBPACK_LAYERS.middleware ||
+      contextInfo.issuerLayer === WEBPACK_LAYERS.api) &&
     isNodeJsModule(request) &&
     !supportedEdgePolyfills.has(request)
   ) {

packages/next/src/client/components/react-dev-overlay/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx

@@ -1,15 +1,18 @@
-import React from 'react'
 import type { VersionInfo } from '../../../../../../server/dev/parse-version-info'
 
-export function VersionStalenessInfo(props: VersionInfo) {
-  if (!props) return null
-  const { staleness } = props
-  let { text, indicatorClass, title } = getStaleness(props)
+export function VersionStalenessInfo({
+  versionInfo,
+}: {
+  versionInfo: VersionInfo | undefined
+}) {
+  if (!versionInfo) return null
+  const { staleness } = versionInfo
+  let { text, indicatorClass, title } = getStaleness(versionInfo)
 
   if (!text) return null
 
   return (
-    <small className="nextjs-container-build-error-version-status">
+    <span className="nextjs-container-build-error-version-status">
       <span className={indicatorClass} />
       <small data-nextjs-version-checker title={title}>
         {text}
@@ -26,7 +29,7 @@ export function VersionStalenessInfo(props: VersionInfo) {
         </a>
       )}
       {process.env.TURBOPACK ? ' (turbo)' : ''}
-    </small>
+    </span>
   )
 }
 

packages/next/src/client/components/react-dev-overlay/internal/components/VersionStalenessInfo/styles.ts

@@ -6,7 +6,6 @@ const styles = css`
     text-align: right;
   }
   .nextjs-container-build-error-version-status small {
-    margin-left: var(--size-gap);
     font-size: var(--size-font-small);
   }
   .nextjs-container-build-error-version-status a {

packages/next/src/client/components/react-dev-overlay/internal/container/BuildError.tsx

@@ -29,13 +29,13 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
         <DialogContent>
           <DialogHeader className="nextjs-container-errors-header">
             <h1 id="nextjs__container_errors_label">{'Build Error'}</h1>
+            <VersionStalenessInfo versionInfo={versionInfo} />
             <p
               id="nextjs__container_errors_desc"
               className="nextjs__container_errors_desc"
             >
               Failed to compile
             </p>
-            {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
           </DialogHeader>
           <DialogBody className="nextjs-container-errors-body">
             <Terminal content={message} />

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx

@@ -265,7 +265,7 @@ export function Errors({
                 {' error'}
                 {readyErrors.length < 2 ? '' : 's'}
               </small>
-              {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
+              <VersionStalenessInfo versionInfo={versionInfo} />
             </LeftRightDialogHeader>
             <h1 id="nextjs__container_errors_label">
               {isServerError ? 'Server Error' : 'Unhandled Runtime Error'}
@@ -323,6 +323,9 @@ export function Errors({
 }
 
 export const styles = css`
+  .nextjs-container-errors-header {
+    position: relative;
+  }
   .nextjs-container-errors-header > h1 {
     font-size: var(--size-font-big);
     line-height: var(--size-font-bigger);
@@ -406,4 +409,10 @@ export const styles = css`
   .nextjs-toast-errors-hide-button:hover {
     opacity: 1;
   }
+  .nextjs-container-errors-header
+    > .nextjs-container-build-error-version-status {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
 `

packages/next/src/client/components/react-dev-overlay/internal/container/root-layout-missing-tags-error.tsx

@@ -23,10 +23,10 @@ export const RootLayoutMissingTagsError: React.FC<RootLayoutMissingTagsErrorProp
         >
           <DialogContent>
             <DialogHeader className="nextjs-container-errors-header">
+              <VersionStalenessInfo versionInfo={versionInfo} />
               <h3 id="nextjs__container_errors_label">
                 Missing required html tags
               </h3>
-              {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
               <p
                 id="nextjs__container_errors_desc"
                 className="nextjs__container_errors_desc"

packages/next/src/export/index.ts

@@ -398,7 +398,7 @@ export async function exportAppImpl(
     domainLocales: i18n?.domains,
     disableOptimizedLoading: nextConfig.experimental.disableOptimizedLoading,
     // Exported pages do not currently support dynamic HTML.
-    supportsDynamicHTML: false,
+    supportsDynamicResponse: false,
     crossOrigin: nextConfig.crossOrigin,
     optimizeCss: nextConfig.experimental.optimizeCss,
     nextConfigOutput: nextConfig.output,

packages/next/src/export/routes/app-route.ts

@@ -75,7 +75,7 @@ export async function exportAppRoute(
       experimental: experimental,
       originalPathname: page,
       nextExport: true,
-      supportsDynamicHTML: false,
+      supportsDynamicResponse: false,
       incrementalCache,
       waitUntil: undefined,
       onClose: undefined,

packages/next/src/export/worker.ts

@@ -269,7 +269,7 @@ async function exportPageImpl(
       disableOptimizedLoading,
       fontManifest: optimizeFonts ? requireFontManifest(distDir) : undefined,
       locale,
-      supportsDynamicHTML: false,
+      supportsDynamicResponse: false,
       originalPathname: page,
       experimental: {
         ...input.renderOpts.experimental,

packages/next/src/lib/constants.ts

@@ -159,6 +159,11 @@ export type WebpackLayerName =
 const WEBPACK_LAYERS = {
   ...WEBPACK_LAYERS_NAMES,
   GROUP: {
+    builtinReact: [
+      WEBPACK_LAYERS_NAMES.reactServerComponents,
+      WEBPACK_LAYERS_NAMES.actionBrowser,
+      WEBPACK_LAYERS_NAMES.appMetadataRoute,
+    ],
     serverOnly: [
       WEBPACK_LAYERS_NAMES.reactServerComponents,
       WEBPACK_LAYERS_NAMES.actionBrowser,
@@ -174,7 +179,7 @@ const WEBPACK_LAYERS = {
       WEBPACK_LAYERS_NAMES.serverSideRendering,
       WEBPACK_LAYERS_NAMES.appPagesBrowser,
     ],
-    app: [
+    bundled: [
       WEBPACK_LAYERS_NAMES.reactServerComponents,
       WEBPACK_LAYERS_NAMES.actionBrowser,
       WEBPACK_LAYERS_NAMES.appMetadataRoute,

packages/next/src/server/app-render/app-render.tsx

@@ -643,7 +643,7 @@ async function renderToHTMLOrFlightImpl(
     ComponentMod,
     dev,
     nextFontManifest,
-    supportsDynamicHTML,
+    supportsDynamicResponse,
     serverActions,
     appDirDevErrorLogger,
     assetPrefix = '',
@@ -781,7 +781,7 @@ async function renderToHTMLOrFlightImpl(
    * These rules help ensure that other existing features like request caching,
    * coalescing, and ISR continue working as intended.
    */
-  const generateStaticHTML = supportsDynamicHTML !== true
+  const generateStaticHTML = supportsDynamicResponse !== true
 
   // Pull out the hooks/references from the component.
   const { tree: loaderTree, taintObjectReference } = ComponentMod

packages/next/src/server/app-render/types.ts

@@ -129,7 +129,7 @@ export interface RenderOptsPartial {
   basePath: string
   trailingSlash: boolean
   clientReferenceManifest?: DeepReadonly<ClientReferenceManifest>
-  supportsDynamicHTML: boolean
+  supportsDynamicResponse: boolean
   runtime?: ServerRuntime
   serverComponents?: boolean
   enableTainting?: boolean