Experimental module/nomodule support (vercel#7704)

* Module/nomodule implementation based on RFC 7563

* Remove comment

* Fixing issue with building amp pages

* Fixing test cases for serverless mode

* Adding safari 10 nomodule fix. Preloading modern js by default

* Fixing size-limit integration test

* Bug fix

* Adding testcase for modern build

* Trigger rebuild

* Setting default crossOrigin value

* Moving modern config option inside experimental flag

* Adding nomodule attribute to safari-fix script

* Changing safari10NomoduleFix default value to true

* Removing safari-fix flag

* Changing .es6 to .module

* Disable modern default

* Removing default crossOrigin value. Setting modern flag to false by default. Fixed test cases

* Remove confusing defaults and mark required instead

* Adjust blacklist

* Move behavior of page marking

* Fixing childCompiler errors not being captured

* Tweak names

* Revert

* whoops

* Fixing bug with page-loader.js

* Changing modern babel cache name

* Rename helper

* Iterate over both bundles

* Correctly clamp bundle sizes

* Revert test

* Add modern mode tests

* Fix test

* test

* test2

Author: janicklas-ralph

packages/next-server/server/config.ts

@@ -39,6 +39,7 @@ const defaultConfig: { [key: string]: any } = {
     asyncToPromises: false,
     documentMiddleware: false,
     publicDirectory: false,
+    modern: false,
   },
   serverRuntimeConfig: {},
   publicRuntimeConfig: {},

packages/next/build/babel/plugins/next-page-config.ts

@@ -122,6 +122,19 @@ export default function nextPageConfig({
           t.returnStatement(t.stringLiteral(inlineGipIdentifier)),
         ])
       },
+      // handles class { static async getInitialProps() {} }
+      ClassMethod(path, state: ConfigState) {
+        if (!state.setupInlining) return
+        if (
+          (path.node.key && (path.node.key as BabelTypes.Identifier).name) !==
+          'getInitialProps'
+        )
+          return
+
+        path.node.body = t.blockStatement([
+          t.returnStatement(t.stringLiteral(inlineGipIdentifier)),
+        ])
+      },
     },
   }
 }

packages/next/build/index.ts

@@ -27,7 +27,6 @@ import {
   getSpecifiedPages,
   printTreeView,
   PageInfo,
-  isPageStatic,
   hasCustomAppGetInitialProps,
 } from './utils'
 import getBaseWebpackConfig from './webpack-config'

packages/next/build/webpack-config.ts

@@ -32,6 +32,7 @@ import { ReactLoadablePlugin } from './webpack/plugins/react-loadable-plugin'
 import { ServerlessPlugin } from './webpack/plugins/serverless-plugin'
 import { SharedRuntimePlugin } from './webpack/plugins/shared-runtime-plugin'
 import { TerserPlugin } from './webpack/plugins/terser-webpack-plugin/src/index'
+import NextEsmPlugin from './webpack/plugins/next-esm-plugin'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 
@@ -175,6 +176,11 @@ export default async function getBaseWebpackConfig(
 
   const devtool = dev ? 'cheap-module-source-map' : false
 
+  const crossOrigin =
+    !config.crossOrigin && config.experimental.modern
+      ? 'anonymous'
+      : config.crossOrigin
+
   let webpackConfig: webpack.Configuration = {
     devtool,
     mode: webpackMode,
@@ -365,7 +371,7 @@ export default async function getBaseWebpackConfig(
         ? `${dev ? '[name]' : '[name].[contenthash]'}.js`
         : `static/chunks/${dev ? '[name]' : '[name].[contenthash]'}.js`,
       strictModuleExceptionHandling: true,
-      crossOriginLoading: config.crossOrigin,
+      crossOriginLoading: crossOrigin,
       futureEmitAssets: !dev,
       webassemblyModuleFilename: 'static/wasm/[modulehash].wasm',
     },
@@ -444,7 +450,7 @@ export default async function getBaseWebpackConfig(
           }
         }, {}),
         'process.env.NODE_ENV': JSON.stringify(webpackMode),
-        'process.crossOrigin': JSON.stringify(config.crossOrigin),
+        'process.crossOrigin': JSON.stringify(crossOrigin),
         'process.browser': JSON.stringify(!isServer),
         // This is used in client/dev-error-overlay/hot-dev-client.js to replace the dist directory
         ...(dev && !isServer
@@ -455,6 +461,7 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_EXPORT_TRAILING_SLASH': JSON.stringify(
           config.exportTrailingSlash
         ),
+        'process.env.__NEXT_MODERN_BUILD': config.experimental.modern && !dev,
         ...(isServer
           ? {
               // Allow browser-only code to be eliminated
@@ -568,6 +575,23 @@ export default async function getBaseWebpackConfig(
           silent: true,
           formatter: 'codeframe',
         }),
+      config.experimental.modern &&
+        !isServer &&
+        !dev &&
+        new NextEsmPlugin({
+          filename: (getFileName: Function | string) => (...args: any[]) => {
+            const name =
+              typeof getFileName === 'function'
+                ? getFileName(...args)
+                : getFileName
+
+            return name.includes('.js')
+              ? name.replace(/\.js$/, '.module.js')
+              : args[0].chunk.name.replace(/\.js$/, '.module.js')
+          },
+          chunkFilename: (inputChunkName: string) =>
+            inputChunkName.replace(/\.js$/, '.module.js'),
+        }),
     ].filter((Boolean as any) as ExcludesFalse),
   }
 

packages/next/build/webpack/loaders/next-babel-loader.js

@@ -4,9 +4,38 @@ import babelLoader from 'babel-loader'
 
 // increment 'c' to invalidate cache
 const cacheKey = 'babel-cache-' + 'c' + '-'
+const nextBabelPreset = require('../../babel/preset')
+
+const getModernOptions = (babelOptions = {}) => {
+  const presetEnvOptions = Object.assign({}, babelOptions['preset-env'])
+  const transformRuntimeOptions = Object.assign(
+    {},
+    babelOptions['transform-runtime'],
+    { regenerator: false }
+  )
+
+  presetEnvOptions.targets = {
+    esmodules: true
+  }
+  presetEnvOptions.exclude = [
+    ...(presetEnvOptions.exclude || []),
+    // Blacklist accidental inclusions
+    'transform-regenerator',
+    'transform-async-to-generator'
+  ]
+
+  return {
+    ...babelOptions,
+    'preset-env': presetEnvOptions,
+    'transform-runtime': transformRuntimeOptions
+  }
+}
+
+const nextBabelPresetModern = presetOptions => context =>
+  nextBabelPreset(context, getModernOptions(presetOptions))
 
 module.exports = babelLoader.custom(babel => {
-  const presetItem = babel.createConfigItem(require('../../babel/preset'), {
+  const presetItem = babel.createConfigItem(nextBabelPreset, {
     type: 'preset'
   })
   const applyCommonJs = babel.createConfigItem(
@@ -24,7 +53,8 @@ module.exports = babelLoader.custom(babel => {
     customOptions (opts) {
       const custom = {
         isServer: opts.isServer,
-        asyncToPromises: opts.asyncToPromises
+        asyncToPromises: opts.asyncToPromises,
+        isModern: opts.isModern
       }
       const filename = join(opts.cwd, 'noop.js')
       const loader = Object.assign(
@@ -35,6 +65,7 @@ module.exports = babelLoader.custom(babel => {
             cacheIdentifier:
                 cacheKey +
                 (opts.isServer ? '-server' : '') +
+                (opts.isModern ? '-modern' : '') +
                 JSON.stringify(
                   babel.loadPartialConfig({
                     filename,
@@ -53,13 +84,14 @@ module.exports = babelLoader.custom(babel => {
       delete loader.asyncToPromises
       delete loader.cache
       delete loader.distDir
+      delete loader.isModern
       return { loader, custom }
     },
     config (
       cfg,
       {
         source,
-        customOptions: { isServer, asyncToPromises }
+        customOptions: { isServer, asyncToPromises, isModern }
       }
     ) {
       const { cwd } = cfg.options
@@ -104,7 +136,26 @@ module.exports = babelLoader.custom(babel => {
         options.plugins.push(nextDataPlugin)
       }
 
-      if (asyncToPromises) {
+      if (isModern) {
+        const nextPreset = options.presets.find(
+          preset => preset && preset.value === nextBabelPreset
+        ) || { options: {} }
+
+        const additionalPresets = options.presets.filter(
+          preset => preset !== nextPreset
+        )
+
+        const presetItemModern = babel.createConfigItem(
+          nextBabelPresetModern(nextPreset.options),
+          {
+            type: 'preset'
+          }
+        )
+
+        options.presets = [...additionalPresets, presetItemModern]
+      }
+
+      if (!isModern && asyncToPromises) {
         const asyncToPromisesPlugin = babel.createConfigItem(
           [
             'babel-plugin-transform-async-to-promises',
@@ -128,13 +179,13 @@ module.exports = babelLoader.custom(babel => {
           return preset[0] === require('@babel/preset-env').default
         })
         if (babelPresetEnv) {
-          babelPresetEnv[1].exclude = (options.presets[0][1].exclude || [])
-            .concat([
-              'transform-typeof-symbol',
-              'transform-regenerator',
-              'transform-async-to-generator'
-            ])
-            .filter('transform-typeof-symbol')
+          babelPresetEnv[1].exclude = (
+            options.presets[0][1].exclude || []
+          ).concat([
+            'transform-typeof-symbol',
+            'transform-regenerator',
+            'transform-async-to-generator'
+          ])
         }
       }
 

packages/next/build/webpack/plugins/next-drop-client-page-plugin.ts

@@ -19,8 +19,13 @@ export class DropClientPage implements Plugin {
           const page = '/' + cleanAssetKey.split('pages/')[1]
           const pageNoExt = page.split(extname(page))[0]
 
-          this.ampPages.add(pageNoExt.replace(/\/index$/, '') || '/')
           delete compilation.assets[assetKey]
+
+          // Detect being re-ran through a child compiler and don't re-mark the
+          // page as AMP
+          if (!pageNoExt.endsWith('.module')) {
+            this.ampPages.add(pageNoExt.replace(/\/index$/, '') || '/')
+          }
         }
       })
     })