Universal Webpack

bin/next-dev

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-import 'source-map-support/register'
 import { resolve, join } from 'path'
 import parseArgs from 'minimist'
 import { existsSync, readFileSync } from 'fs'

client/index.js

@@ -159,7 +159,8 @@ async function doRender ({ Component, props, hash, err, emitter: emitterProp = e
 
 let isInitialRender = true
 function renderReactElement (reactEl, domEl) {
-  if (isInitialRender) {
+  // The check for `.hydrate` is there to support React alternatives like preact
+  if (isInitialRender && typeof ReactDOM.hydrate === 'function') {
     ReactDOM.hydrate(reactEl, domEl)
     isInitialRender = false
   } else {

client/next-dev.js

@@ -1,4 +1,3 @@
-import 'react-hot-loader/patch'
 import stripAnsi from 'strip-ansi'
 import initNext, * as next from './'
 import ErrorDebugComponent from '../lib/error-debug'

errors/powered-by-header-option-removed.md

@@ -0,0 +1,15 @@
+# The poweredByHeader has been removed
+
+#### Why This Error Occurred
+
+Starting at Next.js version 5.0.0 the `poweredByHeader` option has been removed.
+
+#### Possible Ways to Fix It
+
+If you still want to remove `x-powered-by` you can use one of the custom-server examples.
+
+And then manually remove the header using `res.removeHeader('x-powered-by')`
+
+### Useful Links
+
+- [Custom Server documentation + examples](https://github.com/zeit/next.js#custom-server-and-routing)

lib/head.js

@@ -27,7 +27,7 @@ function reduceComponents (components) {
   .filter(unique())
   .reverse()
   .map((c) => {
-    const className = (c.className ? c.className + ' ' : '') + 'next-head'
+    const className = (c.props && c.props.className ? c.props.className + ' ' : '') + 'next-head'
     return React.cloneElement(c, { className })
   })
 }

lib/page-loader.js

@@ -1,4 +1,4 @@
-/* global window, document, __NEXT_DATA__ */
+/* global window, document */
 import EventEmitter from './EventEmitter'
 
 const webpackModule = module
@@ -69,11 +69,7 @@ export default class PageLoader {
 
   loadScript (route) {
     route = this.normalizeRoute(route)
-    let scriptRoute = route
-
-    if (__NEXT_DATA__.nextExport) {
-      scriptRoute = route === '/' ? '/index.js' : `${route}.js`
-    }
+    const scriptRoute = route === '/' ? '/index.js' : `${route}.js`
 
     const script = document.createElement('script')
     const url = `${this.assetPrefix}/_next/${encodeURIComponent(this.buildId)}/page${scriptRoute}`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "4.3.0-canary.1",
+  "version": "5.0.0-universal-alpha.10",
   "description": "Minimalistic framework for server-rendered React applications",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -70,6 +70,7 @@
     "cross-spawn": "5.1.0",
     "del": "3.0.0",
     "etag": "1.8.1",
+    "extract-text-webpack-plugin": "3.0.2",
     "find-up": "2.1.0",
     "fresh": "0.5.2",
     "friendly-errors-webpack-plugin": "1.6.1",
@@ -78,6 +79,7 @@
     "hoist-non-react-statics": "2.3.1",
     "htmlescape": "1.1.1",
     "http-status": "1.0.1",
+    "ignore-loader": "0.1.2",
     "json-loader": "0.5.7",
     "loader-utils": "1.1.0",
     "md5-file": "3.2.3",
@@ -89,23 +91,24 @@
     "pkg-up": "2.0.0",
     "prop-types": "15.6.0",
     "prop-types-exact": "1.1.1",
-    "react-hot-loader": "3.1.1",
+    "react-hot-loader": "4.0.0-beta.14",
     "recursive-copy": "2.0.6",
     "send": "0.16.1",
-    "source-map-support": "0.4.18",
+    "source-map-support": "0.5.0",
     "strip-ansi": "3.0.1",
     "styled-jsx": "2.2.1",
     "touch": "3.1.0",
+    "uglifyjs-webpack-plugin": "^1.1.1",
     "unfetch": "3.0.0",
     "url": "0.11.0",
     "uuid": "3.1.0",
     "walk": "2.3.9",
-    "webpack": "3.6.0",
+    "webpack": "3.10.0",
     "webpack-dev-middleware": "1.12.0",
-    "webpack-hot-middleware": "2.19.1",
+    "webpack-hot-middleware": "2.21.0",
+    "webpack-node-externals": "1.6.0",
     "write-file-webpack-plugin": "4.2.0",
-    "xss-filters": "1.2.7",
-    "uglifyjs-webpack-plugin": "^1.1.1"    
+    "xss-filters": "1.2.7"
   },
   "devDependencies": {
     "@taskr/babel": "1.1.0",
@@ -131,8 +134,8 @@
     "node-notifier": "5.1.2",
     "nyc": "11.2.1",
     "portfinder": "1.0.13",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
     "standard": "9.0.2",
     "taskr": "1.1.0",
     "wd": "1.4.1"

server/build/babel/preset.js

@@ -1,6 +1,3 @@
-const babelRuntimePath = require.resolve('babel-runtime/package').replace(/[\\/]package\.json$/, '')
-const relativeResolve = require('../root-module-relative-path').default(require)
-
 // Resolve styled-jsx plugins
 function styledJsxOptions (opts) {
   if (!opts) {
@@ -53,22 +50,6 @@ module.exports = (context, opts = {}) => ({
     require.resolve('babel-plugin-transform-class-properties'),
     [require.resolve('babel-plugin-transform-runtime'), opts['transform-runtime'] || {}],
     [require.resolve('styled-jsx/babel'), styledJsxOptions(opts['styled-jsx'])],
-    ...plugins,
-    [
-      require.resolve('babel-plugin-module-resolver'),
-      {
-        alias: {
-          'babel-runtime': babelRuntimePath,
-          'next/link': relativeResolve('../../../lib/link'),
-          'next/prefetch': relativeResolve('../../../lib/prefetch'),
-          'next/css': relativeResolve('../../../lib/css'),
-          'next/dynamic': relativeResolve('../../../lib/dynamic'),
-          'next/head': relativeResolve('../../../lib/head'),
-          'next/document': relativeResolve('../../../server/document'),
-          'next/router': relativeResolve('../../../lib/router'),
-          'next/error': relativeResolve('../../../lib/error')
-        }
-      }
-    ]
+    ...plugins
   ]
 })

server/build/index.js

@@ -1,44 +1,42 @@
-import { tmpdir } from 'os'
 import { join } from 'path'
 import fs from 'mz/fs'
 import uuid from 'uuid'
-import del from 'del'
-import webpack from './webpack'
-import replaceCurrentBuild from './replace'
+import webpack from 'webpack'
+import getConfig from '../config'
+import getBaseWebpackConfig from './webpack'
 import md5File from 'md5-file/promise'
 
 export default async function build (dir, conf = null) {
+  const config = getConfig(dir, conf)
   const buildId = uuid.v4()
-  const tempDir = tmpdir()
-  const buildDir = join(tempDir, uuid.v4())
 
   try {
-    await fs.access(tempDir, fs.constants.W_OK)
+    await fs.access(dir, fs.constants.W_OK)
   } catch (err) {
     console.error(`> Failed, build directory is not writeable. https://err.sh/zeit/next.js/build-dir-not-writeable`)
     throw err
   }
 
-  const compiler = await webpack(dir, { buildId, buildDir, conf })
-
   try {
-    const stats = await runCompiler(compiler)
-    await writeBuildStats(buildDir, stats)
-    await writeBuildId(buildDir, buildId)
+    const configs = await Promise.all([
+      getBaseWebpackConfig(dir, { buildId, isServer: false, config }),
+      getBaseWebpackConfig(dir, { buildId, isServer: true, config })
+    ])
+
+    await runCompiler(configs)
+
+    await writeBuildStats(dir, config)
+    await writeBuildId(dir, buildId, config)
   } catch (err) {
-    console.error(`> Failed to build on ${buildDir}`)
+    console.error(`> Failed to build`)
     throw err
   }
-
-  await replaceCurrentBuild(dir, buildDir)
-
-  // no need to wait
-  del(buildDir, { force: true })
 }
 
 function runCompiler (compiler) {
-  return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
+  return new Promise(async (resolve, reject) => {
+    const webpackCompiler = await webpack(await compiler)
+    webpackCompiler.run((err, stats) => {
       if (err) return reject(err)
 
       const jsonStats = stats.toJson()
@@ -55,21 +53,21 @@ function runCompiler (compiler) {
   })
 }
 
-async function writeBuildStats (dir, stats) {
+async function writeBuildStats (dir, config) {
   // Here we can't use hashes in webpack chunks.
   // That's because the "app.js" is not tied to a chunk.
   // It's created by merging a few assets. (commons.js and main.js)
   // So, we need to generate the hash ourself.
   const assetHashMap = {
     'app.js': {
-      hash: await md5File(join(dir, '.next', 'app.js'))
+      hash: await md5File(join(dir, config.distDir, 'app.js'))
     }
   }
-  const buildStatsPath = join(dir, '.next', 'build-stats.json')
+  const buildStatsPath = join(dir, config.distDir, 'build-stats.json')
   await fs.writeFile(buildStatsPath, JSON.stringify(assetHashMap), 'utf8')
 }
 
-async function writeBuildId (dir, buildId) {
-  const buildIdPath = join(dir, '.next', 'BUILD_ID')
+async function writeBuildId (dir, buildId, config) {
+  const buildIdPath = join(dir, config.distDir, 'BUILD_ID')
   await fs.writeFile(buildIdPath, buildId, 'utf8')
 }

server/build/loaders/hot-self-accept-loader.js

@@ -8,12 +8,6 @@ module.exports = function (content, sourceMap) {
   this.callback(null, `${content}
     (function (Component, route) {
       if (!module.hot) return
-      if (!__resourceQuery) return
-
-      var qs = require('querystring')
-      var params = qs.parse(__resourceQuery.slice(1))
-      if (params.entry == null) return
-
       module.hot.accept()
       Component.__route = route
 

server/build/plugins/combine-assets-plugin.js

@@ -21,7 +21,6 @@ export default class CombineAssetsPlugin {
 
           // We add each matched asset from this.input to a new bundle
           concat.add(asset)
-
           // The original assets are kept because they show up when analyzing the bundle using webpack-bundle-analyzer
           // See https://github.com/zeit/next.js/tree/canary/examples/with-webpack-bundle-analyzer
         })