Upgrade webpack to 5.86.0 (#50992)

To resolve issue #49382, we found layer doesn't get applied for dynamic imports, so we fixed it on webpack side in webpack/webpack#17310

This PR is to upgrade webpack to 5.86.0 with that patch as a precedence. After this we need to fix the `next/image` client components is missing in client reference manifest when using dynamic imports to fix the issue.

package.json

@@ -236,14 +236,16 @@
     "typescript": "5.1.3",
     "unfetch": "4.2.0",
     "wait-port": "0.2.2",
-    "webpack": "5.74.0",
+    "webpack": "5.86.0",
     "webpack-bundle-analyzer": "4.7.0",
     "whatwg-fetch": "3.0.0",
     "ws": "8.2.3"
   },
   "resolutions": {
+    "webpack": "5.86.0",
     "browserslist": "4.20.2",
     "caniuse-lite": "1.0.30001406",
+    "@types/node": "20.2.5",
     "@babel/core": "7.18.0",
     "@babel/parser": "7.18.0",
     "@babel/types": "7.18.0",

packages/next/package.json

@@ -305,7 +305,7 @@
     "vm-browserify": "1.1.2",
     "watchpack": "2.4.0",
     "web-vitals": "3.0.0",
-    "webpack": "5.74.0",
+    "webpack": "5.86.0",
     "webpack-sources1": "npm:webpack-sources@1.4.3",
     "webpack-sources3": "npm:webpack-sources@3.2.3",
     "ws": "8.2.3"

packages/next/src/build/webpack/loaders/utils.ts

@@ -6,7 +6,7 @@ const imageRegex = new RegExp(`\\.(${imageExtensions.join('|')})$`)
 
 export function isClientComponentEntryModule(mod: {
   resource: string
-  buildInfo: any
+  buildInfo?: any
 }) {
   const rscInfo = mod.buildInfo.rsc
   const hasClientDirective = rscInfo?.isClientRef
@@ -40,9 +40,9 @@ export function isCSSMod(mod: {
 
 export function getActions(mod: {
   resource: string
-  buildInfo: any
+  buildInfo?: any
 }): undefined | string[] {
-  return mod.buildInfo.rsc?.actions
+  return mod.buildInfo?.rsc?.actions
 }
 
 export function generateActionId(filePath: string, exportName: string) {

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

@@ -136,7 +136,7 @@ export class ClientReferenceManifestPlugin {
 
     // Collect client requests
     function collectClientRequest(mod: webpack.NormalModule) {
-      if (mod.resource === '' && mod.buildInfo.rsc) {
+      if (mod.resource === '' && mod.buildInfo?.rsc) {
         const { requests = [] } = mod.buildInfo.rsc
         requests.forEach((r: string) => {
           clientRequestsSet.add(r)
@@ -150,7 +150,7 @@ export class ClientReferenceManifestPlugin {
       function getAppPathRequiredChunks() {
         return chunkGroup.chunks
           .map((requiredChunk: webpack.Chunk) => {
-            if (SYSTEM_ENTRYPOINTS.has(requiredChunk.name)) {
+            if (SYSTEM_ENTRYPOINTS.has(requiredChunk.name || '')) {
               return null
             }
 
@@ -265,7 +265,7 @@ export class ClientReferenceManifestPlugin {
                 }
                 return null
               }),
-              ...(mod.buildInfo.rsc?.clientRefs || []),
+              ...(mod.buildInfo?.rsc?.clientRefs || []),
             ]
               .filter(Boolean)
               .flat()

packages/next/src/bundles/webpack/packages/lazy-compilation-node.js

@@ -3,11 +3,17 @@
 "use strict";
 
 var urlBase = decodeURIComponent(__resourceQuery.slice(1));
+
+/**
+ * @param {{ data: string, onError: (err: Error) => void, active: boolean, module: module }} options options
+ * @returns {() => void} function to destroy response
+ */
 exports.keepAlive = function (options) {
 	var data = options.data;
 	var onError = options.onError;
 	var active = options.active;
 	var module = options.module;
+	/** @type {import("http").IncomingMessage} */
 	var response;
 	var request = (
 		urlBase.startsWith("https") ? require("https") : require("http")
@@ -27,6 +33,10 @@ exports.keepAlive = function (options) {
 			}
 		}
 	);
+
+	/**
+	 * @param {Error} err error
+	 */
 	function errorHandler(err) {
 		err.message =
 			"Problem communicating active modules to the server: " + err.message;

packages/next/src/bundles/webpack/packages/lazy-compilation-web.js

@@ -9,6 +9,7 @@ if (typeof EventSource !== "function") {
 }
 
 var urlBase = decodeURIComponent(__resourceQuery.slice(1));
+/** @type {EventSource | undefined} */
 var activeEventSource;
 var activeKeys = new Map();
 var errorHandlers = new Set();
@@ -19,6 +20,10 @@ var updateEventSource = function updateEventSource() {
 		activeEventSource = new EventSource(
 			urlBase + Array.from(activeKeys.keys()).join("@")
 		);
+		/**
+		 * @this {EventSource}
+		 * @param {Event & { message?: string, filename?: string, lineno?: number, colno?: number, error?: Error }} event event
+		 */
 		activeEventSource.onerror = function (event) {
 			errorHandlers.forEach(function (onError) {
 				onError(
@@ -42,6 +47,10 @@ var updateEventSource = function updateEventSource() {
 	}
 };
 
+/**
+ * @param {{ data: string, onError: (err: Error) => void, active: boolean, module: module }} options options
+ * @returns {() => void} function to destroy response
+ */
 exports.keepAlive = function (options) {
 	var data = options.data;
 	var onError = options.onError;