diff --git a/errors/cant-override-next-props.md b/errors/cant-override-next-props.md new file mode 100644 index 0000000000000000000000000000000000000000..ea3e5213c18e7f86a4da26d3231f41d64ce8acbb --- /dev/null +++ b/errors/cant-override-next-props.md @@ -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) diff --git a/packages/next-server/server/render.tsx b/packages/next-server/server/render.tsx index caee0e41f307b3a6121b9c6cc4de688a9e650e1a..aa2ecd0d1adfb5441ff0d1a58f43e09d0cf75908 100644 --- a/packages/next-server/server/render.tsx +++ b/packages/next-server/server/render.tsx @@ -212,6 +212,10 @@ export async function renderToHTML( return render(renderElementToString, ) } + 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`) + } + const { App: EnhancedApp, Component: EnhancedComponent, diff --git a/test/integration/no-override-next-props/pages/_app.js b/test/integration/no-override-next-props/pages/_app.js new file mode 100644 index 0000000000000000000000000000000000000000..c56373cc5a02b0abd6bd1e9e51be0669ad98395f --- /dev/null +++ b/test/integration/no-override-next-props/pages/_app.js @@ -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 ( + + + + ) + } +} + +export default MyApp diff --git a/test/integration/no-override-next-props/pages/index.js b/test/integration/no-override-next-props/pages/index.js new file mode 100644 index 0000000000000000000000000000000000000000..fdb1408df1ec349ff147884def3dc3c51b6ec03a --- /dev/null +++ b/test/integration/no-override-next-props/pages/index.js @@ -0,0 +1,3 @@ +export default () => ( +

Hello there 👋

+) diff --git a/test/integration/no-override-next-props/test/index.test.js b/test/integration/no-override-next-props/test/index.test.js new file mode 100644 index 0000000000000000000000000000000000000000..4e5d8c26469f4ac1a37ff278db16c7489592291d --- /dev/null +++ b/test/integration/no-override-next-props/test/index.test.js @@ -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/) + }) +})