Merge branch 'canary' into wyattjoh/pages-handle-module

docs/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx

@@ -112,7 +112,7 @@ export default function DashboardLayout({
 > - Layouts are [Server Components](/docs/getting-started/react-essentials) by default but can be set to a [Client Component](/docs/getting-started/react-essentials#client-components).
 > - Layouts can fetch data. View the [Data Fetching](/docs/app/building-your-application/data-fetching) section for more information.
 > - Passing data between a parent layout and its children is not possible. However, you can fetch the same data in a route more than once, and React will [automatically dedupe the requests](/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping) without affecting performance.
-> - Layouts do not have access to the current route segment(s). To access route segments, you can use [`useSelectedLayoutSegment`](docs/app/api-reference/functions/use-selected-layout-segment) or [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) in a Client Component.
+> - Layouts do not have access to the current route segment(s). To access route segments, you can use [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment) or [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) in a Client Component.
 > - `.js`, `.jsx`, or `.tsx` file extensions can be used for Layouts.
 > - A `layout.js` and `page.js` file can be defined in the same folder. The layout will wrap the page.
 

package.json

@@ -88,7 +88,7 @@
     "@types/html-validator": "5.0.3",
     "@types/http-proxy": "1.17.3",
     "@types/jest": "24.0.13",
-    "@types/node": "14.14.31",
+    "@types/node": "20.2.5",
     "@types/node-fetch": "2.6.1",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
@@ -224,7 +224,7 @@
     "semver": "7.3.7",
     "shell-quote": "1.7.3",
     "strip-ansi": "6.0.0",
-    "styled-components": "6.0.0-beta.5",
+    "styled-components": "6.0.0-rc.3",
     "styled-jsx": "5.1.1",
     "styled-jsx-plugin-postcss": "3.0.2",
     "swr": "^2.0.0",

packages/create-next-app/package.json

@@ -33,9 +33,9 @@
     "@types/ci-info": "2.0.0",
     "@types/cross-spawn": "6.0.0",
     "@types/glob": "7.1.1",
-    "@types/node": "^16.8.0",
+    "@types/node": "^20.2.5",
     "@types/prompts": "2.0.1",
-    "@types/tar": "4.0.3",
+    "@types/tar": "6.1.5",
     "@types/validate-npm-package-name": "3.0.0",
     "@vercel/ncc": "0.34.0",
     "async-retry": "1.3.1",
@@ -49,7 +49,7 @@
     "got": "10.7.0",
     "prettier-plugin-tailwindcss": "0.2.4",
     "prompts": "2.1.0",
-    "tar": "4.4.10",
+    "tar": "6.1.15",
     "update-check": "1.5.4",
     "validate-npm-package-name": "3.0.0"
   },

packages/next-swc/crates/next-core/js/src/entry/edge-bootstrap.ts

@@ -1,8 +1,7 @@
-import { adapter, enhanceGlobals } from 'next/dist/server/web/adapter'
+import 'next/dist/server/web/globals'
+import { adapter } from 'next/dist/server/web/adapter'
 import { NAME, PAGE } from 'BOOTSTRAP_CONFIG'
 
-enhanceGlobals()
-
 var mod = require('ENTRY')
 var handler = mod.middleware || mod.default
 

packages/next/package.json

@@ -181,7 +181,7 @@
     "@types/semver": "7.3.1",
     "@types/send": "0.14.4",
     "@types/shell-quote": "1.7.1",
-    "@types/tar": "4.0.3",
+    "@types/tar": "6.1.5",
     "@types/text-table": "0.2.1",
     "@types/ua-parser-js": "0.7.36",
     "@types/uuid": "8.3.1",
@@ -291,7 +291,7 @@
     "string-hash": "1.1.3",
     "string_decoder": "1.3.0",
     "strip-ansi": "6.0.0",
-    "tar": "6.1.11",
+    "tar": "6.1.15",
     "taskr": "1.1.0",
     "terser": "5.14.1",
     "text-table": "0.2.0",

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

@@ -5,6 +5,7 @@ import crypto from 'crypto'
 import { webpack } from 'next/dist/compiled/webpack/webpack'
 import path from 'path'
 import semver from 'next/dist/compiled/semver'
+
 import { escapeStringRegexp } from '../shared/lib/escape-regexp'
 import {
   DOT_NEXT_ALIAS,
@@ -98,15 +99,23 @@ const reactPackagesRegex = /^(react|react-dom|react-server-dom-webpack)($|\/)/
 const asyncStoragesRegex =
   /next[\\/]dist[\\/]client[\\/]components[\\/](static-generation-async-storage|action-async-storage|request-async-storage)/
 
+// exports.<conditionName>
+const edgeConditionNames = [
+  'edge-light',
+  'worker',
+  // inherits the default conditions
+  '...',
+]
+
+// packageJson.<mainField>
 const mainFieldsPerCompiler: Record<CompilerNameValues, string[]> = {
   [COMPILER_NAMES.server]: ['main', 'module'],
   [COMPILER_NAMES.client]: ['browser', 'module', 'main'],
   [COMPILER_NAMES.edgeServer]: [
     'edge-light',
     'worker',
-    'browser',
-    'module',
-    'main',
+    // inherits the default conditions
+    '...',
   ],
 }
 
@@ -915,12 +924,9 @@ export default async function getBaseWebpackConfig(
 
   const reactServerCondition = [
     'react-server',
-    ...mainFieldsPerCompiler[
-      isEdgeServer ? COMPILER_NAMES.edgeServer : COMPILER_NAMES.server
-    ],
-    'node',
-    'import',
-    'require',
+    ...(isEdgeServer ? edgeConditionNames : []),
+    // inherits the default conditions
+    '...',
   ]
 
   const clientEntries = isClient
@@ -1166,11 +1172,7 @@ export default async function getBaseWebpackConfig(
       : undefined),
     mainFields: mainFieldsPerCompiler[compilerType],
     ...(isEdgeServer && {
-      conditionNames: [
-        ...mainFieldsPerCompiler[COMPILER_NAMES.edgeServer],
-        'import',
-        'node',
-      ],
+      conditionNames: edgeConditionNames,
     }),
     plugins: [],
   }

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

@@ -30,13 +30,11 @@ const nextEdgeFunctionLoader: webpack.LoaderDefinitionFunction<EdgeFunctionLoade
     buildInfo.rootDir = rootDir
 
     return `
-        import { adapter, enhanceGlobals } from 'next/dist/esm/server/web/adapter'
+        import 'next/dist/esm/server/web/globals'
+        import { adapter } from 'next/dist/esm/server/web/adapter'
         import { IncrementalCache } from 'next/dist/esm/server/lib/incremental-cache'
 
-        enhanceGlobals()
-
-        const mod = require(${stringifiedPagePath})
-        const handler = mod.middleware || mod.default
+        import handler from ${stringifiedPagePath}
 
         if (typeof handler !== 'function') {
           throw new Error('The Edge Function "pages${page}" must export a \`default\` function');

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

@@ -99,12 +99,11 @@ const edgeSSRLoader: webpack.LoaderDefinitionFunction<EdgeSSRLoaderQuery> =
     )}${isAppDir ? `?${WEBPACK_RESOURCE_QUERIES.edgeSSREntry}` : ''}`
 
     const transformed = `
-    import { adapter, enhanceGlobals } from 'next/dist/esm/server/web/adapter'
+    import 'next/dist/esm/server/web/globals'
+    import { adapter } from 'next/dist/esm/server/web/adapter'
     import { getRender } from 'next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render'
     import { IncrementalCache } from 'next/dist/esm/server/lib/incremental-cache'
 
-    enhanceGlobals()
-
     const pagesType = ${JSON.stringify(pagesType)}
     ${
       isAppDir
@@ -132,10 +131,10 @@ const edgeSSRLoader: webpack.LoaderDefinitionFunction<EdgeSSRLoaderQuery> =
     `
     }
 
-    const incrementalCacheHandler = ${
+    ${
       incrementalCacheHandlerPath
-        ? `require("${incrementalCacheHandlerPath}")`
-        : 'null'
+        ? `import incrementalCacheHandler from "${incrementalCacheHandlerPath}"`
+        : 'const incrementalCacheHandler = null'
     }
 
     const buildManifest = self.__BUILD_MANIFEST

packages/next/src/build/webpack/loaders/next-middleware-loader.ts

@@ -40,22 +40,21 @@ export default function middlewareLoader(this: any) {
   buildInfo.rootDir = rootDir
 
   return `
-        import { adapter, enhanceGlobals } from 'next/dist/esm/server/web/adapter'
+        import 'next/dist/esm/server/web/globals'
+        import { adapter } from 'next/dist/esm/server/web/adapter'
+        import * as mod from ${stringifiedPagePath}
 
-        enhanceGlobals()
-
-        var mod = require(${stringifiedPagePath})
-        var handler = mod.middleware || mod.default;
+        const handler = mod.middleware || mod.default
 
         if (typeof handler !== 'function') {
           throw new Error('The Middleware "pages${page}" must export a \`middleware\` or a \`default\` function');
         }
 
         export default function (opts) {
           return adapter({
-              ...opts,
-              page: ${JSON.stringify(page)},
-              handler,
+            ...opts,
+            page: ${JSON.stringify(page)},
+            handler,
           })
         }
     `

packages/next/src/compiled/tar/package.json

@@ -1 +1 @@
-{"name":"tar","main":"index.js","author":"Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)","license":"ISC"}
+{"name":"tar","main":"index.js","author":"GitHub Inc.","license":"ISC"}

packages/next/src/server/api-utils/node.ts

@@ -580,7 +580,7 @@ export async function apiResolver(
         )
       }
 
-      endResponse.apply(apiRes, args)
+      return endResponse.apply(apiRes, args)
     }
     apiRes.status = (statusCode) => sendStatusCode(apiRes, statusCode)
     apiRes.send = (data) => sendData(apiReq, apiRes, data)

packages/next/src/server/dev/hot-reloader.ts

@@ -1,6 +1,9 @@
-import { webpack, StringXor } from 'next/dist/compiled/webpack/webpack'
 import type { NextConfigComplete } from '../config-shared'
 import type { CustomRoutes } from '../../lib/load-custom-routes'
+import type { Duplex } from 'stream'
+import type { Telemetry } from '../../telemetry/storage'
+
+import { webpack, StringXor } from 'next/dist/compiled/webpack/webpack'
 import { getOverlayMiddleware } from 'next/dist/compiled/@next/react-dev-overlay/dist/middleware'
 import { IncomingMessage, ServerResponse } from 'http'
 import { WebpackHotMiddleware } from './hot-middleware'
@@ -56,7 +59,6 @@ import { promises as fs } from 'fs'
 import { UnwrapPromise } from '../../lib/coalesced-function'
 import { getRegistry } from '../../lib/helpers/get-registry'
 import { RouteMatch } from '../future/route-matches/route-match'
-import type { Telemetry } from '../../telemetry/storage'
 import { parseVersionInfo, VersionInfo } from './parse-version-info'
 import { isAPIRoute } from '../../lib/is-api-route'
 import { getRouteLoaderEntry } from '../../build/webpack/loaders/next-route-loader'
@@ -325,7 +327,7 @@ export default class HotReloader {
     return { finished }
   }
 
-  public onHMR(req: IncomingMessage, _res: ServerResponse, head: Buffer) {
+  public onHMR(req: IncomingMessage, _socket: Duplex, head: Buffer) {
     wsServer.handleUpgrade(req, req.socket, head, (client) => {
       this.webpackHotMiddleware?.onHMR(client)
       this.onDemandEntries?.onHMR(client)

packages/next/src/server/dev/next-dev-server.ts

@@ -1109,7 +1109,7 @@ export default class DevServer extends Server {
               this.hotReloader?.onHMR(req, socket, head)
             }
           } else {
-            this.handleUpgrade(req, socket, head)
+            this.handleUpgrade(req as any as NodeNextRequest, socket, head)
           }
         })
       }
@@ -1330,10 +1330,12 @@ export default class DevServer extends Server {
     if (isError(err) && err.stack) {
       try {
         const frames = parseStack(err.stack!)
+        // Filter out internal edge related runtime stack
         const frame = frames.find(
           ({ file }) =>
             !file?.startsWith('eval') &&
             !file?.includes('web/adapter') &&
+            !file?.includes('web/globals') &&
             !file?.includes('sandbox/context') &&
             !file?.includes('<anonymous>')
         )