Don’t include script that we know is going to error (#3747)

* Don’t include script that we know is going to error

* Add check to make sure page script is not included

* Loop over script tags, cheerio fails on /
This commit is contained in:
Tim Neutkens 2018-02-09 16:55:45 +01:00 committed by Arunoda Susiripala
parent 2ba6a9aff7
commit 9a10461150
3 changed files with 25 additions and 5 deletions

View file

@ -84,12 +84,12 @@ export class Head extends Component {
render () { render () {
const { head, styles, __NEXT_DATA__ } = this.context._documentProps const { head, styles, __NEXT_DATA__ } = this.context._documentProps
const { pathname, buildId, assetPrefix } = __NEXT_DATA__ const { page, pathname, buildId, assetPrefix } = __NEXT_DATA__
const pagePathname = getPagePathname(pathname) const pagePathname = getPagePathname(pathname)
return <head {...this.props}> return <head {...this.props}>
{(head || []).map((h, i) => React.cloneElement(h, { key: h.key || i }))} {(head || []).map((h, i) => React.cloneElement(h, { key: h.key || i }))}
<link rel='preload' href={`${assetPrefix}/_next/${buildId}/page${pagePathname}`} as='script' /> {page !== '_error' && <link rel='preload' href={`${assetPrefix}/_next/${buildId}/page${pagePathname}`} as='script' />}
<link rel='preload' href={`${assetPrefix}/_next/${buildId}/page/_error.js`} as='script' /> <link rel='preload' href={`${assetPrefix}/_next/${buildId}/page/_error.js`} as='script' />
{this.getPreloadDynamicChunks()} {this.getPreloadDynamicChunks()}
{this.getPreloadMainLinks()} {this.getPreloadMainLinks()}
@ -173,7 +173,7 @@ export class NextScript extends Component {
render () { render () {
const { staticMarkup, __NEXT_DATA__, chunks } = this.context._documentProps const { staticMarkup, __NEXT_DATA__, chunks } = this.context._documentProps
const { pathname, buildId, assetPrefix } = __NEXT_DATA__ const { page, pathname, buildId, assetPrefix } = __NEXT_DATA__
const pagePathname = getPagePathname(pathname) const pagePathname = getPagePathname(pathname)
__NEXT_DATA__.chunks = chunks.names __NEXT_DATA__.chunks = chunks.names
@ -193,9 +193,18 @@ export class NextScript extends Component {
__NEXT_REGISTER_CHUNK = function (chunkName, fn) { __NEXT_REGISTER_CHUNK = function (chunkName, fn) {
__NEXT_LOADED_CHUNKS__.push({ chunkName: chunkName, fn: fn }) __NEXT_LOADED_CHUNKS__.push({ chunkName: chunkName, fn: fn })
} }
${page === '_error' && `
__NEXT_REGISTER_PAGE('/index', function() {
var error = new Error('Page does not exist: ${htmlescape(pathname)}')
error.statusCode = 404
return { error: error }
})
`}
` `
}} />} }} />}
<script async id={`__NEXT_PAGE__${pathname}`} type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page${pagePathname}`} /> {page !== '_error' && <script async id={`__NEXT_PAGE__${pathname}`} type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page${pagePathname}`} />}
<script async id={`__NEXT_PAGE__/_error`} type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page/_error.js`} /> <script async id={`__NEXT_PAGE__/_error`} type='text/javascript' src={`${assetPrefix}/_next/${buildId}/page/_error.js`} />
{staticMarkup ? null : this.getDynamicChunks()} {staticMarkup ? null : this.getDynamicChunks()}
{staticMarkup ? null : this.getScripts()} {staticMarkup ? null : this.getScripts()}

View file

@ -105,7 +105,8 @@ async function doRender (req, res, pathname, query, {
const doc = createElement(Document, { const doc = createElement(Document, {
__NEXT_DATA__: { __NEXT_DATA__: {
props, props,
pathname, page, // the rendered page
pathname, // the requested path
query, query,
buildId, buildId,
buildStats, buildStats,

View file

@ -112,6 +112,16 @@ export default function ({ app }, suiteName, render, fetch) {
expect($('h2').text()).toBe('This page could not be found.') expect($('h2').text()).toBe('This page could not be found.')
}) })
test('error 404 should not have page script', async () => {
const $ = await get$('/non-existent')
$('script[src]').each((index, element) => {
const src = $(element).attr('src')
if (src.includes('/non-existent')) {
throw new Error('Page includes page script')
}
})
})
describe('with the HOC based router', () => { describe('with the HOC based router', () => {
it('should navigate as expected', async () => { it('should navigate as expected', async () => {
const $ = await get$('/nav/with-hoc') const $ = await get$('/nav/with-hoc')