-
Notifications
You must be signed in to change notification settings - Fork 26.1k
/
index.js
530 lines (464 loc) · 14.3 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
/* global location */
import { createRouter, makePublicRouterInstance } from 'next/router'
import { parse as parseQs, stringify as stringifyQs } from 'querystring'
import React from 'react'
import ReactDOM from 'react-dom'
import { HeadManagerContext } from '../next-server/lib/head-manager-context'
import mitt from '../next-server/lib/mitt'
import { RouterContext } from '../next-server/lib/router-context'
import { isDynamicRoute } from '../next-server/lib/router/utils/is-dynamic'
import * as envConfig from '../next-server/lib/runtime-config'
import { getURL, loadGetInitialProps, ST } from '../next-server/lib/utils'
import initHeadManager from './head-manager'
import PageLoader from './page-loader'
import measureWebVitals from './performance-relayer'
/// <reference types="react-dom/experimental" />
if (!('finally' in Promise.prototype)) {
// eslint-disable-next-line no-extend-native
Promise.prototype.finally = require('next/dist/build/polyfills/finally-polyfill.min')
}
const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent)
window.__NEXT_DATA__ = data
export const version = process.env.__NEXT_VERSION
const {
props,
err,
page,
query,
buildId,
assetPrefix,
runtimeConfig,
dynamicIds,
isFallback,
} = data
const prefix = assetPrefix || ''
// 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
__webpack_public_path__ = `${prefix}/_next/` //eslint-disable-line
// Initialize next/config with the environment configuration
envConfig.setConfig({
serverRuntimeConfig: {},
publicRuntimeConfig: runtimeConfig || {},
})
const asPath = getURL()
const pageLoader = new PageLoader(buildId, prefix)
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
const updateHead = initHeadManager()
const appElement = document.getElementById('__next')
let lastAppProps
let webpackHMR
export let router
let ErrorComponent
let Component
let App, onPerfEntry
class Container extends React.Component {
componentDidCatch(err, info) {
this.props.fn(err, info)
}
componentDidMount() {
this.scrollToHash()
if (process.env.__NEXT_PLUGINS) {
// eslint-disable-next-line
import('next-plugin-loader?middleware=unstable-post-hydration!')
.then(mod => {
return mod.default()
})
.catch(err => {
console.error('Error calling post-hydration for plugins', err)
})
}
// We need to replace the router state if:
// - the page was (auto) exported and has a query string or search (hash)
// - it was auto exported and is a dynamic route (to provide params)
// - if it is a client-side skeleton (fallback render)
if (
router.isSsr &&
(isFallback ||
(data.nextExport &&
(isDynamicRoute(router.pathname) || location.search)) ||
(props.__N_SSG && location.search))
) {
// update query on mount for exported pages
router.replace(
router.pathname +
'?' +
stringifyQs({
...router.query,
...parseQs(location.search.substr(1)),
}),
asPath,
{
// WARNING: `_h` is an internal option for handing Next.js
// client-side hydration. Your app should _never_ use this property.
// It may change at any time without notice.
_h: 1,
// Fallback pages must trigger the data fetch, so the transition is
// not shallow.
// Other pages (strictly updating query) happens shallowly, as data
// requirements would already be present.
shallow: !isFallback,
}
)
}
if (process.env.__NEXT_TEST_MODE) {
window.__NEXT_HYDRATED = true
if (window.__NEXT_HYDRATED_CB) {
window.__NEXT_HYDRATED_CB()
}
}
}
componentDidUpdate() {
this.scrollToHash()
}
scrollToHash() {
let { hash } = location
hash = hash && hash.substring(1)
if (!hash) return
const el = document.getElementById(hash)
if (!el) return
// If we call scrollIntoView() in here without a setTimeout
// it won't scroll properly.
setTimeout(() => el.scrollIntoView(), 0)
}
render() {
if (process.env.NODE_ENV === 'production') {
return this.props.children
}
if (process.env.NODE_ENV !== 'production') {
if (process.env.__NEXT_FAST_REFRESH) {
const {
ReactDevOverlay,
} = require('@next/react-dev-overlay/lib/client')
return <ReactDevOverlay>{this.props.children}</ReactDevOverlay>
}
return this.props.children
}
}
}
export const emitter = mitt()
export default async ({ webpackHMR: passedWebpackHMR } = {}) => {
// This makes sure this specific lines are removed in production
if (process.env.NODE_ENV === 'development') {
webpackHMR = passedWebpackHMR
}
const { page: app, mod } = await pageLoader.loadPageScript('/_app')
App = app
if (mod && mod.reportWebVitals) {
onPerfEntry = ({
id,
name,
startTime,
value,
duration,
entryType,
entries,
}) => {
// Combines timestamp with random number for unique ID
const uniqueID = `${Date.now()}-${Math.floor(Math.random() * (9e12 - 1)) +
1e12}`
let perfStartEntry
if (entries && entries.length) {
perfStartEntry = entries[0].startTime
}
mod.reportWebVitals({
id: id || uniqueID,
name,
startTime: startTime || perfStartEntry,
value: value == null ? duration : value,
label:
entryType === 'mark' || entryType === 'measure'
? 'custom'
: 'web-vital',
})
}
}
let initialErr = err
try {
;({ page: Component } = await pageLoader.loadPage(page))
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}"`
)
}
}
} catch (error) {
// This catches errors like throwing in the top level of a module
initialErr = error
}
if (window.__NEXT_PRELOADREADY) {
await window.__NEXT_PRELOADREADY(dynamicIds)
}
router = createRouter(page, query, asPath, {
initialProps: props,
pageLoader,
App,
Component,
wrapApp,
err: initialErr,
isFallback,
subscription: ({ Component, props, err }, App) => {
render({ App, Component, props, err })
},
})
// call init-client middleware
if (process.env.__NEXT_PLUGINS) {
// eslint-disable-next-line
import('next-plugin-loader?middleware=on-init-client!')
.then(mod => {
return mod.default({ router })
})
.catch(err => {
console.error('Error calling client-init for plugins', err)
})
}
const renderCtx = { App, Component, props, err: initialErr }
if (process.env.NODE_ENV === 'production') {
render(renderCtx)
return emitter
}
if (process.env.NODE_ENV !== 'production') {
return { emitter, render, renderCtx }
}
}
export async function render(props) {
if (props.err) {
await renderError(props)
return
}
try {
await doRender(props)
} catch (err) {
await renderError({ ...props, err })
}
}
// 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.
export function renderError(props) {
const { App, err } = props
// In development runtime errors are caught by react-error-overlay
// In production we catch runtime errors using componentDidCatch which will trigger renderError
if (process.env.NODE_ENV !== 'production') {
if (process.env.__NEXT_FAST_REFRESH) {
const { getNodeError } = require('@next/react-dev-overlay/lib/client')
// Server-side runtime errors need to be re-thrown on the client-side so
// that the overlay is rendered.
if (isInitialRender) {
setTimeout(() => {
let error
try {
// Generate a new error object. We `throw` it because some browsers
// will set the `stack` when thrown, and we want to ensure ours is
// not overridden when we re-throw it below.
throw new Error(err.message)
} catch (e) {
error = e
}
error.name = err.name
error.stack = err.stack
const node = getNodeError(error)
throw node
})
}
// We need to render an empty <App> so that the `<ReactDevOverlay>` can
// render itself.
return doRender({
App: () => null,
props: {},
Component: () => null,
err: null,
})
}
// Legacy behavior:
return Promise.resolve(
webpackHMR.reportRuntimeError(webpackHMR.prepareError(err))
)
}
if (process.env.__NEXT_PLUGINS) {
// eslint-disable-next-line
import('next-plugin-loader?middleware=on-error-client!')
.then(mod => {
return mod.default({ err })
})
.catch(err => {
console.error('error calling on-error-client for plugins', err)
})
}
// Make sure we log the error to the console, otherwise users can't track down issues.
console.error(err)
return pageLoader.loadPage('/_error').then(({ page: ErrorComponent }) => {
// In production we do a normal render with the `ErrorComponent` as component.
// 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 AppTree = wrapApp(App)
const appCtx = {
Component: ErrorComponent,
AppTree,
router,
ctx: { err, pathname: page, query, asPath, AppTree },
}
return Promise.resolve(
props.props ? props.props : loadGetInitialProps(App, appCtx)
).then(initProps =>
doRender({
...props,
err,
Component: ErrorComponent,
props: initProps,
})
)
})
}
// If hydrate does not exist, eg in preact.
let isInitialRender = typeof ReactDOM.hydrate === 'function'
let reactRoot = null
function renderReactElement(reactEl, domEl) {
if (process.env.__NEXT_REACT_MODE !== 'legacy') {
if (!reactRoot) {
const opts = { hydrate: true }
reactRoot =
process.env.__NEXT_REACT_MODE === 'concurrent'
? ReactDOM.unstable_createRoot(domEl, opts)
: ReactDOM.unstable_createBlockingRoot(domEl, opts)
}
reactRoot.render(reactEl)
} else {
// mark start of hydrate/render
if (ST) {
performance.mark('beforeRender')
}
// The check for `.hydrate` is there to support React alternatives like preact
if (isInitialRender) {
ReactDOM.hydrate(reactEl, domEl, markHydrateComplete)
isInitialRender = false
if (onPerfEntry && ST) {
measureWebVitals(onPerfEntry)
}
} else {
ReactDOM.render(reactEl, domEl, markRenderComplete)
}
}
}
function markHydrateComplete() {
if (!ST) return
performance.mark('afterHydrate') // mark end of hydration
performance.measure(
'Next.js-before-hydration',
'navigationStart',
'beforeRender'
)
performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate')
if (onPerfEntry) {
performance.getEntriesByName('Next.js-hydration').forEach(onPerfEntry)
}
clearMarks()
}
function markRenderComplete() {
if (!ST) return
performance.mark('afterRender') // mark end of render
const navStartEntries = performance.getEntriesByName('routeChange', 'mark')
if (!navStartEntries.length) {
return
}
performance.measure(
'Next.js-route-change-to-render',
navStartEntries[0].name,
'beforeRender'
)
performance.measure('Next.js-render', 'beforeRender', 'afterRender')
if (onPerfEntry) {
performance.getEntriesByName('Next.js-render').forEach(onPerfEntry)
performance
.getEntriesByName('Next.js-route-change-to-render')
.forEach(onPerfEntry)
}
clearMarks()
;['Next.js-route-change-to-render', 'Next.js-render'].forEach(measure =>
performance.clearMeasures(measure)
)
}
function clearMarks() {
;[
'beforeRender',
'afterHydrate',
'afterRender',
'routeChange',
].forEach(mark => performance.clearMarks(mark))
}
function AppContainer({ children }) {
return (
<Container
fn={error =>
renderError({ App, err: error }).catch(err =>
console.error('Error rendering page: ', err)
)
}
>
<RouterContext.Provider value={makePublicRouterInstance(router)}>
<HeadManagerContext.Provider value={updateHead}>
{children}
</HeadManagerContext.Provider>
</RouterContext.Provider>
</Container>
)
}
const wrapApp = App => props => {
const appProps = { ...props, Component, err, router }
return (
<AppContainer>
<App {...appProps} />
</AppContainer>
)
}
async function doRender({ App, Component, props, err }) {
// Usual getInitialProps fetching is handled in next/router
// this is for when ErrorComponent gets replaced by Component by HMR
if (
!props &&
Component &&
Component !== ErrorComponent &&
lastAppProps.Component === ErrorComponent
) {
const { pathname, query, asPath } = router
const AppTree = wrapApp(App)
const appCtx = {
router,
AppTree,
Component: ErrorComponent,
ctx: { err, pathname, query, asPath, AppTree },
}
props = await loadGetInitialProps(App, appCtx)
}
Component = Component || lastAppProps.Component
props = props || lastAppProps.props
const appProps = { ...props, Component, err, router }
// lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
lastAppProps = appProps
emitter.emit('before-reactdom-render', {
Component,
ErrorComponent,
appProps,
})
const elem = (
<AppContainer>
<App {...appProps} />
</AppContainer>
)
// We catch runtime errors using componentDidCatch which will trigger renderError
renderReactElement(
process.env.__NEXT_STRICT_MODE ? (
<React.StrictMode>{elem}</React.StrictMode>
) : (
elem
),
appElement
)
emitter.emit('after-reactdom-render', { Component, ErrorComponent, appProps })
}