<h1 dir="auto">Feature request</h1>
<p dir="auto"><code class="notranslate">next</code> creates a <code class="notranslate">webpack</code> config and it'd be nice to have access to that.</p>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">Certain other tools, such as <a href="https://github.com/styleguidist/react-styleguidist"><code class="notranslate">react-styleguidist</code></a>, need to know how <code class="notranslate">webpack</code> is configured to work.  But <code class="notranslate">next</code> abstracts this away and doesn't put it together until it spins up, so just <code class="notranslate">require</code>'ing a static file won't work.  So, <code class="notranslate">styleguidist</code> can't share the <code class="notranslate">webpack</code> config that <code class="notranslate">next</code> uses.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">Ideally, it'd be something like the existing <code class="notranslate">next/whatever</code> imports.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const getWebpackConfig = require('next/webpack');
const webpackConfig = getWebpackConfig({ /* Some information on which one to get (client, server, build, dev) */ });"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">getWebpackConfig</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'next/webpack'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">webpackConfig</span> <span class="pl-c1">=</span> <span class="pl-s1">getWebpackConfig</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c">/* Some information on which one to get (client, server, build, dev) */</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">It's entirely possible to make an alternative <code class="notranslate">webpack.config.js</code>, but there's no guarantee that it'll stay in sync between versions or with add-on's, and it requires knowledge of what <code class="notranslate">next</code> is doing behind the scenes.</p>
<p dir="auto">Another idea was to have <code class="notranslate">next.config.js</code> write the config to a file on require, but that can't copy over the functions and class instances in the config, since they are not serializable.</p>
<p dir="auto">Since it's not bundled, stuff from <code class="notranslate">next</code> can be selectively required to kinda get the config</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const loadConfig = require('next-server/next-config');
const getBaseWebpackConfig = require('next/dist/build/webpack-config').default;

const config = loadConfig(__dirname);
getBaseWebpackConfig(__dirname, {config, entrypoints: {}}).then(webpackConfig =&gt;
  console.log('Config GET!', webpackConfig),
);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">loadConfig</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'next-server/next-config'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">getBaseWebpackConfig</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'next/dist/build/webpack-config'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-s1">loadConfig</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">getBaseWebpackConfig</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>config<span class="pl-kos">,</span> <span class="pl-c1">entrypoints</span>: <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">webpackConfig</span> <span class="pl-c1">=&gt;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'Config GET!'</span><span class="pl-kos">,</span> <span class="pl-s1">webpackConfig</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">but that's messy, incomplete, depends on internals, asynchronous, and can entirely break for any number of reasons.</p>
<h2 dir="auto">Additional context</h2>
<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">I expected the promise returned from Router.push('/myurl') would only resolve after the new page had been navigated to. This is useful for triggering UI events after the transition like: Router.push('/myurl').then(() =&gt; showModal('Hello'));</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Currently, the promise often resolves before that page transition is completed. This is especially easy to see in development mode, since the transition often takes considerable time while the next page is building.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Put some code like Router.push('/myurl').then(() =&gt; window.alert('Premature Alert?')) to be triggered by a button click.</li>
<li>Add something that will take some time to getInitialProps for myurl.js</li>
<li>Click the button, and, see if the alert arrives before the new page is rendered.</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">In particular, I'm trying to put together a login flow where the app shows a "loading..." message while the page is being navigated to the next destination, and then disappears after the new page is loaded.</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>4.1.4</td>
</tr>
<tr>
<td>node</td>
<td>8.8.1</td>
</tr>
<tr>
<td>OS</td>
<td>OSX</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>