Merge branch 'canary' into pepoeverton/eslint-update-output-file

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.7-canary.27"
+  "version": "12.1.7-canary.29"
 }

package.json

@@ -49,8 +49,8 @@
   "devDependencies": {
     "@babel/core": "7.18.0",
     "@babel/eslint-parser": "7.18.2",
-    "@babel/parser": "7.12.11",
     "@babel/generator": "7.18.0",
+    "@babel/parser": "7.12.11",
     "@babel/plugin-proposal-object-rest-spread": "7.14.7",
     "@babel/preset-flow": "7.14.5",
     "@babel/preset-react": "7.14.5",
@@ -192,7 +192,7 @@
     "turbo": "1.2.14",
     "typescript": "4.6.3",
     "wait-port": "0.2.2",
-    "webpack": "link:./node_modules/webpack5",
+    "webpack": "link:node_modules/webpack5",
     "webpack-bundle-analyzer": "4.3.0",
     "worker-loader": "3.0.7"
   },

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.1.7-canary.27",
+    "@next/eslint-plugin-next": "12.1.7-canary.29",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.7-canary.27",
+  "version": "12.1.7-canary.29",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform -p next-swc-napi --cargo-name next_swc_napi native --features plugin",

packages/next/build/webpack-config.ts

@@ -1593,7 +1593,11 @@ export default async function getBaseWebpackConfig(
             const {
               NextJsRequireCacheHotReloader,
             } = require('./webpack/plugins/nextjs-require-cache-hot-reloader')
-            const devPlugins = [new NextJsRequireCacheHotReloader()]
+            const devPlugins = [
+              new NextJsRequireCacheHotReloader({
+                hasServerComponents: config.experimental.serverComponents,
+              }),
+            ]
 
             if (isClient || isEdgeServer) {
               devPlugins.push(new webpack.HotModuleReplacementPlugin())

packages/next/build/webpack/loaders/next-app-loader.ts

@@ -14,14 +14,16 @@ function pathToUrlPath(pathname: string) {
   return urlPath
 }
 
-async function resolveLayoutPathsByPage({
+async function resolvePathsByPage({
+  name,
   pagePath,
   resolve,
 }: {
+  name: 'layout' | 'loading'
   pagePath: string
   resolve: (pathname: string) => Promise<string | undefined>
 }) {
-  const layoutPaths = new Map<string, string | undefined>()
+  const paths = new Map<string, string | undefined>()
   const parts = pagePath.split('/')
   const isNewRootLayout =
     parts[1]?.length > 2 && parts[1]?.startsWith('(') && parts[1]?.endsWith(')')
@@ -32,26 +34,30 @@ async function resolveLayoutPathsByPage({
     if (!pathWithoutSlashLayout) {
       continue
     }
-    const layoutPath = `${pathWithoutSlashLayout}/layout`
+    const layoutPath = `${pathWithoutSlashLayout}/${name}`
     let resolvedLayoutPath = await resolve(layoutPath)
     let urlPath = pathToUrlPath(pathWithoutSlashLayout)
 
     // if we are in a new root app/(root) and a custom root layout was
     // not provided or a root layout app/layout is not present, we use
     // a default root layout to provide the html/body tags
-    const isCustomRootLayout = isNewRootLayout && i === 2
+    const isCustomRootLayout = name === 'layout' && isNewRootLayout && i === 2
 
-    if ((isCustomRootLayout || i === 1) && !resolvedLayoutPath) {
+    if (
+      name === 'layout' &&
+      (isCustomRootLayout || i === 1) &&
+      !resolvedLayoutPath
+    ) {
       resolvedLayoutPath = await resolve('next/dist/lib/app-layout')
     }
-    layoutPaths.set(urlPath, resolvedLayoutPath)
+    paths.set(urlPath, resolvedLayoutPath)
 
     // if we're in a new root layout don't add the top-level app/layout
     if (isCustomRootLayout) {
       break
     }
   }
-  return layoutPaths
+  return paths
 }
 
 const nextAppLoader: webpack.LoaderDefinitionFunction<{
@@ -75,7 +81,39 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
   }
   const resolve = this.getResolve(resolveOptions)
 
-  const layoutPaths = await resolveLayoutPathsByPage({
+  const loadingPaths = await resolvePathsByPage({
+    name: 'loading',
+    pagePath: pagePath,
+    resolve: async (pathname) => {
+      try {
+        return await resolve(this.rootContext, pathname)
+      } catch (err: any) {
+        if (err.message.includes("Can't resolve")) {
+          return undefined
+        }
+        throw err
+      }
+    },
+  })
+
+  const loadingComponentsCode = []
+  for (const [loadingPath, resolvedLoadingPath] of loadingPaths) {
+    if (resolvedLoadingPath) {
+      this.addDependency(resolvedLoadingPath)
+      // use require so that we can bust the require cache
+      const codeLine = `'${loadingPath}': () => require('${resolvedLoadingPath}')`
+      loadingComponentsCode.push(codeLine)
+    } else {
+      for (const ext of extensions) {
+        this.addMissingDependency(
+          path.join(appDir, loadingPath, `layout${ext}`)
+        )
+      }
+    }
+  }
+
+  const layoutPaths = await resolvePathsByPage({
+    name: 'layout',
     pagePath: pagePath,
     resolve: async (pathname) => {
       try {
@@ -117,6 +155,10 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
         ${componentsCode.join(',\n')}
     };
 
+    export const loadingComponents = {
+      ${loadingComponentsCode.join(',\n')}
+    };
+
     export const AppRouter = require('next/dist/client/components/app-router.client.js').default
     export const LayoutRouter = require('next/dist/client/components/layout-router.client.js').default
 

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -82,15 +82,15 @@ export class FlightManifestPlugin {
         }
 
         const moduleExports: any = manifest[resource] || {}
-        const moduleIdMapping: any = manifest.__ssr_module_id__ || {}
+        const moduleIdMapping: any = manifest.__ssr_module_mapping__ || {}
+        moduleIdMapping[id] = moduleIdMapping[id] || {}
 
         // Note that this isn't that reliable as webpack is still possible to assign
         // additional queries to make sure there's no conflict even using the `named`
         // module ID strategy.
-        const ssrNamedModuleId = relative(context, mod.resourceResolveData.path)
-        moduleIdMapping[id] = ssrNamedModuleId.startsWith('.')
-          ? ssrNamedModuleId
-          : `./${ssrNamedModuleId}`
+        let ssrNamedModuleId = relative(context, mod.resourceResolveData.path)
+        if (!ssrNamedModuleId.startsWith('.'))
+          ssrNamedModuleId = `./${ssrNamedModuleId}`
 
         const exportsInfo = compilation.moduleGraph.getExportsInfo(mod)
         const cjsExports = [
@@ -143,10 +143,16 @@ export class FlightManifestPlugin {
                 : [],
             }
           }
+          if (!moduleIdMapping[id][name]) {
+            moduleIdMapping[id][name] = {
+              ...moduleExports[name],
+              id: ssrNamedModuleId,
+            }
+          }
         })
 
         manifest[resource] = moduleExports
-        manifest.__ssr_module_id__ = moduleIdMapping
+        manifest.__ssr_module_mapping__ = moduleIdMapping
       }
 
       chunkGroup.chunks.forEach((chunk: any) => {

packages/next/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts

@@ -3,6 +3,7 @@ import { clearModuleContext } from '../../../server/web/sandbox'
 import { realpathSync } from 'fs'
 import path from 'path'
 import isError from '../../../lib/is-error'
+import { NEXT_CLIENT_SSR_ENTRY_SUFFIX } from '../../../shared/lib/constants'
 
 type Compiler = webpack5.Compiler
 type WebpackPluginInstance = webpack5.WebpackPluginInstance
@@ -34,25 +35,52 @@ function deleteCache(filePath: string) {
     for (const child of module.children) {
       child.parent = null
     }
+    delete require.cache[filePath]
+    return true
   }
-  delete require.cache[filePath]
+  return false
 }
 
 const PLUGIN_NAME = 'NextJsRequireCacheHotReloader'
 
 // This plugin flushes require.cache after emitting the files. Providing 'hot reloading' of server files.
 export class NextJsRequireCacheHotReloader implements WebpackPluginInstance {
   prevAssets: any = null
+  hasServerComponents: boolean
   previousOutputPathsWebpack5: Set<string> = new Set()
   currentOutputPathsWebpack5: Set<string> = new Set()
 
+  constructor(opts: { hasServerComponents: boolean }) {
+    this.hasServerComponents = opts.hasServerComponents
+  }
+
   apply(compiler: Compiler) {
     compiler.hooks.assetEmitted.tap(
       PLUGIN_NAME,
-      (_file, { targetPath, content }) => {
+      (file, { targetPath, content }) => {
         this.currentOutputPathsWebpack5.add(targetPath)
         deleteCache(targetPath)
         clearModuleContext(targetPath, content.toString('utf-8'))
+
+        if (
+          this.hasServerComponents &&
+          /^(app|pages)\//.test(file) &&
+          /\.js$/.test(targetPath)
+        ) {
+          // Also clear the potential __sc_client__ cache.
+          // @TODO: Investigate why the client ssr bundle isn't emitted as an asset here.
+          const clientComponentsSSRTarget = targetPath.replace(
+            /\.js$/,
+            NEXT_CLIENT_SSR_ENTRY_SUFFIX + '.js'
+          )
+          if (deleteCache(clientComponentsSSRTarget)) {
+            this.currentOutputPathsWebpack5.add(clientComponentsSSRTarget)
+            clearModuleContext(
+              clientComponentsSSRTarget,
+              content.toString('utf-8')
+            )
+          }
+        }
       }
     )
 

packages/next/client/index.tsx

@@ -30,7 +30,6 @@ import measureWebVitals from './performance-relayer'
 import { RouteAnnouncer } from './route-announcer'
 import { createRouter, makePublicRouterInstance } from './router'
 import { getProperError } from '../lib/is-error'
-import { RefreshContext } from './streaming/refresh'
 import { ImageConfigContext } from '../shared/lib/image-config-context'
 import { ImageConfigComplete } from '../shared/lib/image-config'
 import { removeBasePath } from './remove-base-path'
@@ -675,6 +674,7 @@ if (process.env.__NEXT_RSC) {
     createFromFetch,
     createFromReadableStream,
   } = require('next/dist/compiled/react-server-dom-webpack')
+  const { RefreshContext } = require('./streaming/refresh')
 
   const encoder = new TextEncoder()