2018-04-18 18:18:06 +02:00
|
|
|
import React from 'react'
|
2017-01-12 02:58:20 +01:00
|
|
|
import ReactDOM from 'react-dom'
|
|
|
|
import HeadManager from './head-manager'
|
2019-01-14 15:41:09 +01:00
|
|
|
import { createRouter } from 'next/router'
|
2019-01-04 21:49:21 +01:00
|
|
|
import mitt from 'next-server/dist/lib/mitt'
|
2019-02-19 22:45:07 +01:00
|
|
|
import { loadGetInitialProps, getURL } from 'next-server/dist/lib/utils'
|
2018-11-28 15:03:02 +01:00
|
|
|
import PageLoader from './page-loader'
|
2018-10-02 00:55:31 +02:00
|
|
|
import * as envConfig from 'next-server/config'
|
2019-03-18 18:08:51 +01:00
|
|
|
import { ErrorBoundary } from './error-boundary'
|
2018-10-02 00:55:31 +02:00
|
|
|
import Loadable from 'next-server/dist/lib/loadable'
|
2019-01-14 01:59:26 +01:00
|
|
|
import { HeadManagerContext } from 'next-server/dist/lib/head-manager-context'
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2017-03-04 17:48:33 +01:00
|
|
|
// Polyfill Promise globally
|
2018-07-24 11:24:40 +02:00
|
|
|
// This is needed because Webpack's dynamic loading(common chunks) code
|
2017-03-04 17:48:33 +01:00
|
|
|
// depends on Promise.
|
|
|
|
// So, we need to polyfill it.
|
2018-08-24 01:57:04 +02:00
|
|
|
// See: https://webpack.js.org/guides/code-splitting/#dynamic-imports
|
2017-03-04 17:48:33 +01:00
|
|
|
if (!window.Promise) {
|
|
|
|
window.Promise = Promise
|
|
|
|
}
|
|
|
|
|
2018-11-03 19:49:09 +01:00
|
|
|
const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent)
|
|
|
|
window.__NEXT_DATA__ = data
|
|
|
|
|
2017-01-12 02:58:20 +01:00
|
|
|
const {
|
2018-11-03 19:49:09 +01:00
|
|
|
props,
|
|
|
|
err,
|
|
|
|
page,
|
|
|
|
query,
|
|
|
|
buildId,
|
|
|
|
assetPrefix,
|
|
|
|
runtimeConfig,
|
|
|
|
dynamicIds
|
|
|
|
} = data
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
const prefix = assetPrefix || ''
|
|
|
|
|
2018-02-02 21:09:24 +01:00
|
|
|
// With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
|
|
|
|
// So, this is how we do it in the client side at runtime
|
2018-07-24 11:24:40 +02:00
|
|
|
__webpack_public_path__ = `${prefix}/_next/` //eslint-disable-line
|
2018-02-26 12:03:27 +01:00
|
|
|
// Initialize next/config with the environment configuration
|
2018-02-27 17:50:14 +01:00
|
|
|
envConfig.setConfig({
|
|
|
|
serverRuntimeConfig: {},
|
|
|
|
publicRuntimeConfig: runtimeConfig
|
|
|
|
})
|
2018-01-30 16:40:52 +01:00
|
|
|
|
2017-05-03 18:40:09 +02:00
|
|
|
const asPath = getURL()
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
const pageLoader = new PageLoader(buildId, prefix)
|
2018-11-03 01:59:54 +01:00
|
|
|
const register = ([r, f]) => pageLoader.registerPage(r, f)
|
|
|
|
if (window.__NEXT_P) {
|
|
|
|
window.__NEXT_P.map(register)
|
|
|
|
}
|
|
|
|
window.__NEXT_P = []
|
|
|
|
window.__NEXT_P.push = register
|
2017-04-05 08:45:39 +02:00
|
|
|
|
2017-04-06 08:11:13 +02:00
|
|
|
const headManager = new HeadManager()
|
|
|
|
const appContainer = document.getElementById('__next')
|
2017-04-05 13:43:34 +02:00
|
|
|
|
2017-01-12 02:58:20 +01:00
|
|
|
let lastAppProps
|
2018-07-24 11:24:40 +02:00
|
|
|
let webpackHMR
|
2017-04-06 08:11:13 +02:00
|
|
|
export let router
|
|
|
|
export let ErrorComponent
|
|
|
|
let Component
|
2018-04-12 10:33:22 +02:00
|
|
|
let App
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2019-01-04 21:49:21 +01:00
|
|
|
export const emitter = mitt()
|
2017-10-30 16:01:40 +01:00
|
|
|
|
2018-04-18 18:18:06 +02:00
|
|
|
export default async ({
|
2018-07-24 11:24:40 +02:00
|
|
|
webpackHMR: passedWebpackHMR
|
2018-04-18 18:18:06 +02:00
|
|
|
} = {}) => {
|
2018-07-24 11:24:40 +02:00
|
|
|
// This makes sure this specific line is removed in production
|
|
|
|
if (process.env.NODE_ENV === 'development') {
|
|
|
|
webpackHMR = passedWebpackHMR
|
2017-04-17 22:15:50 +02:00
|
|
|
}
|
2018-04-12 10:33:22 +02:00
|
|
|
App = await pageLoader.loadPage('/_app')
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2018-04-18 18:18:06 +02:00
|
|
|
let initialErr = err
|
|
|
|
|
2017-04-06 08:11:13 +02:00
|
|
|
try {
|
2018-02-13 16:13:22 +01:00
|
|
|
Component = await pageLoader.loadPage(page)
|
2018-04-12 10:33:22 +02:00
|
|
|
|
2018-12-17 16:09:23 +01:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
const { isValidElementType } = require('react-is')
|
|
|
|
if (!isValidElementType(Component)) {
|
|
|
|
throw new Error(`The default export is not a React Component in page: "${page}"`)
|
|
|
|
}
|
2018-04-12 10:33:22 +02:00
|
|
|
}
|
2018-04-18 18:18:06 +02:00
|
|
|
} catch (error) {
|
|
|
|
// This catches errors like throwing in the top level of a module
|
|
|
|
initialErr = error
|
2017-04-06 08:11:13 +02:00
|
|
|
}
|
|
|
|
|
2018-09-25 15:27:09 +02:00
|
|
|
await Loadable.preloadReady(dynamicIds || [])
|
2018-07-24 11:24:40 +02:00
|
|
|
|
2018-10-10 21:58:15 +02:00
|
|
|
router = createRouter(page, query, asPath, {
|
2018-04-12 10:33:22 +02:00
|
|
|
initialProps: props,
|
2017-04-06 08:11:13 +02:00
|
|
|
pageLoader,
|
2018-04-12 10:33:22 +02:00
|
|
|
App,
|
2017-04-06 08:11:13 +02:00
|
|
|
Component,
|
2018-04-18 18:18:06 +02:00
|
|
|
err: initialErr
|
2017-04-06 08:11:13 +02:00
|
|
|
})
|
2017-01-12 02:58:20 +01:00
|
|
|
|
2018-09-29 05:24:27 +02:00
|
|
|
router.subscribe(({ App, Component, props, err }) => {
|
|
|
|
render({ App, Component, props, err, emitter })
|
2017-01-12 02:58:20 +01:00
|
|
|
})
|
|
|
|
|
2018-09-29 05:24:27 +02:00
|
|
|
render({ App, Component, props, err: initialErr, emitter })
|
2017-01-31 04:26:17 +01:00
|
|
|
|
|
|
|
return emitter
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
|
2017-04-01 23:03:40 +02:00
|
|
|
export async function render (props) {
|
2018-01-30 16:40:52 +01:00
|
|
|
if (props.err) {
|
2018-04-18 18:18:06 +02:00
|
|
|
await renderError(props)
|
2017-04-01 23:03:40 +02:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2017-01-12 02:58:20 +01:00
|
|
|
try {
|
|
|
|
await doRender(props)
|
|
|
|
} catch (err) {
|
2019-02-19 22:45:07 +01:00
|
|
|
await renderError({ ...props, err })
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-04-01 23:03:40 +02:00
|
|
|
// This method handles all runtime and debug errors.
|
|
|
|
// 404 and 500 errors are special kind of errors
|
|
|
|
// and they are still handle via the main render method.
|
2018-04-18 18:18:06 +02:00
|
|
|
export async function renderError (props) {
|
2019-02-19 22:45:07 +01:00
|
|
|
const { App, err } = props
|
2018-04-18 18:18:06 +02:00
|
|
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2019-03-08 16:24:15 +01:00
|
|
|
return webpackHMR.reportRuntimeError(
|
|
|
|
webpackHMR.prepareError(err)
|
|
|
|
)
|
2018-04-18 18:18:06 +02:00
|
|
|
}
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
// Make sure we log the error to the console, otherwise users can't track down issues.
|
|
|
|
console.error(err)
|
2018-04-18 18:18:06 +02:00
|
|
|
|
2019-01-31 21:45:36 +01:00
|
|
|
ErrorComponent = await pageLoader.loadPage('/_error')
|
|
|
|
|
2018-04-18 18:18:06 +02:00
|
|
|
// In production we do a normal render with the `ErrorComponent` as component.
|
2018-07-11 23:58:42 +02:00
|
|
|
// If we've gotten here upon initial render, we can use the props from the server.
|
|
|
|
// Otherwise, we need to call `getInitialProps` on `App` before mounting.
|
|
|
|
const initProps = props.props
|
|
|
|
? props.props
|
2019-02-19 22:45:07 +01:00
|
|
|
: await loadGetInitialProps(App, { Component: ErrorComponent, router, ctx: { err, pathname: page, query, asPath } })
|
2018-07-11 23:58:42 +02:00
|
|
|
|
2019-02-19 22:45:07 +01:00
|
|
|
await doRender({ ...props, err, Component: ErrorComponent, props: initProps })
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
|
2018-09-05 22:45:17 +02:00
|
|
|
let isInitialRender = true
|
|
|
|
function renderReactElement (reactEl, domEl) {
|
|
|
|
// The check for `.hydrate` is there to support React alternatives like preact
|
|
|
|
if (isInitialRender && typeof ReactDOM.hydrate === 'function') {
|
|
|
|
ReactDOM.hydrate(reactEl, domEl)
|
|
|
|
isInitialRender = false
|
|
|
|
} else {
|
|
|
|
ReactDOM.render(reactEl, domEl)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-18 16:22:36 +01:00
|
|
|
async function doRender ({ App, Component, props, err }) {
|
2018-04-12 10:33:22 +02:00
|
|
|
// Usual getInitialProps fetching is handled in next/router
|
|
|
|
// this is for when ErrorComponent gets replaced by Component by HMR
|
2017-01-12 02:58:20 +01:00
|
|
|
if (!props && Component &&
|
|
|
|
Component !== ErrorComponent &&
|
|
|
|
lastAppProps.Component === ErrorComponent) {
|
2017-05-03 18:40:09 +02:00
|
|
|
const { pathname, query, asPath } = router
|
2019-02-19 22:45:07 +01:00
|
|
|
props = await loadGetInitialProps(App, { Component, router, ctx: { err, pathname, query, asPath } })
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
Component = Component || lastAppProps.Component
|
|
|
|
props = props || lastAppProps.props
|
|
|
|
|
2019-03-18 16:22:36 +01:00
|
|
|
const appProps = { Component, err, router, ...props }
|
2017-02-19 21:35:48 +01:00
|
|
|
// lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
|
|
|
|
lastAppProps = appProps
|
|
|
|
|
2019-03-18 16:22:36 +01:00
|
|
|
emitter.emit('before-reactdom-render', { Component, ErrorComponent, appProps })
|
2017-10-30 16:01:40 +01:00
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
// In development runtime errors are caught by react-error-overlay.
|
|
|
|
if (process.env.NODE_ENV === 'development') {
|
|
|
|
renderReactElement((
|
2019-01-25 01:39:15 +01:00
|
|
|
<HeadManagerContext.Provider value={headManager.updateHead}>
|
2019-01-14 15:41:09 +01:00
|
|
|
<App {...appProps} />
|
|
|
|
</HeadManagerContext.Provider>
|
2018-07-24 11:24:40 +02:00
|
|
|
), appContainer)
|
|
|
|
} else {
|
|
|
|
// In production we catch runtime errors using componentDidCatch which will trigger renderError.
|
|
|
|
renderReactElement((
|
2019-03-18 18:08:51 +01:00
|
|
|
<ErrorBoundary fn={(error) => renderError({ App, err: error }).catch(err => console.error('Error rendering page: ', err))}>
|
2019-01-25 01:39:15 +01:00
|
|
|
<HeadManagerContext.Provider value={headManager.updateHead}>
|
2019-01-14 15:41:09 +01:00
|
|
|
<App {...appProps} />
|
|
|
|
</HeadManagerContext.Provider>
|
2018-07-24 11:24:40 +02:00
|
|
|
</ErrorBoundary>
|
|
|
|
), appContainer)
|
2018-04-18 18:18:06 +02:00
|
|
|
}
|
2017-01-31 04:26:17 +01:00
|
|
|
|
2019-03-18 16:22:36 +01:00
|
|
|
emitter.emit('after-reactdom-render', { Component, ErrorComponent, appProps })
|
2017-01-12 02:58:20 +01:00
|
|
|
}
|