Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show error when router or Component are returned in _app.js #6487

Merged
merged 5 commits into from
Mar 1, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions errors/cant-override-next-props.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Can't Override Next Props

#### Why This Error Occurred

In your `pages/_app.js` you returned an object from `getInitialProps` that contained a `router` or `Component` value. These property names are used by Next.js and can not be overwritten.

#### Possible Ways to Fix It

Look in your _app.js component's `getInitialProps` function and make sure neither of these property names are present in the object returned.

### Useful Links

- [The issue this was reported in: #6480](https://github.com/zeit/next.js/issues/6480)
4 changes: 4 additions & 0 deletions packages/next-server/server/render.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,10 @@ export async function renderToHTML(
return render(renderElementToString, <ErrorDebug error={err} />)
}

if (dev && (props.router || props.Component)) {
throw new Error(`'router' and 'Component' can not be returned in getInitialProps from _app.js https://err.sh/zeit/next.js/cant-override-next-props.md`)
timneutkens marked this conversation as resolved.
Show resolved Hide resolved
}

const {
App: EnhancedApp,
Component: EnhancedComponent,
Expand Down
26 changes: 26 additions & 0 deletions test/integration/no-override-next-props/pages/_app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react'
import App, { Container } from 'next/app'

class MyApp extends App {
static async getInitialProps ({ Component, ctx }) {
let pageProps = {}

if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}

return { pageProps, router: () => {} }
}

render () {
const { Component, pageProps } = this.props

return (
<Container>
<Component {...pageProps} />
</Container>
)
}
}

export default MyApp
3 changes: 3 additions & 0 deletions test/integration/no-override-next-props/pages/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default () => (
<p>Hello there 👋</p>
)
27 changes: 27 additions & 0 deletions test/integration/no-override-next-props/test/index.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/* eslint-env jest */
/* global jasmine */
import { join } from 'path'
import {
renderViaHTTP,
launchApp,
findPort,
killApp
} from 'next-test-utils'

jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 30

let server
let appPort

describe('Dynamic require', () => {
beforeAll(async () => {
appPort = await findPort()
server = await launchApp(join(__dirname, '../'), appPort)
})
afterAll(() => killApp(server))

it('should show error when a Next prop is returned in _app.getInitialProps', async () => {
const html = await renderViaHTTP(appPort, '/')
expect(html).toMatch(/https:\/\/err\.sh\/zeit\/next\.js\/cant-override-next-props\.md/)
})
})