<h1 dir="auto">Bug report</h1>
<p dir="auto">While trying for the first time <code class="notranslate">nextjs</code> got this error during development. Is this normal?</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">After signaling <code class="notranslate">SIGINT</code> with <code class="notranslate">control+c</code> in the console during <code class="notranslate">npm run dev</code> the console throws some errors.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior:</p>
<ol dir="auto">
<li>Initialize npm<br>
<code class="notranslate">npm init -y</code></li>
<li>Install the core NextJS dependencies:<br>
<code class="notranslate">npm install --save next react react-dom</code></li>
<li>Add scripts to the <code class="notranslate">package.json</code> file:</li>
</ol>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;scripts&quot;: {
    &quot;dev&quot;: &quot;next&quot;,
    &quot;build&quot;: &quot;next build&quot;,
    &quot;start&quot;: &quot;next start&quot;
}"><pre class="notranslate"><span class="pl-ent">"scripts"</span>: {
    <span class="pl-ent">"dev"</span>: <span class="pl-s"><span class="pl-pds">"</span>next<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"build"</span>: <span class="pl-s"><span class="pl-pds">"</span>next build<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"start"</span>: <span class="pl-s"><span class="pl-pds">"</span>next start<span class="pl-pds">"</span></span>
}</pre></div>
<ol start="4" dir="auto">
<li>Create <code class="notranslate">pages/index.js</code> file:</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;

export default () =&gt; {
  return (
    &lt;div&gt;
      &lt;p&gt;Hello world&lt;/p&gt;
    &lt;/div&gt;
  );
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Hello world<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<ol start="5" dir="auto">
<li>Start <code class="notranslate">npm run dev</code>:</li>
</ol>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" DONE  Compiled successfully in 1801ms

&gt; Ready on http://localhost:3000"><pre class="notranslate"> DONE  Compiled successfully <span class="pl-k">in</span> 1801ms

<span class="pl-k">&gt;</span> Ready on http://localhost:3000</pre></div>
<ol start="6" dir="auto">
<li>Press <code class="notranslate">control+c</code> in the console (this is the buggy behavior):</li>
</ol>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="^Cgot signal SIGINT, exiting
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test@1.0.0 dev: `next`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Felipe/.npm/_logs/2018-08-07T17_37_32_226Z-debug.log"><pre class="notranslate">^Cgot signal SIGINT, exiting
npm ERR<span class="pl-k">!</span> code ELIFECYCLE
npm ERR<span class="pl-k">!</span> errno 1
npm ERR<span class="pl-k">!</span> test@1.0.0 dev: <span class="pl-s"><span class="pl-pds">`</span>next<span class="pl-pds">`</span></span>
npm ERR<span class="pl-k">!</span> Exit status 1
npm ERR<span class="pl-k">!</span>
npm ERR<span class="pl-k">!</span> Failed at the test@1.0.0 dev script.
npm ERR<span class="pl-k">!</span> This is probably not a problem with npm. There is likely additional logging output above.

npm ERR<span class="pl-k">!</span> A <span class="pl-c1">complete</span> log of this run can be found in:
npm ERR<span class="pl-k">!</span>     /Users/Felipe/.npm/_logs/2018-08-07T17_37_32_226Z-debug.log</pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">I think there shouldn't be any errors while gracefully exiting the app during development.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
</ul>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;test&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
    &quot;dev&quot;: &quot;next&quot;,
    &quot;build&quot;: &quot;next build&quot;,
    &quot;start&quot;: &quot;next start&quot;
  },
  &quot;keywords&quot;: [],
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;dependencies&quot;: {
    &quot;next&quot;: &quot;^6.1.1&quot;,
    &quot;react&quot;: &quot;^16.4.2&quot;,
    &quot;react-dom&quot;: &quot;^16.4.2&quot;
  }
}"><pre class="notranslate">{
  <span class="pl-ent">"name"</span>: <span class="pl-s"><span class="pl-pds">"</span>test<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"version"</span>: <span class="pl-s"><span class="pl-pds">"</span>1.0.0<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"description"</span>: <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>,
  <span class="pl-ent">"main"</span>: <span class="pl-s"><span class="pl-pds">"</span>index.js<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"scripts"</span>: {
    <span class="pl-ent">"test"</span>: <span class="pl-s"><span class="pl-pds">"</span>echo <span class="pl-cce">\"</span>Error: no test specified<span class="pl-cce">\"</span> &amp;&amp; exit 1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"dev"</span>: <span class="pl-s"><span class="pl-pds">"</span>next<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"build"</span>: <span class="pl-s"><span class="pl-pds">"</span>next build<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"start"</span>: <span class="pl-s"><span class="pl-pds">"</span>next start<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"keywords"</span>: [],
  <span class="pl-ent">"author"</span>: <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>,
  <span class="pl-ent">"license"</span>: <span class="pl-s"><span class="pl-pds">"</span>ISC<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"dependencies"</span>: {
    <span class="pl-ent">"next"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.1.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.4.2<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-dom"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.4.2<span class="pl-pds">"</span></span>
  }
}</pre></div>
<h2 dir="auto">Additional context</h2>
<p dir="auto"><code class="notranslate">debug.log</code> output:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="8 verbose lifecycle test@1.0.0~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/Fe    lipe/Local_Projects/Aprender/nextjs/test/node_modules/.bin:/Users/Felipe/anaconda3/bin:/usr/local/sbin:/usr/local/opt/fzf/b    in:/Users/Felipe/google-cloud-sdk/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
9 verbose lifecycle test@1.0.0~dev: CWD: /Users/Felipe/Local_Projects/Aprender/nextjs/test
10 silly lifecycle test@1.0.0~dev: Args: [ '-c', 'next' ]
11 silly lifecycle test@1.0.0~dev: Returned: code: 1  signal: null
12 info lifecycle test@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: test@1.0.0 dev: `next`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.&lt;anonymous&gt; (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:304:1    6)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.&lt;anonymous&gt; (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:5    5:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:961:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:5)
14 verbose pkgid test@1.0.0
15 verbose cwd /Users/Felipe/Local_Projects/Aprender/nextjs/test
16 verbose Darwin 17.7.0
17 verbose argv &quot;/usr/local/Cellar/node/10.7.0/bin/node&quot; &quot;/usr/local/bin/npm&quot; &quot;run&quot; &quot;dev&quot;
18 verbose node v10.7.0
19 verbose npm  v6.3.0
20 error code ELIFECYCLE
21 error errno 1
22 error test@1.0.0 dev: `next`
22 error Exit status 1
23 error Failed at the test@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]"><pre lang="log" class="notranslate"><code class="notranslate">8 verbose lifecycle test@1.0.0~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/Fe    lipe/Local_Projects/Aprender/nextjs/test/node_modules/.bin:/Users/Felipe/anaconda3/bin:/usr/local/sbin:/usr/local/opt/fzf/b    in:/Users/Felipe/google-cloud-sdk/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
9 verbose lifecycle test@1.0.0~dev: CWD: /Users/Felipe/Local_Projects/Aprender/nextjs/test
10 silly lifecycle test@1.0.0~dev: Args: [ '-c', 'next' ]
11 silly lifecycle test@1.0.0~dev: Returned: code: 1  signal: null
12 info lifecycle test@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: test@1.0.0 dev: `next`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.&lt;anonymous&gt; (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:304:1    6)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.&lt;anonymous&gt; (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:5    5:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:961:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:5)
14 verbose pkgid test@1.0.0
15 verbose cwd /Users/Felipe/Local_Projects/Aprender/nextjs/test
16 verbose Darwin 17.7.0
17 verbose argv "/usr/local/Cellar/node/10.7.0/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v10.7.0
19 verbose npm  v6.3.0
20 error code ELIFECYCLE
21 error errno 1
22 error test@1.0.0 dev: `next`
22 error Exit status 1
23 error Failed at the test@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
</code></pre></div>
<p dir="auto">Looked for any similar error but couldn't find any. If this is a duplicate please excuse me.</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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Context</h2>
<p dir="auto">When navigating through my app I find that any time a page requires an api call to load the data I get a delay as the data is loading, so to fix this issue I am using <code class="notranslate">onRouteChangeStart</code> to activate the menu item and provide a skeleton screen so the user knows that something is loading.</p>
<p dir="auto">This technique is working really as the user gets instant feedback and makes the app look much faster. The issue I am having is when loading a dynamic page eg <code class="notranslate">/news/:article1</code> the state doesn't change to <code class="notranslate">false</code> and the component appears to be always loading. This is more likely to be an issue with my code not handling a route change in the same 'page'  than a issue with next/router. Can someone provide me with some advice on how to fix this issue please?</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto"><strong>Basic Page:</strong> On home page <code class="notranslate">/</code> click <code class="notranslate">news</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.setState({
        loading: true,
        pageLoading: 'news'
})"><pre class="notranslate"><code class="notranslate">this.setState({
        loading: true,
        pageLoading: 'news'
})
</code></pre></div>
<p dir="auto">Then when <code class="notranslate">news</code> page loads.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.setState({
        loading: false,
        pageLoading: ''
})"><pre class="notranslate"><code class="notranslate">this.setState({
        loading: false,
        pageLoading: ''
})
</code></pre></div>
<p dir="auto"><strong>Dynamic Page</strong>: Click <code class="notranslate">/news/article-1</code> (<code class="notranslate">&lt;Link prefetch as={'/news?article=article-1'} href={'/news/article-1'}&gt;&lt;a&gt;{'article 1'}&lt;/a&gt;&lt;/Link&gt;</code>)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.setState({
        loading: true,
        pageLoading: 'news'
})"><pre class="notranslate"><code class="notranslate">this.setState({
        loading: true,
        pageLoading: 'news'
})
</code></pre></div>
<p dir="auto">Then when <code class="notranslate">news</code> page loads.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.setState({
        loading: false,
        pageLoading: ''
})"><pre class="notranslate"><code class="notranslate">this.setState({
        loading: false,
        pageLoading: ''
})
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Basic Page as described above works as expected.<br>
Dynamic Page as described above appears to be stuck in loading state.  But as you can see multiple states are being printed out here which makes me think its an issue with multiple components mounting?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
	&quot;loading&quot;: true,
	&quot;pageLoading&quot;: &quot;news&quot;
}
{
	&quot;loading&quot;: false,
	&quot;pageLoading&quot;: &quot;&quot;
}"><pre class="notranslate"><code class="notranslate">{
	"loading": true,
	"pageLoading": "news"
}
{
	"loading": false,
	"pageLoading": ""
}
</code></pre></div>
<h2 dir="auto">code</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react';
import Router from 'next/router';
import Loading from './Loading'
import { splitString } from '../../helpers/utils'


export default (WrappedComponent) =&gt; (
  class MyWrapper extends Component {
    constructor (props) {
      super(props);
      this.setLoading = this.setLoading.bind(this)
      this.state = {
        loading: false,
        pageLoading: ''
      }
    }

    componentDidMount() {
      this.setState({
        loading: false,
        pageLoading: ''
      })
    }
    componentDidUpdate() {
      Router.onRouteChangeStart = url =&gt; {
        /* returns the last part of the new url so that we know which page to make active in the loading component */
        const newPage = splitString('/',url,1) !== undefined ? splitString('/',url,1):'...'
        this.setLoading(newPage)
      }
    }

    setLoading(newPage) {
      this.setState({
        loading: true,
        pageLoading: newPage
      })
    }

    render() {
      return (
        &lt;div&gt;
          &lt;pre&gt;{JSON.stringify(this.state, null, '	')}&lt;/pre&gt;
          {
            this.state.loading ?
            &lt;Loading page={this.state.pageLoading} /&gt;
            :&lt;WrappedComponent {...this.props} /&gt;
          }
        &lt;/div&gt;
      )
    }
  }
)"><pre class="notranslate"><code class="notranslate">import React, { Component } from 'react';
import Router from 'next/router';
import Loading from './Loading'
import { splitString } from '../../helpers/utils'


export default (WrappedComponent) =&gt; (
  class MyWrapper extends Component {
    constructor (props) {
      super(props);
      this.setLoading = this.setLoading.bind(this)
      this.state = {
        loading: false,
        pageLoading: ''
      }
    }

    componentDidMount() {
      this.setState({
        loading: false,
        pageLoading: ''
      })
    }
    componentDidUpdate() {
      Router.onRouteChangeStart = url =&gt; {
        /* returns the last part of the new url so that we know which page to make active in the loading component */
        const newPage = splitString('/',url,1) !== undefined ? splitString('/',url,1):'...'
        this.setLoading(newPage)
      }
    }

    setLoading(newPage) {
      this.setState({
        loading: true,
        pageLoading: newPage
      })
    }

    render() {
      return (
        &lt;div&gt;
          &lt;pre&gt;{JSON.stringify(this.state, null, '	')}&lt;/pre&gt;
          {
            this.state.loading ?
            &lt;Loading page={this.state.pageLoading} /&gt;
            :&lt;WrappedComponent {...this.props} /&gt;
          }
        &lt;/div&gt;
      )
    }
  }
)
</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.0.3</td>
</tr>
<tr>
<td>node</td>
<td>v8.4.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.12</td>
</tr>
<tr>
<td>browser</td>
<td>chrome  61</td>
</tr>
</tbody>
</table>