From d78bf76c76ebe8ee8b644e5d40d24e1ca7eda710 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Tue, 22 Nov 2016 15:40:59 +0530
Subject: [PATCH 01/15] Add example app which demonstrate the problem.

---
 examples/shared-modules/components/Counter.js | 19 ++++++++++++++++++
 examples/shared-modules/components/Header.js  | 20 +++++++++++++++++++
 examples/shared-modules/pages/about.js        | 11 ++++++++++
 examples/shared-modules/pages/index.js        | 11 ++++++++++
 4 files changed, 61 insertions(+)
 create mode 100644 examples/shared-modules/components/Counter.js
 create mode 100644 examples/shared-modules/components/Header.js
 create mode 100644 examples/shared-modules/pages/about.js
 create mode 100644 examples/shared-modules/pages/index.js
diff --git a/examples/shared-modules/components/Counter.js b/examples/shared-modules/components/Counter.js
new file mode 100644
index 0000000000000..959d8ae96f22d
--- /dev/null
+++ b/examples/shared-modules/components/Counter.js
@@ -0,0 +1,19 @@
+import React from 'react'
+
+let count = 0
+
+export default class Counter extends React.Component {
+  add () {
+    count += 1
+    this.forceUpdate()
+  }
+
+  render () {
+    return (
+      <div>
+        <p>Count is: {count}</p>
+        <button onClick={() => this.add()}>Add</button>
+      </div>
+    )
+  }
+}
diff --git a/examples/shared-modules/components/Header.js b/examples/shared-modules/components/Header.js
new file mode 100644
index 0000000000000..52c6b543cc31b
--- /dev/null
+++ b/examples/shared-modules/components/Header.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import Link from 'next/link'
+
+const styles = {
+  a: {
+    marginRight: 10
+  }
+}
+
+export default () => (
+  <div>
+    <Link href='/'>
+      <a style={styles.a} >Home</a>
+    </Link>
+
+    <Link href='/about'>
+      <a style={styles.a} >About</a>
+    </Link>
+  </div>
+)
diff --git a/examples/shared-modules/pages/about.js b/examples/shared-modules/pages/about.js
new file mode 100644
index 0000000000000..f7122c7c91e48
--- /dev/null
+++ b/examples/shared-modules/pages/about.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import Header from '../components/Header'
+import Counter from '../components/Counter'
+
+export default () => (
+  <div>
+    <Header />
+    <p>This is the about page.</p>
+    <Counter />
+  </div>
+)
diff --git a/examples/shared-modules/pages/index.js b/examples/shared-modules/pages/index.js
new file mode 100644
index 0000000000000..d3dcba1de59b6
--- /dev/null
+++ b/examples/shared-modules/pages/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import Header from '../components/Header'
+import Counter from '../components/Counter'
+
+export default () => (
+  <div>
+    <Header />
+    <p>HOME PAGE is here!</p>
+    <Counter />
+  </div>
+)

From d66854a16ad0c840aec9d550955f34b9bcdf7477 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Tue, 22 Nov 2016 16:08:06 +0530
Subject: [PATCH 02/15] Add the first working version.

---
 lib/document.js         |  1 +
 server/build/webpack.js | 15 +++++----------
 server/index.js         |  5 +++++
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/lib/document.js b/lib/document.js
index 9cef4a64d8b56..e814baf09095f 100644
--- a/lib/document.js
+++ b/lib/document.js
@@ -11,6 +11,7 @@ export default ({ head, css, html, data, dev, staticMarkup, cdn }) => {
     <body>
       <div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
       {staticMarkup ? null : <script dangerouslySetInnerHTML={{ __html: '__NEXT_DATA__ = ' + htmlescape(data) }} />}
+      <script type='text/javascript' src='/vendor.js' />
       {staticMarkup ? null : createClientScript({ dev, cdn })}
     </body>
   </html>
diff --git a/server/build/webpack.js b/server/build/webpack.js
index 871cd8c63730b..7ccb6886f6392 100644
--- a/server/build/webpack.js
+++ b/server/build/webpack.js
@@ -14,6 +14,7 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
   const pages = await glob('pages/**/*.js', { cwd: dir })
 
   const entry = {}
+
   const defaultEntries = hotReload ? ['webpack/hot/dev-server'] : []
   for (const p of pages) {
     entry[join('bundles', p)] = defaultEntries.concat(['./' + p])
@@ -39,6 +40,10 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
       log: false,
       // required not to cache removed files
       useHashIndex: false
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      filename: 'vendor.js'
     })
   ]
 
@@ -146,16 +151,6 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
       libraryTarget: 'commonjs2',
       publicPath: hotReload ? 'http://localhost:3030/' : null
     },
-    externals: [
-      'react',
-      'react-dom',
-      {
-        [require.resolve('react')]: 'react',
-        [require.resolve('../../lib/link')]: 'next/link',
-        [require.resolve('../../lib/css')]: 'next/css',
-        [require.resolve('../../lib/head')]: 'next/head'
-      }
-    ],
     resolve: {
       root: [
         nodeModulesDir,
diff --git a/server/index.js b/server/index.js
index 378976b12f488..6425975b755fd 100644
--- a/server/index.js
+++ b/server/index.js
@@ -40,6 +40,11 @@ export default class Server {
   }
 
   defineRoutes () {
+    this.router.get('/vendor.js', async (req, res, params) => {
+      const p = join(this.dir, '.next/vendor.js')
+      await this.serveStatic(req, res, p)
+    })
+
     this.router.get('/_next/:path+', async (req, res, params) => {
       const p = join(__dirname, '..', 'client', ...(params.path || []))
       await this.serveStatic(req, res, p)

From fbd95d95afce7dc481f824a0d4239786fd3f8ff0 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Tue, 22 Nov 2016 18:09:30 +0530
Subject: [PATCH 03/15] Fix lint issues.

---
 gulpfile.js             | 62 +----------------------------------------
 lib/document.js         | 36 +++---------------------
 package.json            |  3 +-
 server/build/webpack.js | 10 +++++--
 server/index.js         |  9 ++----
 5 files changed, 15 insertions(+), 105 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index cfddb93d12539..7c75421da82b0 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,7 +5,6 @@ const notify_ = require('gulp-notify')
 const ava = require('gulp-ava')
 const benchmark = require('gulp-benchmark')
 const sequence = require('run-sequence')
-const webpack = require('webpack-stream')
 const del = require('del')
 
 const babelOptions = {
@@ -91,67 +90,8 @@ gulp.task('copy-bench-fixtures', () => {
 })
 
 gulp.task('build', [
-  'build-dev-client',
-  'build-client'
-])
 
-gulp.task('build-dev-client', ['compile-lib', 'compile-client'], () => {
-  return gulp
-  .src('dist/client/next-dev.js')
-  .pipe(webpack({
-    quiet: true,
-    output: { filename: 'next-dev.bundle.js' },
-    module: {
-      loaders: [
-        {
-          test: /eval-script\.js$/,
-          exclude: /node_modules/,
-          loader: 'babel',
-          query: {
-            plugins: [
-              'babel-plugin-transform-remove-strict-mode'
-            ]
-          }
-        }
-      ]
-    }
-  }))
-  .pipe(gulp.dest('dist/client'))
-  .pipe(notify('Built dev client'))
-})
-
-gulp.task('build-client', ['compile-lib', 'compile-client'], () => {
-  return gulp
-  .src('dist/client/next.js')
-  .pipe(webpack({
-    quiet: true,
-    output: { filename: 'next.bundle.js' },
-    plugins: [
-      new webpack.webpack.DefinePlugin({
-        'process.env': {
-          NODE_ENV: JSON.stringify('production')
-        }
-      }),
-      new webpack.webpack.optimize.UglifyJsPlugin()
-    ],
-    module: {
-      loaders: [
-        {
-          test: /eval-script\.js$/,
-          exclude: /node_modules/,
-          loader: 'babel',
-          query: {
-            plugins: [
-              'babel-plugin-transform-remove-strict-mode'
-            ]
-          }
-        }
-      ]
-    }
-  }))
-  .pipe(gulp.dest('dist/client'))
-  .pipe(notify('Built release client'))
-})
+])
 
 gulp.task('test', ['compile', 'copy', 'compile-test', 'copy-test-fixtures'], () => {
   return gulp.src('dist/test/*.js')
diff --git a/lib/document.js b/lib/document.js
index e814baf09095f..9a97fcaff35f2 100644
--- a/lib/document.js
+++ b/lib/document.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import htmlescape from 'htmlescape'
-import pkg from '../../package.json'
 
 export default ({ head, css, html, data, dev, staticMarkup, cdn }) => {
   return <html>
@@ -10,37 +9,10 @@ export default ({ head, css, html, data, dev, staticMarkup, cdn }) => {
     </head>
     <body>
       <div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
-      {staticMarkup ? null : <script dangerouslySetInnerHTML={{ __html: '__NEXT_DATA__ = ' + htmlescape(data) }} />}
-      <script type='text/javascript' src='/vendor.js' />
-      {staticMarkup ? null : createClientScript({ dev, cdn })}
+      {staticMarkup ? null : <script dangerouslySetInnerHTML={{
+        __html: `__NEXT_DATA__ =${htmlescape(data)}; module={};`
+      }} />}
+      <script type='text/javascript' src='/main.js' />
     </body>
   </html>
 }
-
-function createClientScript ({ dev, cdn }) {
-  if (dev) {
-    return <script type='text/javascript' src='/_next/next-dev.bundle.js' />
-  }
-
-  if (!cdn) {
-    return <script type='text/javascript' src='/_next/next.bundle.js' />
-  }
-
-  return <script dangerouslySetInnerHTML={{ __html: `
-    (function () {
-      load('https://cdn.zeit.co/next.js/${pkg.version}/next.min.js', function (err) {
-        if (err) load('/_next/next.bundle.js')
-      })
-
-      function load (src, fn) {
-        fn = fn || function () {}
-        var script = document.createElement('script')
-        script.src = src
-        script.onload = function () { fn(null) }
-        script.onerror = fn
-        script.crossorigin = 'anonymous'
-        document.head.appendChild(script)
-      }
-    })()
-  `}} />
-}
diff --git a/package.json b/package.json
index ae09ca71aaeac..173f05d6a2b4f 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,6 @@
     "gulp-notify": "2.2.0",
     "husky": "0.11.9",
     "run-sequence": "1.2.2",
-    "standard": "8.5.0",
-    "webpack-stream": "3.2.0"
+    "standard": "8.5.0"
   }
 }
diff --git a/server/build/webpack.js b/server/build/webpack.js
index 7ccb6886f6392..0225fad305235 100644
--- a/server/build/webpack.js
+++ b/server/build/webpack.js
@@ -13,7 +13,11 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
 
   const pages = await glob('pages/**/*.js', { cwd: dir })
 
-  const entry = {}
+  const entry = {
+    'main': [
+      dev ? require.resolve('../../client/next-dev.js') : require.resolve('../../client/next.js')
+    ]
+  }
 
   const defaultEntries = hotReload ? ['webpack/hot/dev-server'] : []
   for (const p of pages) {
@@ -42,8 +46,8 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
       useHashIndex: false
     }),
     new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      filename: 'vendor.js'
+      name: 'main',
+      filename: 'main.js'
     })
   ]
 
diff --git a/server/index.js b/server/index.js
index 6425975b755fd..b02fb742c6d6e 100644
--- a/server/index.js
+++ b/server/index.js
@@ -40,13 +40,8 @@ export default class Server {
   }
 
   defineRoutes () {
-    this.router.get('/vendor.js', async (req, res, params) => {
-      const p = join(this.dir, '.next/vendor.js')
-      await this.serveStatic(req, res, p)
-    })
-
-    this.router.get('/_next/:path+', async (req, res, params) => {
-      const p = join(__dirname, '..', 'client', ...(params.path || []))
+    this.router.get('/main.js', async (req, res, params) => {
+      const p = join(this.dir, '.next/main.js')
       await this.serveStatic(req, res, p)
     })
 

From c471cae8db1abd049c9f4dab0b165b18047219ce Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Tue, 22 Nov 2016 18:16:46 +0530
Subject: [PATCH 04/15] Add README.md

---
 examples/shared-modules/README.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 examples/shared-modules/README.md

diff --git a/examples/shared-modules/README.md b/examples/shared-modules/README.md
new file mode 100644
index 0000000000000..c19255f7f6b35
--- /dev/null
+++ b/examples/shared-modules/README.md
@@ -0,0 +1,22 @@
+# Example app using shared modules
+
+This example features:
+
+* An app with two pages which has a Counter component
+* That Counter component maintain the counter inside it's module.
+
+## How to run it
+
+Install dependencies on main project and build dependencies.
+
+```sh
+cd ../../
+npm i
+npm run dev
+```
+
+To run this project:
+
+```sh
+../../dist/bin/next
+```

From 607faab14c72e2ec9cccd9f4c7855a3fa625071b Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Tue, 22 Nov 2016 21:25:07 +0530
Subject: [PATCH 05/15] Use /_next/main.js as the main file URI

---
 lib/document.js | 2 +-
 server/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/document.js b/lib/document.js
index 9a97fcaff35f2..a44b7259da857 100644
--- a/lib/document.js
+++ b/lib/document.js
@@ -12,7 +12,7 @@ export default ({ head, css, html, data, dev, staticMarkup, cdn }) => {
       {staticMarkup ? null : <script dangerouslySetInnerHTML={{
         __html: `__NEXT_DATA__ =${htmlescape(data)}; module={};`
       }} />}
-      <script type='text/javascript' src='/main.js' />
+      <script type='text/javascript' src='/_next/main.js' />
     </body>
   </html>
 }
diff --git a/server/index.js b/server/index.js
index b02fb742c6d6e..81edcf0dfc930 100644
--- a/server/index.js
+++ b/server/index.js
@@ -40,7 +40,7 @@ export default class Server {
   }
 
   defineRoutes () {
-    this.router.get('/main.js', async (req, res, params) => {
+    this.router.get('/_next/main.js', async (req, res, params) => {
       const p = join(this.dir, '.next/main.js')
       await this.serveStatic(req, res, p)
     })

From a9a95b2701fc4d14a17bf3f4bb20e74854d9aa96 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Wed, 23 Nov 2016 08:31:23 +0530
Subject: [PATCH 06/15] Add the support for loading the core next bundle.

---
 client/next-dev.js                   |  3 +-
 client/next.js                       | 18 ++++----
 client/require.js                    | 17 ++++++++
 examples/shared-modules/package.json | 14 +++++++
 gulpfile.js                          | 62 +++++++++++++++++++++++++++-
 lib/document.js                      | 29 +++++++++++++
 package.json                         |  3 +-
 server/build/webpack.js              | 14 ++++---
 server/index.js                      |  5 +++
 9 files changed, 148 insertions(+), 17 deletions(-)
 create mode 100644 client/require.js
 create mode 100644 examples/shared-modules/package.json

diff --git a/client/next-dev.js b/client/next-dev.js
index 823107bbf5e95..fafb7b0c3e894 100644
--- a/client/next-dev.js
+++ b/client/next-dev.js
@@ -2,6 +2,5 @@ import 'react-hot-loader/patch'
 import './webpack-dev-client?http://localhost:3030'
 import * as next from './next'
 
-module.exports = next
-
 window.next = next
+module.exports = require('./require')
diff --git a/client/next.js b/client/next.js
index 6c8429d07db7b..ced7f7410a4c1 100644
--- a/client/next.js
+++ b/client/next.js
@@ -10,13 +10,17 @@ const {
   __NEXT_DATA__: { component, props, ids, err }
 } = window
 
-const Component = evalScript(component).default
+document.addEventListener('DOMContentLoaded', () => {
+  const Component = evalScript(component).default
 
-export const router = new Router(window.location.href, { Component, ctx: { err } })
+  const router = new Router(window.location.href, { Component, ctx: { err } })
 
-const headManager = new HeadManager()
-const container = document.getElementById('__next')
-const appProps = { Component, props, router, headManager }
+  const headManager = new HeadManager()
+  const container = document.getElementById('__next')
+  const appProps = { Component, props, router, headManager }
 
-rehydrate(ids)
-render(createElement(App, appProps), container)
+  rehydrate(ids)
+  render(createElement(App, appProps), container)
+})
+
+module.exports = require('./require')
diff --git a/client/require.js b/client/require.js
new file mode 100644
index 0000000000000..e0878133a6481
--- /dev/null
+++ b/client/require.js
@@ -0,0 +1,17 @@
+const moduleStore = {
+  'react': require('react'),
+  'react-dom': require('react-dom'),
+  'next/link': require('../lib/link'),
+  'next/css': require('../lib/css'),
+  'next/head': require('../lib/head')
+}
+
+module.exports = function (moduleName) {
+  let name = moduleName
+  const m = moduleStore[name]
+  if (!m) {
+    throw new Error(`Module "${moduleName}" is not exists in the bundle`)
+  }
+
+  return m
+}
diff --git a/examples/shared-modules/package.json b/examples/shared-modules/package.json
new file mode 100644
index 0000000000000..d22050fe92095
--- /dev/null
+++ b/examples/shared-modules/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "shared-modules",
+  "version": "1.0.0",
+  "description": "This example features:",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "next": {
+    "cdn": false
+  }
+}
diff --git a/gulpfile.js b/gulpfile.js
index 7c75421da82b0..cd936ff3646a5 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,6 +5,7 @@ const notify_ = require('gulp-notify')
 const ava = require('gulp-ava')
 const benchmark = require('gulp-benchmark')
 const sequence = require('run-sequence')
+const webpack = require('webpack-stream')
 const del = require('del')
 
 const babelOptions = {
@@ -90,9 +91,68 @@ gulp.task('copy-bench-fixtures', () => {
 })
 
 gulp.task('build', [
-
+  'build-dev-client',
+  'build-client'
 ])
 
+gulp.task('build-dev-client', ['compile-lib', 'compile-client'], () => {
+  return gulp
+  .src('dist/client/next-dev.js')
+  .pipe(webpack({
+    quiet: true,
+    output: { filename: 'next-dev.bundle.js', libraryTarget: 'var', library: 'require' },
+    module: {
+      loaders: [
+        {
+          test: /eval-script\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel',
+          query: {
+            plugins: [
+              'babel-plugin-transform-remove-strict-mode'
+            ]
+          }
+        }
+      ]
+    }
+  }))
+  .pipe(gulp.dest('dist/client'))
+  .pipe(notify('Built dev client'))
+})
+
+gulp.task('build-client', ['compile-lib', 'compile-client'], () => {
+  return gulp
+  .src('dist/client/next.js')
+  .pipe(webpack({
+    quiet: true,
+    output: { filename: 'next.bundle.js', libraryTarget: 'var', library: 'require' },
+    plugins: [
+      new webpack.webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify('production')
+        }
+      }),
+      new webpack.webpack.optimize.UglifyJsPlugin()
+    ],
+    module: {
+      loaders: [
+        {
+          test: /eval-script\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel',
+          query: {
+            plugins: [
+              'babel-plugin-transform-remove-strict-mode'
+            ]
+          }
+        }
+      ]
+    }
+  }))
+  .pipe(gulp.dest('dist/client'))
+  .pipe(notify('Built release client'))
+})
+
 gulp.task('test', ['compile', 'copy', 'compile-test', 'copy-test-fixtures'], () => {
   return gulp.src('dist/test/*.js')
   .pipe(ava())
diff --git a/lib/document.js b/lib/document.js
index a44b7259da857..4955dd6830870 100644
--- a/lib/document.js
+++ b/lib/document.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import htmlescape from 'htmlescape'
+import pkg from '../../package.json'
 
 export default ({ head, css, html, data, dev, staticMarkup, cdn }) => {
   return <html>
@@ -12,7 +13,35 @@ export default ({ head, css, html, data, dev, staticMarkup, cdn }) => {
       {staticMarkup ? null : <script dangerouslySetInnerHTML={{
         __html: `__NEXT_DATA__ =${htmlescape(data)}; module={};`
       }} />}
+      {staticMarkup ? null : createClientScript({ dev, cdn })}
       <script type='text/javascript' src='/_next/main.js' />
     </body>
   </html>
 }
+
+function createClientScript ({ dev, cdn }) {
+  if (dev) {
+    return <script type='text/javascript' src='/_next/next-dev.bundle.js' />
+  }
+
+  if (!cdn) {
+    return <script type='text/javascript' src='/_next/next.bundle.js' />
+  }
+
+  return <script dangerouslySetInnerHTML={{ __html: `
+    (function () {
+      load('https://cdn.zeit.co/next.js/${pkg.version}/next.min.js', function (err) {
+        if (err) load('/_next/next.bundle.js')
+      })
+      function load (src, fn) {
+        fn = fn || function () {}
+        var script = document.createElement('script')
+        script.src = src
+        script.onload = function () { fn(null) }
+        script.onerror = fn
+        script.crossorigin = 'anonymous'
+        document.head.appendChild(script)
+      }
+    })()
+  `}} />
+}
diff --git a/package.json b/package.json
index 173f05d6a2b4f..2f6904ee65fcf 100644
--- a/package.json
+++ b/package.json
@@ -55,11 +55,12 @@
     "react-dom": "15.4.0",
     "react-hot-loader": "3.0.0-beta.6",
     "send": "0.14.1",
+    "sockjs-client": "1.1.1",
     "strip-ansi": "3.0.1",
     "url": "0.11.0",
     "webpack": "1.13.3",
     "webpack-dev-server": "1.16.2",
-    "sockjs-client": "1.1.1",
+    "webpack-stream": "^3.2.0",
     "write-file-webpack-plugin": "3.4.2"
   },
   "devDependencies": {
diff --git a/server/build/webpack.js b/server/build/webpack.js
index 0225fad305235..3f2bd1eb8d01f 100644
--- a/server/build/webpack.js
+++ b/server/build/webpack.js
@@ -13,11 +13,7 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
 
   const pages = await glob('pages/**/*.js', { cwd: dir })
 
-  const entry = {
-    'main': [
-      dev ? require.resolve('../../client/next-dev.js') : require.resolve('../../client/next.js')
-    ]
-  }
+  const entry = {}
 
   const defaultEntries = hotReload ? ['webpack/hot/dev-server'] : []
   for (const p of pages) {
@@ -130,7 +126,6 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
           {
             alias: {
               'babel-runtime': babelRuntimePath,
-              react: require.resolve('react'),
               'next/link': require.resolve('../../lib/link'),
               'next/css': require.resolve('../../lib/css'),
               'next/head': require.resolve('../../lib/head')
@@ -155,6 +150,13 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
       libraryTarget: 'commonjs2',
       publicPath: hotReload ? 'http://localhost:3030/' : null
     },
+    externals: [
+      'react',
+      'react-dom',
+      'next/link',
+      'next/css',
+      'next/head'
+    ],
     resolve: {
       root: [
         nodeModulesDir,
diff --git a/server/index.js b/server/index.js
index 81edcf0dfc930..d184b1c07cd0d 100644
--- a/server/index.js
+++ b/server/index.js
@@ -45,6 +45,11 @@ export default class Server {
       await this.serveStatic(req, res, p)
     })
 
+    this.router.get('/_next/:path+', async (req, res, params) => {
+      const p = join(__dirname, '..', 'client', ...(params.path || []))
+      await this.serveStatic(req, res, p)
+    })
+
     this.router.get('/static/:path+', async (req, res, params) => {
       const p = join(this.dir, 'static', ...(params.path || []))
       await this.serveStatic(req, res, p)

From 44b7748a91e58c6e86cc5d0ca36d77636892f0e8 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Wed, 23 Nov 2016 09:25:28 +0530
Subject: [PATCH 07/15] Optimize the output by removing Next modules from
 pages.

---
 examples/shared-modules/README.md |  2 +-
 gulpfile.js                       |  4 ++++
 server/build/webpack.js           | 19 +++++++++++++------
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/examples/shared-modules/README.md b/examples/shared-modules/README.md
index c19255f7f6b35..cc55195e1a04c 100644
--- a/examples/shared-modules/README.md
+++ b/examples/shared-modules/README.md
@@ -18,5 +18,5 @@ npm run dev
 To run this project:
 
 ```sh
-../../dist/bin/next
+NEXT_DEV=1 ../../dist/bin/next
 ```
diff --git a/gulpfile.js b/gulpfile.js
index cd936ff3646a5..caa5e57de8231 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,6 +8,10 @@ const sequence = require('run-sequence')
 const webpack = require('webpack-stream')
 const del = require('del')
 
+// Notify that we are in the next dev mode.
+// So, build output will adust accordingly (may prodduce less optimized code)
+process.env.NEXT_DEV = '1'
+
 const babelOptions = {
   presets: ['es2015', 'react'],
   plugins: [
diff --git a/server/build/webpack.js b/server/build/webpack.js
index 3f2bd1eb8d01f..7b8037fa023ee 100644
--- a/server/build/webpack.js
+++ b/server/build/webpack.js
@@ -34,6 +34,18 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
 
   const nodeModulesDir = join(__dirname, '..', '..', '..', 'node_modules')
 
+  const alias = {
+    'babel-runtime': babelRuntimePath
+  }
+
+  // Alias next's API in the next dev mode.
+  // This is only required when developing Next.js
+  if (process.env.NEXT_DEV) {
+    alias['next/link'] = require.resolve('../../lib/link')
+    alias['next/css'] = require.resolve('../../lib/css')
+    alias['next/head'] = require.resolve('../../lib/head')
+  }
+
   const plugins = [
     new WriteFilePlugin({
       exitOnErrors: false,
@@ -124,12 +136,7 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
         [
           require.resolve('babel-plugin-module-resolver'),
           {
-            alias: {
-              'babel-runtime': babelRuntimePath,
-              'next/link': require.resolve('../../lib/link'),
-              'next/css': require.resolve('../../lib/css'),
-              'next/head': require.resolve('../../lib/head')
-            }
+            alias
           }
         ]
       ]

From d2bc66ebc28aa4a97d1ea7468172479dafef32da Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Sun, 27 Nov 2016 04:55:59 +0530
Subject: [PATCH 08/15] Use the same package.json as master use.

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 293b885ae9744..4e4a6ea024a79 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,6 @@
     "react-dom": "15.4.0",
     "react-hot-loader": "3.0.0-beta.6",
     "send": "0.14.1",
-    "sockjs-client": "1.1.1",
     "strip-ansi": "3.0.1",
     "url": "0.11.0",
     "webpack": "1.13.3",
@@ -77,6 +76,6 @@
     "husky": "0.11.9",
     "run-sequence": "1.2.2",
     "standard": "8.5.0",
-    "webpack-stream": "^3.2.0"
+    "webpack-stream": "3.2.0"
   }
 }

From e5e2d676afa362fc7fd32aeaeb66aa1122fda98d Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Sun, 27 Nov 2016 05:07:41 +0530
Subject: [PATCH 09/15] Change the example repo's README for simpler
 instructions.

---
 examples/shared-modules/README.md    | 13 ++-----------
 examples/shared-modules/package.json |  5 ++++-
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/examples/shared-modules/README.md b/examples/shared-modules/README.md
index cc55195e1a04c..08195e90a1142 100644
--- a/examples/shared-modules/README.md
+++ b/examples/shared-modules/README.md
@@ -2,21 +2,12 @@
 
 This example features:
 
-* An app with two pages which has a Counter component
+* An app with two pages which has a common Counter component
 * That Counter component maintain the counter inside it's module.
 
 ## How to run it
 
-Install dependencies on main project and build dependencies.
-
 ```sh
-cd ../../
-npm i
+npm install
 npm run dev
 ```
-
-To run this project:
-
-```sh
-NEXT_DEV=1 ../../dist/bin/next
-```
diff --git a/examples/shared-modules/package.json b/examples/shared-modules/package.json
index d22050fe92095..786dee75f795a 100644
--- a/examples/shared-modules/package.json
+++ b/examples/shared-modules/package.json
@@ -4,7 +4,10 @@
   "description": "This example features:",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "next"
+  },
+  "dependencies": {
+    "next": "*"
   },
   "author": "",
   "license": "ISC",

From 44705b136c02fdcab5f4598d8a07d8367b3b308f Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Sun, 27 Nov 2016 05:30:00 +0530
Subject: [PATCH 10/15] Change example projects package.json to support next
 build and start.

---
 examples/shared-modules/package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/shared-modules/package.json b/examples/shared-modules/package.json
index 786dee75f795a..aeb6e6b5e5cc3 100644
--- a/examples/shared-modules/package.json
+++ b/examples/shared-modules/package.json
@@ -4,7 +4,9 @@
   "description": "This example features:",
   "main": "index.js",
   "scripts": {
-    "dev": "next"
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
   },
   "dependencies": {
     "next": "*"

From f013bd2aa438c6e6ea2bd15d6a130cbf70e67c17 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Sun, 27 Nov 2016 05:30:38 +0530
Subject: [PATCH 11/15] Change main.js into commons.js.

---
 lib/document.js         | 2 +-
 server/build/webpack.js | 4 ++--
 server/index.js         | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/document.js b/lib/document.js
index 4955dd6830870..8dd5ec53e2d95 100644
--- a/lib/document.js
+++ b/lib/document.js
@@ -14,7 +14,7 @@ export default ({ head, css, html, data, dev, staticMarkup, cdn }) => {
         __html: `__NEXT_DATA__ =${htmlescape(data)}; module={};`
       }} />}
       {staticMarkup ? null : createClientScript({ dev, cdn })}
-      <script type='text/javascript' src='/_next/main.js' />
+      <script type='text/javascript' src='/_next/commons.js' />
     </body>
   </html>
 }
diff --git a/server/build/webpack.js b/server/build/webpack.js
index 2c4707e41d266..47839ae6e2877 100644
--- a/server/build/webpack.js
+++ b/server/build/webpack.js
@@ -53,8 +53,8 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
       useHashIndex: false
     }),
     new webpack.optimize.CommonsChunkPlugin({
-      name: 'main',
-      filename: 'main.js'
+      name: 'commons',
+      filename: 'commons.js'
     })
   ]
 
diff --git a/server/index.js b/server/index.js
index 27f5d65373a13..ff3ae803cefd5 100644
--- a/server/index.js
+++ b/server/index.js
@@ -40,8 +40,8 @@ export default class Server {
   }
 
   defineRoutes () {
-    this.router.get('/_next/main.js', async (req, res, params) => {
-      const p = join(this.dir, '.next/main.js')
+    this.router.get('/_next/commons.js', async (req, res, params) => {
+      const p = join(this.dir, '.next/commons.js')
       await this.serveStatic(req, res, p)
     })
 

From 57cea7a3b87d3d9e5eaeba7a8257c8ccc88e1076 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Sun, 27 Nov 2016 06:44:12 +0530
Subject: [PATCH 12/15] Add support for hot core reload and errors.

---
 client/next.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/next.js b/client/next.js
index b55269c195920..763e42b787c2b 100644
--- a/client/next.js
+++ b/client/next.js
@@ -20,6 +20,9 @@ document.addEventListener('DOMContentLoaded', () => {
     ctx: { err }
   })
 
+  // This it to support error handling in the dev time with hot code reload.
+  window.next.router = router
+
   const headManager = new HeadManager()
   const container = document.getElementById('__next')
   const appProps = { Component, props, router, headManager }

From d0120875f9d8c0673598b800917341be9d25a198 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Mon, 28 Nov 2016 04:41:18 +0530
Subject: [PATCH 13/15] Introduce require based on eval-script.

---
 client/next-dev.js      |  3 ++-
 client/next.js          |  6 +++---
 client/require.js       | 17 -----------------
 gulpfile.js             |  4 ----
 lib/eval-script.js      | 15 +++++++++++----
 server/build/webpack.js | 29 +++++++++++++----------------
 6 files changed, 29 insertions(+), 45 deletions(-)
 delete mode 100644 client/require.js

diff --git a/client/next-dev.js b/client/next-dev.js
index 12786c3fa9f56..f46e885524f2f 100644
--- a/client/next-dev.js
+++ b/client/next-dev.js
@@ -1,5 +1,6 @@
 import 'react-hot-loader/patch'
 import * as next from './next'
+import { requireModule } from '../lib/eval-script'
 
 window.next = next
-module.exports = require('./require')
+module.exports = requireModule
diff --git a/client/next.js b/client/next.js
index 763e42b787c2b..cd5e56066721a 100644
--- a/client/next.js
+++ b/client/next.js
@@ -4,7 +4,7 @@ import HeadManager from './head-manager'
 import { rehydrate } from '../lib/css'
 import Router from '../lib/router'
 import App from '../lib/app'
-import evalScript from '../lib/eval-script'
+import evalScript, { requireModule } from '../lib/eval-script'
 
 const {
   __NEXT_DATA__: { component, errorComponent, props, ids, err }
@@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', () => {
   })
 
   // This it to support error handling in the dev time with hot code reload.
-  window.next.router = router
+  module.exports.router = router
 
   const headManager = new HeadManager()
   const container = document.getElementById('__next')
@@ -31,4 +31,4 @@ document.addEventListener('DOMContentLoaded', () => {
   render(createElement(App, appProps), container)
 })
 
-module.exports = require('./require')
+module.exports = requireModule
diff --git a/client/require.js b/client/require.js
deleted file mode 100644
index e0878133a6481..0000000000000
--- a/client/require.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const moduleStore = {
-  'react': require('react'),
-  'react-dom': require('react-dom'),
-  'next/link': require('../lib/link'),
-  'next/css': require('../lib/css'),
-  'next/head': require('../lib/head')
-}
-
-module.exports = function (moduleName) {
-  let name = moduleName
-  const m = moduleStore[name]
-  if (!m) {
-    throw new Error(`Module "${moduleName}" is not exists in the bundle`)
-  }
-
-  return m
-}
diff --git a/gulpfile.js b/gulpfile.js
index 39d169452c69e..1332c82881c38 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,10 +8,6 @@ const sequence = require('run-sequence')
 const webpack = require('webpack-stream')
 const del = require('del')
 
-// Notify that we are in the next dev mode.
-// So, build output will adust accordingly (may prodduce less optimized code)
-process.env.NEXT_DEV = '1'
-
 const babelOptions = {
   presets: ['es2015', 'react'],
   plugins: [
diff --git a/lib/eval-script.js b/lib/eval-script.js
index 58b775f4af0c0..335384a6352b1 100644
--- a/lib/eval-script.js
+++ b/lib/eval-script.js
@@ -14,6 +14,17 @@ const modules = new Map([
   ['next/head', Head]
 ])
 
+function require (moduleName) {
+  const name = moduleName
+  const m = modules.get(name)
+
+  if (m) return m
+
+  throw new Error(`Module "${moduleName}" is not exists in the bundle`)
+}
+
+export const requireModule = require
+
 /**
  * IMPORTANT: This module is compiled *without* `use strict`
  * so that when we `eval` a dependency below, we don't enforce
@@ -28,10 +39,6 @@ const modules = new Map([
 
 export default function evalScript (script) {
   const module = { exports: {} }
-  const require = function (path) { // eslint-disable-line no-unused-vars
-    return modules.get(path)
-  }
-  // don't use Function() here since it changes source locations
   eval(script) // eslint-disable-line no-eval
   return module.exports
 }
diff --git a/server/build/webpack.js b/server/build/webpack.js
index 47839ae6e2877..df8049c70443c 100644
--- a/server/build/webpack.js
+++ b/server/build/webpack.js
@@ -33,18 +33,6 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
 
   const nodeModulesDir = join(__dirname, '..', '..', '..', 'node_modules')
 
-  const alias = {
-    'babel-runtime': babelRuntimePath
-  }
-
-  // Alias next's API in the next dev mode.
-  // This is only required when developing Next.js
-  if (process.env.NEXT_DEV) {
-    alias['next/link'] = require.resolve('../../lib/link')
-    alias['next/css'] = require.resolve('../../lib/css')
-    alias['next/head'] = require.resolve('../../lib/head')
-  }
-
   const plugins = [
     new WriteFilePlugin({
       exitOnErrors: false,
@@ -137,7 +125,13 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
         [
           require.resolve('babel-plugin-module-resolver'),
           {
-            alias
+            alias: {
+              'babel-runtime': babelRuntimePath,
+              react: require.resolve('react'),
+              'next/link': require.resolve('../../lib/link'),
+              'next/css': require.resolve('../../lib/css'),
+              'next/head': require.resolve('../../lib/head')
+            }
           }
         ]
       ]
@@ -161,9 +155,12 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
     externals: [
       'react',
       'react-dom',
-      'next/link',
-      'next/css',
-      'next/head'
+      {
+        [require.resolve('react')]: 'react',
+        [require.resolve('../../lib/link')]: 'next/link',
+        [require.resolve('../../lib/css')]: 'next/css',
+        [require.resolve('../../lib/head')]: 'next/head'
+      }
     ],
     resolve: {
       root: [

From f4395ceec3c522623174d0cab1069fcd74756f85 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Mon, 28 Nov 2016 04:47:38 +0530
Subject: [PATCH 14/15] Add error reporting support with hot reloading.

---
 client/next.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/next.js b/client/next.js
index cd5e56066721a..00333dd1b5236 100644
--- a/client/next.js
+++ b/client/next.js
@@ -21,7 +21,9 @@ document.addEventListener('DOMContentLoaded', () => {
   })
 
   // This it to support error handling in the dev time with hot code reload.
-  module.exports.router = router
+  if (window.next) {
+    window.next.router = router
+  }
 
   const headManager = new HeadManager()
   const container = document.getElementById('__next')

From b998a50cde08aa5417cfd423efb313dab6950252 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Mon, 28 Nov 2016 05:09:51 +0530
Subject: [PATCH 15/15] Update README.md

---
 examples/shared-modules/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/shared-modules/README.md b/examples/shared-modules/README.md
index 08195e90a1142..1e629fd9b8107 100644
--- a/examples/shared-modules/README.md
+++ b/examples/shared-modules/README.md
@@ -3,7 +3,7 @@
 This example features:
 
 * An app with two pages which has a common Counter component
-* That Counter component maintain the counter inside it's module.
+* That Counter component maintain the counter inside its module.
 
 ## How to run it
 
