Source map support (#279)

* generate source-maps on development

* remove unused dep

bin/next-dev

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

package.json

@@ -82,6 +82,7 @@
     "react-hot-loader": "3.0.0-beta.6",
     "read-pkg-up": "2.0.0",
     "send": "0.14.1",
+    "source-map-support": "0.4.6",
     "strip-ansi": "3.0.1",
     "url": "0.11.0",
     "webpack": "1.13.3",

server/build/loaders/emit-file-loader.js

@@ -1,6 +1,6 @@
 import loaderUtils from 'loader-utils'
 
-module.exports = function (content) {
+module.exports = function (content, sourceMap) {
   this.cacheable()
 
   const query = loaderUtils.parseQuery(this.query)
@@ -10,7 +10,7 @@ module.exports = function (content) {
   const opts = { context, content, regExp }
   const interpolatedName = loaderUtils.interpolateName(this, name, opts)
 
-  this.emitFile(interpolatedName, content)
+  this.emitFile(interpolatedName, content, sourceMap)
 
-  return content
+  this.callback(null, content, sourceMap)
 }

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

@@ -1,11 +1,11 @@
 import { resolve, relative } from 'path'
 
-module.exports = function (content) {
+module.exports = function (content, sourceMap) {
   this.cacheable()
 
   const route = getRoute(this)
 
-  return `${content}
+  this.callback(null, `${content}
     if (module.hot) {
       module.hot.accept()
 
@@ -23,7 +23,7 @@ module.exports = function (content) {
         }
       }
     }
-  `
+  `, sourceMap)
 }
 
 const nextPagesDir = resolve(__dirname, '..', '..', '..', 'pages')

server/build/webpack.js

@@ -1,4 +1,5 @@
 import { resolve, join } from 'path'
+import { createHash } from 'crypto'
 import webpack from 'webpack'
 import glob from 'glob-promise'
 import WriteFilePlugin from 'write-file-webpack-plugin'
@@ -101,6 +102,7 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
     loader: 'babel',
     include: nextPagesDir,
     query: {
+      sourceMaps: dev ? 'both' : false,
       plugins: [
         [
           require.resolve('babel-plugin-module-resolver'),
@@ -120,6 +122,7 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
       return /node_modules/.test(str) && str.indexOf(nextPagesDir) !== 0 && str.indexOf(dir) !== 0
     },
     query: {
+      sourceMaps: dev ? 'both' : false,
       presets: ['es2015', 'react'],
       plugins: [
         require.resolve('babel-plugin-react-require'),
@@ -155,7 +158,15 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
       path: join(dir, '.next'),
       filename: '[name]',
       libraryTarget: 'commonjs2',
-      publicPath: hotReload ? '/_webpack/' : null
+      publicPath: hotReload ? '/_webpack/' : null,
+      devtoolModuleFilenameTemplate ({ resourcePath }) {
+        const hash = createHash('sha1')
+        hash.update(Date.now() + '')
+        const id = hash.digest('hex').slice(0, 7)
+
+        // append hash id for cache busting
+        return `webpack:///${resourcePath}?${id}`
+      }
     },
     externals: [
       'react',
@@ -186,6 +197,7 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
     module: {
       loaders
     },
+    devtool: dev ? 'inline-source-map' : false,
     customInterpolateName: function (url, name, opts) {
       return interpolateNames.get(this.resourcePath) || url
     }