Call getInitialProps on Component when it’s not defined on App (#9287)

Fixes #9284

packages/next/next-server/lib/utils.ts

@@ -240,11 +240,11 @@ export async function loadGetInitialProps<
   C extends BaseContext,
   IP = {},
   P = {}
->(Component: NextComponentType<C, IP, P>, ctx: C): Promise<IP> {
+>(App: NextComponentType<C, IP, P>, ctx: C): Promise<IP> {
   if (process.env.NODE_ENV !== 'production') {
-    if (Component.prototype && Component.prototype.getInitialProps) {
+    if (App.prototype && App.prototype.getInitialProps) {
       const message = `"${getDisplayName(
-        Component
+        App
       )}.getInitialProps()" is defined as an instance method - visit https://err.sh/zeit/next.js/get-initial-props-as-an-instance-method for more information.`
       throw new Error(message)
     }
@@ -252,11 +252,17 @@ export async function loadGetInitialProps<
   // when called from _app `ctx` is nested in `ctx`
   const res = ctx.res || (ctx.ctx && ctx.ctx.res)
 
-  if (!Component.getInitialProps) {
+  if (!App.getInitialProps) {
+    if (ctx.ctx && ctx.Component) {
+      // @ts-ignore pageProps default
+      return {
+        pageProps: await loadGetInitialProps(ctx.Component, ctx.ctx),
+      }
+    }
     return {} as any
   }
 
-  const props = await Component.getInitialProps(ctx)
+  const props = await App.getInitialProps(ctx)
 
   if (res && isResSent(res)) {
     return props
@@ -264,7 +270,7 @@ export async function loadGetInitialProps<
 
   if (!props) {
     const message = `"${getDisplayName(
-      Component
+      App
     )}.getInitialProps()" should resolve to an object. But found "${props}" instead.`
     throw new Error(message)
   }
@@ -273,7 +279,7 @@ export async function loadGetInitialProps<
     if (Object.keys(props).length === 0 && !ctx.ctx) {
       console.warn(
         `${getDisplayName(
-          Component
+          App
         )} returned an empty object from \`getInitialProps\`. This de-optimizes and prevents automatic static optimization. https://err.sh/zeit/next.js/empty-object-getInitialProps`
       )
     }

test/integration/app-functional/next.config.js

+module.exports = {
+  crossOrigin: 'anonymous'
+}

test/integration/app-functional/pages/_app.js

+function MyApp ({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+// Only uncomment this method if you have blocking data requirements for
+// every single page in your application. This disables the ability to
+// perform automatic static optimization, causing every page in your app to
+// be server-side rendered.
+//
+// MyApp.getInitialProps = async (appContext) => {
+//   // calls page's `getInitialProps` and fills `appProps.pageProps`
+//   const appProps = await App.getInitialProps(appContext);
+//
+//   return { ...appProps }
+// }
+
+export default MyApp

test/integration/app-functional/pages/index.js

+function Page ({ message }) {
+  return <div>{message}</div>
+}
+
+Page.getInitialProps = async ({ req }) => {
+  return {
+    message: 'Hello World!!!'
+  }
+}
+
+export default Page

test/integration/app-functional/shared-module.js

+let moduleState = 'INITIAL'
+
+export function setState (state) {
+  moduleState = state
+}
+
+export default function currentState () {
+  return moduleState
+}

test/integration/app-functional/test/index.test.js

+/* eslint-env jest */
+/* global jasmine */
+import { join } from 'path'
+import { renderViaHTTP, findPort, launchApp, killApp } from 'next-test-utils'
+
+const context = {
+  output: ''
+}
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
+
+const collectOutput = message => {
+  context.output += message
+}
+
+describe('Document and App', () => {
+  beforeAll(async () => {
+    context.appPort = await findPort()
+    context.server = await launchApp(join(__dirname, '../'), context.appPort, {
+      onStdout: collectOutput,
+      onStderr: collectOutput
+    })
+
+    // pre-build all pages at the start
+    await Promise.all([renderViaHTTP(context.appPort, '/')])
+  })
+  afterAll(() => killApp(context.server))
+
+  it('should not have any missing key warnings', async () => {
+    const html = await renderViaHTTP(context.appPort, '/')
+    expect(html).toMatch(/<div>Hello World!!!<\/div>/)
+  })
+})