Replace pages-plugin with loader

packages/next/build/index.ts

@@ -37,17 +37,18 @@ export default async function build (dir: string, conf = null): Promise<void> {
     return result
   }, {})
 
-  let entrypoints
-  if (config.target === 'serverless') {
-    const serverlessEntrypoints: any = {}
-    // Because on Windows absolute paths in the generated code can break because of numbers, eg 1 in the path,
-    // we have to use a private alias
-    const pagesDirAlias = 'private-next-pages'
-    const dotNextDirAlias = 'private-dot-next'
-    const absoluteAppPath = pages['/_app'] ? join(pagesDirAlias, pages['/_app']).replace(/\\/g, '/') : 'next/dist/pages/_app'
-    const absoluteDocumentPath = pages['/_document'] ? join(pagesDirAlias, pages['/_document']).replace(/\\/g, '/') : 'next/dist/pages/_document'
-    const absoluteErrorPath = pages['/_error'] ? join(pagesDirAlias, pages['/_error']).replace(/\\/g, '/') : 'next/dist/pages/_error'
+  // Because on Windows absolute paths in the generated code can break because of numbers, eg 1 in the path,
+  // we have to use a private alias
+  const pagesDirAlias = 'private-next-pages'
+  const dotNextDirAlias = 'private-dot-next'
+
+  const absoluteAppPath = pages['/_app'] ? join(pagesDirAlias, pages['/_app']).replace(/\\/g, '/') : 'next/dist/pages/_app'
+  const absoluteDocumentPath = pages['/_document'] ? join(pagesDirAlias, pages['/_document']).replace(/\\/g, '/') : 'next/dist/pages/_document'
+  const absoluteErrorPath = pages['/_error'] ? join(pagesDirAlias, pages['/_error']).replace(/\\/g, '/') : 'next/dist/pages/_error'
 
+  let serverEntrypoints: any = {}
+
+  if (config.target === 'serverless') {
     const defaultOptions = {
       absoluteAppPath,
       absoluteDocumentPath,
@@ -66,21 +67,49 @@ export default async function build (dir: string, conf = null): Promise<void> {
       const absolutePagePath = join(pagesDirAlias, pages[page]).replace(/\\/g, '/')
       const bundleFile = page === '/' ? '/index.js' : `${page}.js`
       const serverlessLoaderOptions: ServerlessLoaderQuery = {page, absolutePagePath, ...defaultOptions}
-      serverlessEntrypoints[join('pages', bundleFile)] = `next-serverless-loader?${stringify(serverlessLoaderOptions)}!`
+      serverEntrypoints[join('pages', bundleFile)] = `next-serverless-loader?${stringify(serverlessLoaderOptions)}!`
     })
 
     const errorPage = join('pages', '/_error.js')
-    if (!serverlessEntrypoints[errorPage]) {
+    if (!serverEntrypoints[errorPage]) {
       const serverlessLoaderOptions: ServerlessLoaderQuery = {page: '/_error', absolutePagePath: 'next/dist/pages/_error', ...defaultOptions}
-      serverlessEntrypoints[errorPage] = `next-serverless-loader?${stringify(serverlessLoaderOptions)}!`
+      serverEntrypoints[errorPage] = `next-serverless-loader?${stringify(serverlessLoaderOptions)}!`
     }
+  } else if(config.target === 'server') {
+    Object.keys(pages).forEach(async (page) => {
+      if (page === '/_app' || page === '/_document' || page === '/_error') {
+        return
+      }
 
-    entrypoints = serverlessEntrypoints
+      const absolutePagePath = join(pagesDirAlias, pages[page]).replace(/\\/g, '/')
+      const bundleFile = page === '/' ? '/index.js' : `${page}.js`
+      serverEntrypoints[join('static', buildId, 'pages', bundleFile)] = [absolutePagePath]
+    })
+
+    serverEntrypoints[join('static', buildId, 'pages', '/_app.js')] = [absoluteAppPath]
+    serverEntrypoints[join('static', buildId, 'pages', '/_error.js')] = [absoluteErrorPath]
+    serverEntrypoints[join('static', buildId, 'pages', '/_document.js')] = [absoluteDocumentPath]
   }
+
+  const clientEntrypoints: any = {}
+
+  Object.keys(pages).forEach(async (page) => {
+    if (page === '/_app' || page === '/_document' || page === '/_error') {
+      return
+    }
+
+    const absolutePagePath = join(pagesDirAlias, pages[page]).replace(/\\/g, '/')
+    const bundleFile = page === '/' ? '/index.js' : `${page}.js`
+    const clientPagesLoaderOptions = {page, absolutePagePath}
+    clientEntrypoints[join('static', buildId, 'pages', bundleFile)] = `next-client-pages-loader?${stringify(clientPagesLoaderOptions)}!`
+  })
 
+  clientEntrypoints[join('static', buildId, 'pages', '/_app.js')] = `next-client-pages-loader?${stringify({page: '/_app', absolutePagePath: absoluteAppPath})}!`
+  clientEntrypoints[join('static', buildId, 'pages', '/_error.js')] = `next-client-pages-loader?${stringify({page: '/_error', absolutePagePath: absoluteErrorPath})}!`
+
   const configs: any = await Promise.all([
-    getBaseWebpackConfig(dir, { buildId, isServer: false, config, target: config.target }),
-    getBaseWebpackConfig(dir, { buildId, isServer: true, config, target: config.target, entrypoints })
+    getBaseWebpackConfig(dir, { buildId, isServer: false, config, target: config.target, entrypoints: clientEntrypoints }),
+    getBaseWebpackConfig(dir, { buildId, isServer: true, config, target: config.target, entrypoints: serverEntrypoints })
   ])
 
   let result: CompilerResult = {warnings: [], errors: []}

packages/next/build/webpack-config.js

@@ -4,8 +4,6 @@ import resolve from 'resolve'
 import CaseSensitivePathPlugin from 'case-sensitive-paths-webpack-plugin'
 import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
 import WebpackBar from 'webpackbar'
-import {getPages} from './webpack/utils'
-import PagesPlugin from './webpack/plugins/pages-plugin'
 import NextJsSsrImportPlugin from './webpack/plugins/nextjs-ssr-import'
 import NextJsSSRModuleCachePlugin from './webpack/plugins/nextjs-ssr-module-cache'
 import NextJsRequireCacheHotReloader from './webpack/plugins/nextjs-require-cache-hot-reloader'
@@ -139,22 +137,18 @@ function optimizationConfig ({ dev, isServer, totalPages, target }) {
   return config
 }
 
-export default async function getBaseWebpackConfig (dir, {dev = false, isServer = false, buildId, config, target = 'server', entrypoints = false}) {
+export default async function getBaseWebpackConfig (dir, {dev = false, isServer = false, buildId, config, target = 'server', entrypoints}) {
+  if (!entrypoints) {
+    throw new Error('No entrypoints provided')
+  }
   const defaultLoaders = {
     babel: {
       loader: 'next-babel-loader',
       options: {dev, isServer, cwd: dir}
     },
+    // Backwards compat
     hotSelfAccept: {
-      loader: 'hot-self-accept-loader',
-      options: {
-        include: [
-          path.join(dir, 'pages')
-        ],
-        // All pages are javascript files. So we apply hot-self-accept-loader here to facilitate hot reloading of pages.
-        // This makes sure plugins just have to implement `pageExtensions` instead of also implementing the loader
-        extensions: new RegExp(`\\.+(${config.pageExtensions.join('|')})$`)
-      }
+      loader: 'noop-loader'
     }
   }
 
@@ -166,8 +160,7 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer
   const distDir = path.join(dir, config.distDir)
   const outputDir = target === 'serverless' ? 'serverless' : SERVER_DIRECTORY
   const outputPath = path.join(distDir, isServer ? outputDir : '')
-  const pagesEntries = await getPages(dir, {nextPagesDir: DEFAULT_PAGES_DIR, dev, buildId, isServer, pageExtensions: config.pageExtensions.join('|')})
-  const totalPages = Object.keys(pagesEntries).length
+  const totalPages = Object.keys(entrypoints).length
   const clientEntries = !isServer ? {
     // Backwards compatibility
     'main.js': [],
@@ -205,13 +198,9 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer
     context: dir,
     // Kept as function to be backwards compatible
     entry: async () => {
-      if (entrypoints) {
-        return entrypoints
-      }
       return {
         ...clientEntries,
-        // Only _error and _document when in development. The rest is handled by on-demand-entries
-        ...pagesEntries
+        ...entrypoints
       }
     },
     output: {
@@ -244,11 +233,6 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer
     },
     module: {
       rules: [
-        dev && !isServer && {
-          test: defaultLoaders.hotSelfAccept.options.extensions,
-          include: defaultLoaders.hotSelfAccept.options.include,
-          use: defaultLoaders.hotSelfAccept
-        },
         {
           test: /\.(js|jsx)$/,
           include: [dir, NEXT_PROJECT_ROOT_DIST_CLIENT, DEFAULT_PAGES_DIR, /next-server[\\/]dist[\\/]lib/],
@@ -309,7 +293,6 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer
       }),
       target !== 'serverless' && isServer && new PagesManifestPlugin(),
       !isServer && new BuildManifestPlugin(),
-      !isServer && new PagesPlugin(),
       isServer && new NextJsSsrImportPlugin(),
       target !== 'serverless' && isServer && new NextJsSSRModuleCachePlugin({outputPath}),
       !isServer && !dev && new AssetsSizePlugin({buildId, distDir})

packages/next/build/webpack/loaders/next-client-pages-loader.ts

@@ -0,0 +1,29 @@
+import {loader} from 'webpack'
+import loaderUtils from 'loader-utils'
+
+export type ClientPagesLoaderOptions = {
+  absolutePagePath: string,
+  page: string
+}
+
+const nextServerlessLoader: loader.Loader = function () {
+  const {absolutePagePath, page}: any = loaderUtils.getOptions(this)
+  const stringifiedAbsolutePagePath = JSON.stringify(absolutePagePath)
+  const stringifiedPage = JSON.stringify(page)
+
+  return `
+    (window.__NEXT_P=window.__NEXT_P||[]).push([${stringifiedPage}, function() {
+      var page = require(${stringifiedAbsolutePagePath})
+      if(module.hot) {
+        module.hot.accept(${stringifiedAbsolutePagePath}, function() {
+          if(!next.router.components[${stringifiedPage}]) return
+          var updatedPage = require(${stringifiedAbsolutePagePath})
+          next.router.update(${stringifiedPage}, updatedPage.default || updatedPage)
+        })
+      }
+      return { page: page.default || page }
+    }]);
+  `
+}
+
+export default nextServerlessLoader

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

@@ -0,0 +1 @@
+module.exports = (source) => source