Custom App - Invalid hook call. Hooks can only be called inside of the body of a function component

Bug report

Describe the bug

When customizing the next app (following custom-app) using the api-routes-apollo example, I get the following error:

Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
resolveCurrentlyRenderingComponent
file:///dev/api-routes-apollo-server-and-client/node_modules/react-dom/cjs/react-dom-server.node.development.js (967:13)
Object.useMemo
file:///dev/api-routes-apollo-server-and-client/node_modules/react-dom/cjs/react-dom-server.node.development.js (1217:33)
useMemo
file:///dev/api-routes-apollo-server-and-client/node_modules/react/cjs/react.development.js (1521:21)
apollo/client.js (46:24) @ useApollo

  44 | 
  45 | export function useApollo(initialState) {
> 46 |   const store = useMemo(() => initializeApollo(initialState), [initialState])
     |                        ^
  47 |   return store
  48 | }
  49 | 
Call Stack
MyApp.render
pages/_app.js (21:35)
processChild
file:///dev/api-routes-apollo-server-and-client/node_modules/react-dom/cjs/react-dom-server.node.development.js (3134:18)
resolve
file:///dev/api-routes-apollo-server-and-client/node_modules/react-dom/cjs/react-dom-server.node.development.js (2960:5)
ReactDOMServerRenderer.render
file:///dev/api-routes-apollo-server-and-client/node_modules/react-dom/cjs/react-dom-server.node.development.js (3435:22)
ReactDOMServerRenderer.read
file:///dev/api-routes-apollo-server-and-client/node_modules/react-dom/cjs/react-dom-server.node.development.js (3373:29)
renderToString
file:///dev/api-routes-apollo-server-and-client/node_modules/react-dom/cjs/react-dom-server.node.development.js (3988:27)
render
file:///dev/api-routes-apollo-server-and-client/node_modules/next/dist/next-server/server/render.js (3:298)
Object.renderPage
file:///dev/api-routes-apollo-server-and-client/node_modules/next/dist/next-server/server/render.js (46:1020)
Function.getInitialProps
../../pages/_document.tsx (92:33)
loadGetInitialProps
file:///dev/api-routes-apollo-server-and-client/node_modules/next/dist/next-server/lib/utils.js (5:101)
renderToHTML
file:///dev/api-routes-apollo-server-and-client/node_modules/next/dist/next-server/server/render.js (46:1330)
async
file:///dev/api-routes-apollo-server-and-client/node_modules/next/dist/next-server/server/next-server.js (68:285)
Hide collapsed frames

To Reproduce

1. Clone api-routes-apollo example
2. Change _app.js to:

import App from 'next/app';
import { ApolloProvider } from '@apollo/react-hooks'
import { useApollo } from '../apollo/client'

class MyApp extends App {

  render() {
    const { Component, pageProps } = this.props;
    const apolloClient = useApollo(pageProps.initialApolloState)

    return (
      <ApolloProvider client={apolloClient}>
        <Component {...pageProps} />
      </ApolloProvider>
    );

  }
}

export default MyApp;

System information

• OS: Linux Mint 19.3
• Version of Next.js: 9.4.4
• Version of Node.js: 12.15.0

[trompx]

Awesome, thanks for the example and amazing framework!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.