use require.ensure for dynamic import

Author: huozhi

packages/next/client/index.tsx

@@ -415,6 +415,12 @@ export default async (opts: { webpackHMR?: any } = {}) => {
   }
 }
 
+function requireEnsureAsync(dep: string): Promise<any> {
+  return new Promise((resolve, reject) => {
+    return require.ensure([dep], (require) => resolve(require(dep)), reject)
+  })
+}
+
 export async function render(renderingProps: RenderRouteInfo): Promise<void> {
   if (renderingProps.err) {
     await renderError(renderingProps)
@@ -466,13 +472,17 @@ export function renderError(renderErrorProps: RenderErrorProps): Promise<any> {
   console.error(err)
   return pageLoader
     .loadPage('/_error')
-    .then(({ page: ErrorComponent, styleSheets }) => {
-      return lastAppProps?.Component === ErrorComponent
-        ? import('next/dist/pages/_error').then((m) => ({
-            ErrorComponent: m.default as React.ComponentType<{}>,
-            styleSheets: [],
-          }))
-        : { ErrorComponent, styleSheets }
+    .then(async ({ page: ErrorComponent, styleSheets }) => {
+      if (lastAppProps?.Component === ErrorComponent) {
+        // Error loop detected on rerender
+        const DefaultError = (await requireEnsureAsync('../pages/_error'))
+          .default as React.ComponentType<{}>
+        return {
+          ErrorComponent: DefaultError,
+          styleSheets: [],
+        }
+      }
+      return { ErrorComponent, styleSheets }
     })
     .then(({ ErrorComponent, styleSheets }) => {
       // In production we do a normal render with the `ErrorComponent` as component.

packages/next/package.json

@@ -183,6 +183,7 @@
     "@types/styled-jsx": "2.2.8",
     "@types/text-table": "0.2.1",
     "@types/webpack": "5.28.0",
+    "@types/webpack-env": "1.16.0",
     "@types/webpack-sources": "0.1.5",
     "@vercel/ncc": "0.27.0",
     "amphtml-validator": "1.0.33",

packages/next/taskfile-babel.js

@@ -6,8 +6,6 @@ const path = require('path')
 // eslint-disable-next-line import/no-extraneous-dependencies
 const transform = require('@babel/core').transform
 
-const clientPath = path.resolve(__dirname, 'client')
-
 const babelClientPresetEnvOptions = {
   modules: 'commonjs',
   targets: {
@@ -41,15 +39,6 @@ const babelClientOpts = {
       // eslint-disable-next-line import/no-extraneous-dependencies
       plugins: [require('@babel/plugin-proposal-numeric-separator').default],
     },
-    {
-      test: (p) => p.startsWith(clientPath),
-      presets: [
-        [
-          '@babel/preset-env',
-          { ...babelClientPresetEnvOptions, modules: false },
-        ],
-      ],
-    },
   ],
 }
 

packages/next/types/misc.d.ts

@@ -45,8 +45,6 @@ declare module 'next/dist/compiled/arg/index.js' {
   export = arg
 }
 
-declare module 'next/dist/pages/_error'
-
 declare module 'next/dist/compiled/babel/code-frame' {
   export * from '@babel/code-frame'
 }

test/integration/build-output/test/index.test.js

@@ -123,16 +123,16 @@ describe('Build Output', () => {
           )
           expect(indexSize.endsWith('B')).toBe(true)
 
-          expect(parseFloat(indexFirstLoad)).toBeCloseTo(gz ? 64 : 196, 1)
+          expect(parseFloat(indexFirstLoad)).toBeCloseTo(gz ? 64.2 : 197, 1)
           expect(indexFirstLoad.endsWith('kB')).toBe(true)
 
           expect(parseFloat(err404Size)).toBeCloseTo(gz ? 3.17 : 8.51, 1)
           expect(err404Size.endsWith('kB')).toBe(true)
 
-          expect(parseFloat(err404FirstLoad)).toBeCloseTo(gz ? 66.9 : 205, 1)
+          expect(parseFloat(err404FirstLoad)).toBeCloseTo(gz ? 67.1 : 205, 1)
           expect(err404FirstLoad.endsWith('kB')).toBe(true)
 
-          expect(parseFloat(sharedByAll)).toBeCloseTo(gz ? 63.7 : 196, 1)
+          expect(parseFloat(sharedByAll)).toBeCloseTo(gz ? 63.9 : 197, 1)
           expect(sharedByAll.endsWith('kB')).toBe(true)
 
           const appSizeValue = _appSize.endsWith('kB')
@@ -149,7 +149,7 @@ describe('Build Output', () => {
             true
           )
 
-          expect(parseFloat(mainSize)).toBeCloseTo(gz ? 20.1 : 62.7, 1)
+          expect(parseFloat(mainSize)).toBeCloseTo(gz ? 20.3 : 63.5, 1)
           expect(mainSize.endsWith('kB')).toBe(true)
 
           expect(parseFloat(frameworkSize)).toBeCloseTo(gz ? 42.0 : 130, 1)

yarn.lock

@@ -4267,6 +4267,11 @@
     "@types/unist" "*"
     "@types/vfile-message" "*"
 
+"@types/webpack-env@1.16.0":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.0.tgz#8c0a9435dfa7b3b1be76562f3070efb3f92637b4"
+  integrity sha512-Fx+NpfOO0CpeYX2g9bkvX8O5qh9wrU1sOF4g8sft4Mu7z+qfe387YlyY8w8daDyDsKY5vUxM0yxkAYnbkRbZEw==
+
 "@types/webpack-sources@0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92"