<p dir="auto">I have a login page, after login web route to page index with <code class="notranslate">Router.push('/')</code>. In index page I have dynamic import some component depend on <code class="notranslate">query.page</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import * as React from 'react'
import * as withRedux from 'next-redux-wrapper'
import dynamic from 'next/dynamic'

import Layout from '../src/components/share/Layout'
import configStore from '../src/store/configStore.dev'

export interface Props {
  page: string
  pageProps: any
}

export interface State {}

interface DynamicBundleProps {
  page: string
  pageProps: any
}

const DynamicBundle = dynamic&lt;DynamicBundleProps, {}&gt;({
  modules: props =&gt; {
    const components: any = {}
    console.log(props.page)
    switch (props.page) {
      case '/lists/create': {
        components.Page = import('./lists/create')
        break
      }
      case '/lists/manage': {
        components.Page = import('./lists/manage')
        break
      }
      case '/templates/create': {
        components.Page = import('./templates/create')
        break
      }
      case '/templates/manage': {
        components.Page = import('./templates/manage')
        break
      }
      case '/campaigns/create': {
        components.Page = import('./campaigns/create')
        break
      }
      case '/campaigns/manage': {
        components.Page = import('./campaigns/manage')
        break
      }
      case '/settings': {
        components.Page = import('./settings')
        break
      }
      case '/': {
        components.Page = import('../src/components/Dashboard')
      }
      default: {
        components.Page = import('../src/components/Dashboard')
      }
    }
    console.log(components)
    return components
  },
  render: (props, { Page }) =&gt; {
    console.log(Page)
    return (
      &lt;React.Fragment&gt;
        &lt;Page {...props.pageProps} /&gt;
      &lt;/React.Fragment&gt;
    )
  },
} as any)

class IndexPage extends React.Component&lt;Props, State&gt; {
  constructor(props) {
    super(props)
  }

  static async getInitialProps(context) {
    const { page, ...pageProps } = context.query
    return { page, pageProps }
  }

  render() {
    let { page, pageProps } = this.props
    return (
      &lt;Layout&gt;
        &lt;DynamicBundle page={page} pageProps={pageProps} /&gt;
      &lt;/Layout&gt;
    )
  }
}

export default withRedux(configStore)(IndexPage)

"><pre class="notranslate"><code class="notranslate">import * as React from 'react'
import * as withRedux from 'next-redux-wrapper'
import dynamic from 'next/dynamic'

import Layout from '../src/components/share/Layout'
import configStore from '../src/store/configStore.dev'

export interface Props {
  page: string
  pageProps: any
}

export interface State {}

interface DynamicBundleProps {
  page: string
  pageProps: any
}

const DynamicBundle = dynamic&lt;DynamicBundleProps, {}&gt;({
  modules: props =&gt; {
    const components: any = {}
    console.log(props.page)
    switch (props.page) {
      case '/lists/create': {
        components.Page = import('./lists/create')
        break
      }
      case '/lists/manage': {
        components.Page = import('./lists/manage')
        break
      }
      case '/templates/create': {
        components.Page = import('./templates/create')
        break
      }
      case '/templates/manage': {
        components.Page = import('./templates/manage')
        break
      }
      case '/campaigns/create': {
        components.Page = import('./campaigns/create')
        break
      }
      case '/campaigns/manage': {
        components.Page = import('./campaigns/manage')
        break
      }
      case '/settings': {
        components.Page = import('./settings')
        break
      }
      case '/': {
        components.Page = import('../src/components/Dashboard')
      }
      default: {
        components.Page = import('../src/components/Dashboard')
      }
    }
    console.log(components)
    return components
  },
  render: (props, { Page }) =&gt; {
    console.log(Page)
    return (
      &lt;React.Fragment&gt;
        &lt;Page {...props.pageProps} /&gt;
      &lt;/React.Fragment&gt;
    )
  },
} as any)

class IndexPage extends React.Component&lt;Props, State&gt; {
  constructor(props) {
    super(props)
  }

  static async getInitialProps(context) {
    const { page, ...pageProps } = context.query
    return { page, pageProps }
  }

  render() {
    let { page, pageProps } = this.props
    return (
      &lt;Layout&gt;
        &lt;DynamicBundle page={page} pageProps={pageProps} /&gt;
      &lt;/Layout&gt;
    )
  }
}

export default withRedux(configStore)(IndexPage)


</code></pre></div>
<p dir="auto">But when I route to page index the first time after login, it build the page and then throw error before this even run, so no page is show</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  render: (props, { Page }) =&gt; {
    console.log(Page)
    return (
      &lt;React.Fragment&gt;
        &lt;Page {...props.pageProps} /&gt;
      &lt;/React.Fragment&gt;
    )
  }"><pre class="notranslate"><code class="notranslate">  render: (props, { Page }) =&gt; {
    console.log(Page)
    return (
      &lt;React.Fragment&gt;
        &lt;Page {...props.pageProps} /&gt;
      &lt;/React.Fragment&gt;
    )
  }
</code></pre></div>
<p dir="auto">This is the error<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/12032550/38983462-9a2c9b72-43ee-11e8-85f6-38fb5a5771c0.png"><img src="https://user-images.githubusercontent.com/12032550/38983462-9a2c9b72-43ee-11e8-85f6-38fb5a5771c0.png" alt="nextjs_error" style="max-width: 100%;"></a></p>
<p dir="auto">This error only happen on the first page build and not happen when build out production code</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>


<p dir="auto">No error and page show normal</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Throw error before render dynamic component</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<h2 dir="auto">Context</h2>


<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>^6.0.0-canary.3</td>
</tr>
<tr>
<td>node</td>
<td>9.1.0</td>
</tr>
<tr>
<td>OS</td>
<td>manjaro-linux</td>
</tr>
<tr>
<td>browser</td>
<td>chromium</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">When I use <code class="notranslate">injectGlobal</code> to inject global styles using styled-components in e.g. the <code class="notranslate">_documents.js</code> the resulting <code class="notranslate">&lt;style&gt;</code> tag for global styles will be generated <em>below</em> the component's <code class="notranslate">&lt;style&gt;</code> tag. Therefore global styles will override component styles. This should be turned around since global styles like e.g. normalize.css shouldn't override component styles.</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">Expected Behavior</h2>


<p dir="auto">The <code class="notranslate">&lt;style&gt;</code> tag for global styles should be generated before the <code class="notranslate">&lt;style&gt;</code> tag of component styles</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">It's generated in the wrong order.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Download this zip: <a href="https://github.com/zeit/next.js/files/1685672/example.zip">example.zip</a><br>
This example is based on the example with styled-components.<br>
Run <code class="notranslate">$ npm install</code> and open <code class="notranslate">localhost:3000</code>, then view the HTML source code.</p>
<p dir="auto">This proofes that non-local CSS isn't generated at the top:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8310677/35680830-ba11c6a8-075b-11e8-8649-1e8532c28d11.png"><img src="https://user-images.githubusercontent.com/8310677/35680830-ba11c6a8-075b-11e8-8649-1e8532c28d11.png" alt="topic" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>


<p dir="auto">I'm trying to add normalize.css at the very top of the HTML file.</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.2.3</td>
</tr>
<tr>
<td>node</td>
<td>6.11.3</td>
</tr>
<tr>
<td>OS</td>
<td>Win 10</td>
</tr>
<tr>
<td>browser</td>
<td>FF 58</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>