Issue 1:
I have a login page, after login web route to page index with Router.push('/'). In index page I have dynamic import some component depend on query.page

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<DynamicBundleProps, {}>({
modules: props => {
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 }) => {
console.log(Page)
return (
<React.Fragment>
<Page {...props.pageProps} />
</React.Fragment>
)
},
} as any)

class IndexPage extends React.Component<Props, State> {
constructor(props) {
super(props)
}

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

render() {
let { page, pageProps } = this.props
return (
<Layout>
<DynamicBundle page={page} pageProps={pageProps} />
</Layout>
)
}
}

export default withRedux(configStore)(IndexPage)

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

render: (props, { Page }) => {
console.log(Page)
return (
<React.Fragment>
<Page {...props.pageProps} />
</React.Fragment>
)
}

This is the error

This error only happen on the first page build and not happen when build out production code

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

No error and page show normal

Current Behavior

Throw error before render dynamic component

Steps to Reproduce (for bugs)

Context

Your Environment

Tech
Version

next
^6.0.0-canary.3

node
9.1.0

OS
manjaro-linux

browser
chromium

etc

Issue 2:
When I use injectGlobal to inject global styles using styled-components in e.g. the _documents.js the resulting <style> tag for global styles will be generated below the component's <style> 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.

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The <style> tag for global styles should be generated before the <style> tag of component styles

Current Behavior

It's generated in the wrong order.

Steps to Reproduce (for bugs)

Download this zip: example.zip

This example is based on the example with styled-components.

Run $ npm install and open localhost:3000, then view the HTML source code.

This proofes that non-local CSS isn't generated at the top:

Context

I'm trying to add normalize.css at the very top of the HTML file.

Your Environment

Tech
Version

next
4.2.3

node
6.11.3

OS
Win 10

browser
FF 58

etc