<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">My app should be deployed to now.sh using a custom webpack config and a custom .babelrc</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Deploy fails in <code class="notranslate">next build</code> stage.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&gt; Using external babel configuration
07/12 10:59 AM (33m)
&gt; location: &quot;/home/nowuser/src/.babelrc&quot;
07/12 10:59 AM (33m)
&gt; Using &quot;webpack&quot; config function defined in next.config.js.
07/12 10:59 AM (32m)
&gt; Failed to build on /tmp/917ccbd0-55db-4437-a2c0-544b2502d880
07/12 10:59 AM (32m)
{ Error: ./pages/_document.js?entry
Module build failed: SyntaxError: Unexpected token (24:6)

  22 |   render() {
  23 |     return (
&gt; 24 |       &lt;html lang=&quot;en-US&quot;&gt;
     |       ^
  25 |         &lt;Head&gt;
  26 |           &lt;meta
  27 |             name=&quot;viewport&quot;

Error
    at transpile (/home/nowuser/src/node_modules/babel-loader/lib/index.js:64:13)
    at /home/nowuser/src/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/home/nowuser/src/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:419:13)
 @ multi ./pages/_document.js?entry
    at /home/nowuser/src/node_modules/next/dist/server/build/index.js:182:21
    at /home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:274:15
    at Compiler.emitRecords (/home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:369:37)
    at /home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:267:12
    at /home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:362:11
    at next (/home/nowuser/src/node_modules/tapable/lib/Tapable.js:154:11)
    at Compiler.compiler.plugin (/home/nowuser/src/node_modules/next/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/home/nowuser/src/node_modules/tapable/lib/Tapable.js:158:13)
    at Compiler.afterEmit (/home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:359:8)
    at Compiler.&lt;anonymous&gt; (/home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:354:14)
"><pre class="notranslate"><code class="notranslate">&gt; Using external babel configuration
07/12 10:59 AM (33m)
&gt; location: "/home/nowuser/src/.babelrc"
07/12 10:59 AM (33m)
&gt; Using "webpack" config function defined in next.config.js.
07/12 10:59 AM (32m)
&gt; Failed to build on /tmp/917ccbd0-55db-4437-a2c0-544b2502d880
07/12 10:59 AM (32m)
{ Error: ./pages/_document.js?entry
Module build failed: SyntaxError: Unexpected token (24:6)

  22 |   render() {
  23 |     return (
&gt; 24 |       &lt;html lang="en-US"&gt;
     |       ^
  25 |         &lt;Head&gt;
  26 |           &lt;meta
  27 |             name="viewport"

Error
    at transpile (/home/nowuser/src/node_modules/babel-loader/lib/index.js:64:13)
    at /home/nowuser/src/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/home/nowuser/src/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:419:13)
 @ multi ./pages/_document.js?entry
    at /home/nowuser/src/node_modules/next/dist/server/build/index.js:182:21
    at /home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:274:15
    at Compiler.emitRecords (/home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:369:37)
    at /home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:267:12
    at /home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:362:11
    at next (/home/nowuser/src/node_modules/tapable/lib/Tapable.js:154:11)
    at Compiler.compiler.plugin (/home/nowuser/src/node_modules/next/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/home/nowuser/src/node_modules/tapable/lib/Tapable.js:158:13)
    at Compiler.afterEmit (/home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:359:8)
    at Compiler.&lt;anonymous&gt; (/home/nowuser/src/node_modules/next/node_modules/webpack/lib/Compiler.js:354:14)

</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>run <code class="notranslate">now</code></li>
</ol>
<h2 dir="auto">Context</h2>


<ol dir="auto">
<li>next.config.js</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const path = require('path')
const glob = require('glob')

module.exports = {
  webpack: (config, { dev }) =&gt; {
    config.module.rules.push(
      {
        test: /\.(css|graphql|gql|scss|sass)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]',
        },
      }
      ,
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader'],
      },
      {
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map((d) =&gt; path.join(__dirname, d))
                .map((g) =&gt; glob.sync(g))
                .reduce((a, c) =&gt; a.concat(c), [])
            }
          }
        ]
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader'
      }
    )
    return config
  }
}"><pre class="notranslate"><code class="notranslate">const path = require('path')
const glob = require('glob')

module.exports = {
  webpack: (config, { dev }) =&gt; {
    config.module.rules.push(
      {
        test: /\.(css|graphql|gql|scss|sass)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]',
        },
      }
      ,
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader'],
      },
      {
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map((d) =&gt; path.join(__dirname, d))
                .map((g) =&gt; glob.sync(g))
                .reduce((a, c) =&gt; a.concat(c), [])
            }
          }
        ]
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader'
      }
    )
    return config
  }
}
</code></pre></div>
<ol start="2" dir="auto">
<li>.babelrc</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;env&quot;: {
    &quot;development&quot;: {
      &quot;presets&quot;: &quot;./babel-preset&quot;
    },
    &quot;production&quot;: {
      &quot;presets&quot;: &quot;./babel-preset&quot;
    },
    &quot;test&quot;: {
      &quot;presets&quot;: [
        [&quot;env&quot;, { &quot;modules&quot;: &quot;commonjs&quot; }],
        &quot;./babel-preset&quot;
      ]
    }
  }
}"><pre class="notranslate"><code class="notranslate">{
  "env": {
    "development": {
      "presets": "./babel-preset"
    },
    "production": {
      "presets": "./babel-preset"
    },
    "test": {
      "presets": [
        ["env", { "modules": "commonjs" }],
        "./babel-preset"
      ]
    }
  }
}
</code></pre></div>
<ol start="3" dir="auto">
<li>babel-preset.js</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const nextBabelPreset = require('next/babel');

nextBabelPreset.plugins = nextBabelPreset.plugins.map(plugin =&gt; {
	if (!Array.isArray(plugin) &amp;&amp; plugin.indexOf('styled-jsx/babel') !== -1) {
		return require.resolve('styled-jsx-postcss/babel');
	}
	return plugin
});

module.exports = nextBabelPreset;"><pre class="notranslate"><code class="notranslate">const nextBabelPreset = require('next/babel');

nextBabelPreset.plugins = nextBabelPreset.plugins.map(plugin =&gt; {
	if (!Array.isArray(plugin) &amp;&amp; plugin.indexOf('styled-jsx/babel') !== -1) {
		return require.resolve('styled-jsx-postcss/babel');
	}
	return plugin
});

module.exports = nextBabelPreset;
</code></pre></div>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>3</td>
</tr>
<tr>
<td>node</td>
<td>8</td>
</tr>
<tr>
<td>OS</td>
<td>Mac</td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Steps at <a href="https://learnnextjs.com/basics/getting-started/setup" rel="nofollow">https://learnnextjs.com/basics/getting-started/setup</a> should succeed compilation and show 404 in the browser.</p>
<h2 dir="auto">Current Behavior</h2>
<blockquote>
<p dir="auto">ERROR  Failed to compile with 1 errors</p>
</blockquote>
<blockquote>
<p dir="auto">15:19:19</p>
<p dir="auto">This module was not found:</p>
<ul dir="auto">
<li>react-dom/lib/ReactReconciler in ./node_modules/next/dist/client/next-dev.js</li>
</ul>
<p dir="auto">To install it, you can run: npm install --save react-dom/lib/ReactReconciler<br>
(node:78867) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead</p>
</blockquote>
<blockquote>
<p dir="auto">Ready on <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a></p>
</blockquote>
<h2 dir="auto">Steps to Reproduce</h2>
<p dir="auto">Steps are at <a href="https://learnnextjs.com/basics/getting-started/setup" rel="nofollow">https://learnnextjs.com/basics/getting-started/setup</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">This is my initial discovery of nextjs and my first exploration of the learning resources.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>3.2.2</td>
</tr>
<tr>
<td>node</td>
<td>8.1.2</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 61</td>
</tr>
<tr>
<td>nvm</td>
<td>0.32.1</td>
</tr>
</tbody>
</table>