Merge branch 'canary' into refactor/revalidate-type

Author: kodiakhq[bot]

examples/radix-ui/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "1.0.0",
-    "@radix-ui/react-icons": "1.1.1",
+    "@radix-ui/react-icons": "1.3.0",
     "next": "latest",
     "react": "latest",
     "react-dom": "latest"

packages/create-next-app/templates/app-tw/js/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+MY_HOST="example.com"

packages/create-next-app/templates/app-tw/ts/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+MY_HOST="example.com"

packages/create-next-app/templates/app/js/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+MY_HOST="example.com"

packages/create-next-app/templates/app/ts/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+MY_HOST="example.com"

packages/create-next-app/templates/default-tw/js/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+MY_HOST="example.com"

packages/create-next-app/templates/default-tw/ts/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+MY_HOST="example.com"

packages/create-next-app/templates/default/js/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+MY_HOST="example.com"

packages/create-next-app/templates/default/ts/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+MY_HOST="example.com"

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

@@ -44,6 +44,7 @@ export async function resolveExternal(
   context: string,
   request: string,
   isEsmRequested: boolean,
+  hasAppDir: boolean,
   getResolve: (
     options: any
   ) => (
@@ -65,7 +66,11 @@ export async function resolveExternal(
 
   let preferEsmOptions =
     esmExternals && isEsmRequested ? [true, false] : [false]
-
+  // Disable esm resolving for app/ and pages/ so for esm package using under pages/
+  // won't load react through esm loader
+  if (hasAppDir) {
+    preferEsmOptions = [false]
+  }
   for (const preferEsm of preferEsmOptions) {
     const resolve = getResolve(
       preferEsm ? esmResolveOptions : nodeResolveOptions
@@ -130,10 +135,12 @@ export function makeExternalHandler({
   config,
   optOutBundlingPackageRegex,
   dir,
+  hasAppDir,
 }: {
   config: NextConfigComplete
   optOutBundlingPackageRegex: RegExp
   dir: string
+  hasAppDir: boolean
 }) {
   let resolvedExternalPackageDirs: Map<string, string>
   const looseEsmExternals = config.experimental?.esmExternals === 'loose'
@@ -286,6 +293,7 @@ export function makeExternalHandler({
       context,
       request,
       isEsmRequested,
+      hasAppDir,
       getResolve,
       isLocal ? resolveNextExternal : undefined
     )
@@ -345,6 +353,7 @@ export function makeExternalHandler({
           config.experimental.esmExternals,
           context,
           pkg + '/package.json',
+          hasAppDir,
           isEsmRequested,
           getResolve,
           isLocal ? resolveNextExternal : undefined

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

@@ -74,10 +74,6 @@ import { needsExperimentalReact } from '../lib/needs-experimental-react'
 import { getDefineEnvPlugin } from './webpack/plugins/define-env-plugin'
 import type { SWCLoaderOptions } from './webpack/loaders/next-swc-loader'
 import { isResourceInPackages, makeExternalHandler } from './handle-externals'
-import {
-  getMainField,
-  edgeConditionNames,
-} from './webpack-config-rules/resolve'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 type ClientEntries = {
@@ -108,6 +104,21 @@ const babelIncludeRegexes: RegExp[] = [
 const asyncStoragesRegex =
   /next[\\/]dist[\\/](esm[\\/])?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]: edgeConditionNames,
+}
+
 // Support for NODE_PATH
 const nodePathList = (process.env.NODE_PATH || '')
   .split(process.platform === 'win32' ? ';' : ':')
@@ -920,8 +931,7 @@ export default async function getBaseWebpackConfig(
           },
         }
       : undefined),
-    // default main fields use pages dir ones, and customize app router ones in loaders.
-    mainFields: getMainField('pages', compilerType),
+    mainFields: mainFieldsPerCompiler[compilerType],
     ...(isEdgeServer && {
       conditionNames: edgeConditionNames,
     }),
@@ -1029,6 +1039,7 @@ export default async function getBaseWebpackConfig(
     config,
     optOutBundlingPackageRegex,
     dir,
+    hasAppDir,
   })
 
   const shouldIncludeExternalDirs =
@@ -1599,7 +1610,6 @@ export default async function getBaseWebpackConfig(
                   ],
                 },
                 resolve: {
-                  mainFields: getMainField('app', compilerType),
                   conditionNames: reactServerCondition,
                   // If missing the alias override here, the default alias will be used which aliases
                   // react to the direct file path, not the package name. In that case the condition
@@ -1744,9 +1754,6 @@ export default async function getBaseWebpackConfig(
                     ],
                     exclude: [codeCondition.exclude],
                     use: swcLoaderForClientLayer,
-                    resolve: {
-                      mainFields: getMainField('app', compilerType),
-                    },
                   },
                 ]
               : []),

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

@@ -743,6 +743,7 @@ export class TraceEntryPointsPlugin implements webpack.WebpackPluginInstance {
             context,
             request,
             isEsmRequested,
+            !!this.appDirEnabled,
             (options) => (_: string, resRequest: string) => {
               return getResolve(options)(parent, resRequest, job)
             },

packages/next/src/build/webpack/plugins/next-trace-entrypoints-plugin.ts

@@ -9,7 +9,11 @@ if (
   !('withResolvers' in Promise) ||
   typeof Promise.withResolvers !== 'function'
 ) {
-  Promise.withResolvers = <T>() => {
+  Promise.withResolvers = <T>(): {
+    readonly promise: Promise<T>
+    readonly resolve: (value: T | PromiseLike<T>) => void
+    readonly reject: (reason: any) => void
+  } => {
     let resolvers: {
       resolve: (value: T | PromiseLike<T>) => void
       reject: (reason: any) => void

packages/next/src/lib/polyfill-promise-with-resolvers.ts

@@ -15,6 +15,11 @@ import type {
   NextUrlWithParsedQuery,
 } from '../request-meta'
 import type { DevBundlerService } from '../lib/dev-bundler-service'
+import type { IncrementalCache } from '../lib/incremental-cache'
+import type { UnwrapPromise } from '../../lib/coalesced-function'
+import type { NodeNextResponse, NodeNextRequest } from '../base-http/node'
+import type { RouteEnsurer } from '../future/route-matcher-managers/dev-route-matcher-manager'
+import type { PagesManifest } from '../../build/webpack/plugins/pages-manifest-plugin'
 
 import fs from 'fs'
 import { Worker } from 'next/dist/compiled/jest-worker'
@@ -39,26 +44,21 @@ import { setGlobal } from '../../trace'
 import { findPageFile } from '../lib/find-page-file'
 import { getNodeOptionsWithoutInspect } from '../lib/utils'
 import { withCoalescedInvoke } from '../../lib/coalesced-function'
-import type { UnwrapPromise } from '../../lib/coalesced-function'
 import { loadDefaultErrorComponents } from '../load-default-error-components'
 import { DecodeError, MiddlewareNotFoundError } from '../../shared/lib/utils'
 import * as Log from '../../build/output/log'
 import isError, { getProperError } from '../../lib/is-error'
-import type { NodeNextResponse, NodeNextRequest } from '../base-http/node'
 import { isMiddlewareFile } from '../../build/utils'
 import { formatServerError } from '../../lib/format-server-error'
 import { DevRouteMatcherManager } from '../future/route-matcher-managers/dev-route-matcher-manager'
-import type { RouteEnsurer } from '../future/route-matcher-managers/dev-route-matcher-manager'
 import { DevPagesRouteMatcherProvider } from '../future/route-matcher-providers/dev/dev-pages-route-matcher-provider'
 import { DevPagesAPIRouteMatcherProvider } from '../future/route-matcher-providers/dev/dev-pages-api-route-matcher-provider'
 import { DevAppPageRouteMatcherProvider } from '../future/route-matcher-providers/dev/dev-app-page-route-matcher-provider'
 import { DevAppRouteRouteMatcherProvider } from '../future/route-matcher-providers/dev/dev-app-route-route-matcher-provider'
-import type { PagesManifest } from '../../build/webpack/plugins/pages-manifest-plugin'
 import { NodeManifestLoader } from '../future/route-matcher-providers/helpers/manifest-loaders/node-manifest-loader'
 import { BatchedFileReader } from '../future/route-matcher-providers/dev/helpers/file-reader/batched-file-reader'
 import { DefaultFileReader } from '../future/route-matcher-providers/dev/helpers/file-reader/default-file-reader'
 import { NextBuildContext } from '../../build/build-context'
-import type { IncrementalCache } from '../lib/incremental-cache'
 import LRUCache from 'next/dist/compiled/lru-cache'
 import { getMiddlewareRouteMatcher } from '../../shared/lib/router/utils/middleware-route-matcher'
 
@@ -85,8 +85,11 @@ export interface Options extends ServerOptions {
 }
 
 export default class DevServer extends Server {
-  private devReady: Promise<void>
-  private setDevReady?: Function
+  /**
+   * The promise that resolves when the server is ready. When this is unset
+   * the server is ready.
+   */
+  private ready? = Promise.withResolvers<void>()
   protected sortedRoutes?: string[]
   private pagesDir?: string
   private appDir?: string
@@ -145,9 +148,6 @@ export default class DevServer extends Server {
     this.renderOpts.appDirDevErrorLogger = (err: any) =>
       this.logErrorWithOriginalStack(err, 'app-dir')
     ;(this.renderOpts as any).ErrorDebug = ReactDevOverlay
-    this.devReady = new Promise((resolve) => {
-      this.setDevReady = resolve
-    })
     this.staticPathsCache = new LRUCache({
       // 5MB
       max: 5 * 1024 * 1024,
@@ -268,7 +268,9 @@ export default class DevServer extends Server {
     await super.prepareImpl()
     await this.runInstrumentationHookIfAvailable()
     await this.matchers.reload()
-    this.setDevReady!()
+
+    this.ready?.resolve()
+    this.ready = undefined
 
     // This is required by the tracing subsystem.
     setGlobal('appDir', this.appDir)
@@ -428,7 +430,7 @@ export default class DevServer extends Server {
     res: BaseNextResponse,
     parsedUrl?: NextUrlWithParsedQuery
   ): Promise<void> {
-    await this.devReady
+    await this.ready?.promise
     return await super.handleRequest(req, res, parsedUrl)
   }
 
@@ -437,7 +439,7 @@ export default class DevServer extends Server {
     res: NodeNextResponse,
     parsedUrl: UrlWithParsedQuery
   ): Promise<void> {
-    await this.devReady
+    await this.ready?.promise
 
     const { basePath } = this.nextConfig
     let originalPathname: string | null = null
@@ -748,7 +750,8 @@ export default class DevServer extends Server {
     appPaths?: ReadonlyArray<string> | null
     shouldEnsure: boolean
   }): Promise<FindComponentsResult | null> {
-    await this.devReady
+    await this.ready?.promise
+
     const compilationErr = await this.getCompilationError(page)
     if (compilationErr) {
       // Wrap build errors so that they don't get logged again

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

@@ -1,4 +1,6 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+// This takes advantage of `Promise.withResolvers` which is polyfilled in
+// this imported module.
+import '../../../lib/polyfill-promise-with-resolvers'
 
 import { isDynamicRoute } from '../../../shared/lib/router/utils'
 import type { RouteKind } from '../route-kind'
@@ -44,10 +46,8 @@ export class DefaultRouteMatcherManager implements RouteMatcherManager {
 
   private previousMatchers: ReadonlyArray<RouteMatcher> = []
   public async reload() {
-    let callbacks: { resolve: Function; reject: Function }
-    this.waitTillReadyPromise = new Promise((resolve, reject) => {
-      callbacks = { resolve, reject }
-    })
+    const { promise, resolve, reject } = Promise.withResolvers<void>()
+    this.waitTillReadyPromise = promise
 
     // Grab the compilation ID for this run, we'll verify it at the end to
     // ensure that if any routes were added before reloading is finished that
@@ -182,11 +182,11 @@ export class DefaultRouteMatcherManager implements RouteMatcherManager {
         )
       }
     } catch (err) {
-      callbacks!.reject(err)
+      reject(err)
     } finally {
       // The compilation ID matched, so mark the complication as finished.
       this.lastCompilationID = compilationID
-      callbacks!.resolve()
+      resolve()
     }
   }
 

packages/next/src/server/future/route-matcher-managers/default-route-matcher-manager.ts

@@ -794,16 +794,3 @@ export async function getImageSize(
   const { width, height } = imageSizeOf(buffer)
   return { width, height }
 }
-
-export class Deferred<T> {
-  promise: Promise<T>
-  resolve!: (value: T) => void
-  reject!: (error?: Error) => void
-
-  constructor() {
-    this.promise = new Promise((resolve, reject) => {
-      this.resolve = resolve
-      this.reject = reject
-    })
-  }
-}

packages/next/src/server/image-optimizer.ts

@@ -41,14 +41,11 @@ export default class WebResponseCache {
       return pendingResponse
     }
 
-    let resolver: (cacheEntry: ResponseCacheEntry | null) => void = () => {}
-    let rejecter: (error: Error) => void = () => {}
-    const promise: Promise<ResponseCacheEntry | null> = new Promise(
-      (resolve, reject) => {
-        resolver = resolve
-        rejecter = reject
-      }
-    )
+    const {
+      promise,
+      resolve: resolver,
+      reject: rejecter,
+    } = Promise.withResolvers<ResponseCacheEntry | null>()
     if (pendingResponseKey) {
       this.pendingResponses.set(pendingResponseKey, promise)
     }