<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 expect to be able to use semantic-ui-less and load it's related files via config.next.js webpack rules and plugins.</p>
<h2 dir="auto">Current Behavior</h2>
<h2 dir="auto">Context</h2>

<p dir="auto">I'm hitting some walls myself with my next.config.js to use webpack to load all semantic-ui-less related files...</p>
<p dir="auto">`<br>
const { WebpackBundleSizeAnalyzerPlugin } = require('webpack-bundle-size-analyzer')<br>
const { ANALYZE } = process.env<br>
// const ExtractTextPlugin = require('extract-text-webpack-plugin');</p>
<p dir="auto">module.exports = {<br>
webpack: function (config) {<br>
config.module.rules.push({<br>
test: /.less$/,<br>
use: [<br>
{ loader: 'style-loader', options: { } },<br>
{ loader: 'css-loader', options: { } },<br>
{ loader: 'less-loader', options: { } },<br>
]<br>
})<br>
config.module.rules.push({<br>
test: /.jpe?g$|.gif$|.png$|.ttf$|.eot$|.svg$/,<br>
use: [{<br>
loader: 'file-loader',<br>
options: {<br>
name: '[name].[ext]?[hash]'<br>
}<br>
}]<br>
})<br>
config.module.rules.push({<br>
test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,<br>
use: [{<br>
loader: 'url-loader',<br>
options: {<br>
limit: '10000',<br>
mimetype: 'application/fontwoff'<br>
}<br>
}]<br>
})<br>
// config.plugins.push(<br>
//   new ExtractTextPlugin({<br>
// filename: "[name].[contenthash].css",<br>
// disable: process.env.NODE_ENV === "development"<br>
//   })<br>
// )</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (ANALYZE) {
  config.plugins.push(
    new WebpackBundleSizeAnalyzerPlugin('stats.txt')
  )
}
return config"><pre class="notranslate"><code class="notranslate">if (ANALYZE) {
  config.plugins.push(
    new WebpackBundleSizeAnalyzerPlugin('stats.txt')
  )
}
return config
</code></pre></div>
<p dir="auto">}<br>
}</p>
<p dir="auto">`<br>
Depending on the order of the less loaders I get different errors...</p>
<p dir="auto">style, css, less<br>
`Unexpected token &amp;<br>
/Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less:14<br>
&amp; { <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/import/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/import">@import</a> "definitions/globals/reset"; }<br>
^</p>
<p dir="auto">SyntaxError: Unexpected token &amp;<br>
at createScript (vm.js:80:10)<br>
at Object.runInThisContext (vm.js:139:10)<br>
at Module._compile (module.js:588:28)<br>
at Module._compile (/Users/agustif/Documents/Git/cruceritis/node_modules/source-map-support/source-map-support.js:492:25)<br>
at Object.Module._extensions..js (module.js:635:10)<br>
at Module.load (module.js:545:32)<br>
at tryModuleLoad (module.js:508:12)<br>
at Function.Module._load (module.js:500:3)<br>
at Module.require (module.js:568:17)<br>
at require (internal/module.js:11:18)`</p>
<p dir="auto">less-style-css<br>
`Error in semantic-ui-less/semantic.less<br>
Module build failed:</p>
<p dir="auto">// load the styles<br>
var content = require("!!../css-loader/index.js??ref--6-2!./semantic.less");<br>
^<br>
Unrecognised input<br>
in /Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less (line 4, column 12)`</p>
<p dir="auto">css-less-style<br>
`Error in semantic-ui-less/semantic.less<br>
Module build failed:</p>
<p dir="auto">// load the styles<br>
var content = require("!!./semantic.less");<br>
^<br>
Unrecognised input<br>
in /Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less (line 4, column 12)`</p>
<p dir="auto">css-style-less<br>
`Error in semantic-ui-less/semantic.less<br>
Module build failed: Unknown word (5:1)</p>
<p dir="auto">3 | // load the styles<br>
4 | var content = require("!!../less-loader/dist/cjs.js??ref--6-2!./semantic.less");</p>
<blockquote>
<p dir="auto">5 | if(typeof content === 'string') content = [[module.id, content, '']];<br>
| ^<br>
6 | // Prepare cssTransformation<br>
7 | var transform;<br>
8 | `</p>
</blockquote>

<p dir="auto"><code class="notranslate"> "dependencies": { "next": "^4.1.4", "react": "^16.1.1", "react-dom": "^16.1.1", "semantic-ui-react": "^0.77.0" }, "devDependencies": { "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "find-in-files": "^0.4.0", "less": "^2.7.3", "less-loader": "^4.0.5", "ncp": "^2.0.0", "semantic-ui-less": "^2.2.12", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack-bundle-size-analyzer": "^2.7.0" } }</code></p>
<h2 dir="auto">My 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.7.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS High Sierra 10.13.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>react</td>
<td>16.1.1</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Either <code class="notranslate">Link</code> or <code class="notranslate">Router</code> stops working when doing client side routing. It seems that HMR may be interrupting the transition between pages. It occurs most frequently if the app is left idle or in the background for a bit of time (although I have experienced it happening whilst clicking around without it being idle)</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<ol dir="auto">
<li>Clone this repo (<a href="https://github.com/malimccalla/next-routing-issue">https://github.com/malimccalla/next-routing-issue</a>)</li>
<li>Install dependencies <code class="notranslate">npm install</code></li>
<li>Run the server <code class="notranslate">npm run dev</code></li>
<li>Visit all pages by clicking the links</li>
<li>Go make a coffee (leave page idle for ~2mins)</li>
<li>Attempt to visit all pages by clicking the links</li>
<li>Certain links do not navigate to their respective page 😔</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">I expect to be able to visit all the individual pages</p>
<h2 dir="auto">Actual behaviour</h2>
<p dir="auto">Page does not navigate to certain routes. Refreshing the page will fix it</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">Both the "about" and "contact" links do not work (notice the HMR log on the first attempt of each route). After a page refresh they work as expected. If I leave the app idle for roughly 2mins again it will start over with the issue</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/18899991/48032169-7b789980-e14e-11e8-9ec1-959cb9e54b7c.gif"><img src="https://user-images.githubusercontent.com/18899991/48032169-7b789980-e14e-11e8-9ec1-959cb9e54b7c.gif" alt="next-issue" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>mac Mojave 10.14</li>
<li>Chrome</li>
<li>next.js  v7.0.2</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">With the console open you can see that the Router event <code class="notranslate">routeChangeStart</code> fires but <code class="notranslate">routeChangeComplete</code> never does.</p>