<p dir="auto">First of all I am Japanese and I am poor at English.<br>
I am writing a sentence by specifying translation software. I am sorry if it does not pass</p>
<p dir="auto">Please allow pushState when js file and query parameters in pages directory suffered</p>
<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Link { ...object } pushState&gt;text&lt;/Link&gt;"><pre class="notranslate"><code class="notranslate">&lt;Link { ...object } pushState&gt;text&lt;/Link&gt;
</code></pre></div>
<p dir="auto">I want you to be pushState instead of replaceState when describing as described above</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Precondition<br>
<code class="notranslate">/a/b/?query1=1</code> =&gt; express rewrite =&gt; <code class="notranslate">/page1/?query=1&amp;query=2</code></p>
<ol dir="auto">
<li>go to <code class="notranslate">/</code></li>
<li>go to <code class="notranslate">/page1/?query1=1</code> pushState</li>
<li>go to <code class="notranslate">/a/b/?query1=1</code> replaceState</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">An unintended replaceState occurred on the product page of EC site.<br>
I want to return to the page in the order that it should be browser back</p>
<p dir="auto">In particular<br>
<a href="https://github.com/zeit/next.js/blob/canary/lib/router/router.js#L161">https://github.com/zeit/next.js/blob/canary/lib/router/router.js#L161</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (!this.urlIsNew(pathname, query))"><pre class="notranslate"><code class="notranslate">if (!this.urlIsNew(pathname, query))
</code></pre></div>
<p dir="auto">Is it possible to add an option to switch whether to use pushState?</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.0</td>
</tr>
<tr>
<td>node</td>
<td>8.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>mac high sierra</td>
</tr>
<tr>
<td>browser</td>
<td>all</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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto"><g-emoji class="g-emoji" alias="wave" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f44b.png">👋</g-emoji> Hey everyone, I've been using next with TypeScript (was 6.0 canary, now with 6.0.1 canary) and HMR has been causing quite a lot of issues. I created an example repo to showcase it: nextjs-typescript-hrm-bug-example</p>
<p dir="auto">Basically the default setup for HRM in nextjs means that making a change in a <code class="notranslate">*.tsx</code> file would cause an infinite loop with these errors</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/49038/39677627-59a67990-514c-11e8-8d2f-4f64cfab6e66.png"><img width="1091" alt="screen shot 2018-05-06 at 4 08 44 pm" src="https://user-images.githubusercontent.com/49038/39677627-59a67990-514c-11e8-8d2f-4f64cfab6e66.png" style="max-width: 100%;"></a></p>
<p dir="auto">Which you need to kill the server to stop.</p>
<p dir="auto">In making the example repo, I came up with the solution in my <a href="https://github.com/orta/nextjs-typescript-hrm-bug-example/blob/master/next.config.js"><code class="notranslate">next.config.js</code></a>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    if (dev &amp;&amp; !isServer) {
      const HMR = config.module.rules.find(r =&gt; r.loader === &quot;hot-self-accept-loader&quot;)
      if (HMR) {
        HMR.test = /\.(ts|tsx|js|jsx)$/
        HMR.options.extensions = /\.(ts|tsx|js|jsx)$/
      }
    }"><pre class="notranslate">    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">dev</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">!</span><span class="pl-s1">isServer</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-c1">HMR</span> <span class="pl-c1">=</span> <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">.</span><span class="pl-c1">rules</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s1">r</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">r</span><span class="pl-kos">.</span><span class="pl-c1">loader</span> <span class="pl-c1">===</span> <span class="pl-s">"hot-self-accept-loader"</span><span class="pl-kos">)</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">HMR</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-c1">HMR</span><span class="pl-kos">.</span><span class="pl-c1">test</span> <span class="pl-c1">=</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>ts<span class="pl-c1">|</span>tsx<span class="pl-c1">|</span>js<span class="pl-c1">|</span>jsx<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span>
        <span class="pl-c1">HMR</span><span class="pl-kos">.</span><span class="pl-c1">options</span><span class="pl-kos">.</span><span class="pl-c1">extensions</span> <span class="pl-c1">=</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>ts<span class="pl-c1">|</span>tsx<span class="pl-c1">|</span>js<span class="pl-c1">|</span>jsx<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span></pre></div>
<p dir="auto">Which modifies the HMR to support TS.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">This should probably be documented somewhere <g-emoji class="g-emoji" alias="+1" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png">👍</g-emoji> (which in part this issue is meant to do for others with the same problem)</p>
<p dir="auto">Perhaps the with-typescript example could be updated to babel's TypeScript instead, and this can be added to the config file?</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="git clone https://github.com/orta/nextjs-typescript-hrm-bug-example
cd nextjs-typescript-hrm-bug-example
yarn
yarn dev"><pre class="notranslate"><code class="notranslate">git clone https://github.com/orta/nextjs-typescript-hrm-bug-example
cd nextjs-typescript-hrm-bug-example
yarn
yarn dev
</code></pre></div>
<p dir="auto">Then change <code class="notranslate">index.tsx</code></p>
<h2 dir="auto">Context</h2>
<p dir="auto">n/a</p>