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,7 @@ async function doRender ({ Component, props, hash, err, emitter: emitterProp = e
 
 let isInitialRender = true
 function renderReactElement (reactEl, domEl) {
-  if (isInitialRender) {
+  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'

lib/app.js

@@ -22,12 +22,6 @@ export default class App extends Component {
     }
   }
 
-  componentDidCatch (error, info) {
-    error.stack = `${error.stack}\n\n${info.componentStack}`
-    window.next.renderError(error)
-    this.setState({ hasError: true })
-  }
-
   render () {
     if (this.state.hasError) return null
 

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.5",
   "description": "Minimalistic framework for server-rendered React applications",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -68,8 +68,11 @@
     "babel-template": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "cross-spawn": "5.1.0",
+    "css-hot-loader": "1.3.4",
+    "css-loader": "0.28.7",
     "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 +81,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 +93,26 @@
     "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",
+    "stats-webpack-plugin": "0.6.1",
     "strip-ansi": "3.0.1",
+    "style-loader": "0.19.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 +138,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

@@ -2,15 +2,17 @@ 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 del from 'del'
+import webpack from 'webpack'
+import getConfig from '../config'
+import baseConfig from './webpack/base.config.js'
+// import replaceCurrentBuild from './replace'
 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)
@@ -19,26 +21,34 @@ export default async function build (dir, conf = null) {
     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([
+      baseConfig(dir, { buildId, isServer: false, config }),
+      baseConfig(dir, { buildId, isServer: true, config })
+    ])
+
+    await runCompiler(configs)
+
+    // await fs.writeFile(join(dir, '.next', 'server-stats.json'), JSON.stringify(serverStats), 'utf8')
+    // await fs.writeFile(join(dir, '.next', 'client-stats.json'), JSON.stringify(stats), 'utf8')
+
+    await writeBuildStats(dir)
+    await writeBuildId(dir, buildId)
   } catch (err) {
-    console.error(`> Failed to build on ${buildDir}`)
+    console.error(`> Failed to build`)
     throw err
   }
 
-  await replaceCurrentBuild(dir, buildDir)
+  // await replaceCurrentBuild(dir, buildDir)
 
   // no need to wait
-  del(buildDir, { force: true })
+  // 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,7 +65,7 @@ function runCompiler (compiler) {
   })
 }
 
-async function writeBuildStats (dir, stats) {
+async function writeBuildStats (dir) {
   // 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)

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

@@ -8,12 +8,13 @@ module.exports = function (content, sourceMap) {
   this.callback(null, `${content}
     (function (Component, route) {
       if (!module.hot) return
-      if (!__resourceQuery) return
+      // if (!__resourceQuery) return
 
-      var qs = require('querystring')
-      var params = qs.parse(__resourceQuery.slice(1))
-      if (params.entry == null) return
+      // var qs = require('querystring')
+      // var params = qs.parse(__resourceQuery.slice(1))
+      // if (params.entry == null) return
 
+      console.log('ACCEPTING')
       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
         })