Next.js: with-apollo breaks with #8801

[fillipvt]

Examples bug report

Example name

with-apollo

Describe the bug

Getting this error:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. in Unknown (at _app.js:24) in ThemeProvider (at _app.js:23) in WagglioMainApp in Container (created by AppContainer) in AppContainer

Current _app.js looks like this:

````
import 'cross-fetch/polyfill';
import App from 'next/app';
import React from 'react';
import { ThemeProvider } from 'styled-components';

const theme = {};

class WagglioMainApp extends App {
// removed getInitialProps due to this https://github.com/zeit/next.js/blob/master/errors/opt-out-automatic-prerendering.md

// This function is for Material UI
componentDidMount() {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentNode.removeChild(jssStyles);
}
}

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


);
}
}

export default WagglioMainApp;
````

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Add both Material-UI and styled-components
2. Implement with-apollo #8801

Expected behavior

App should start without errors

System information

• OS: MacOS
• Version of Next.js: 9.2.1

[HaNdTriX]

Please note that there was a breaking change introduced in #10422.

-- export default withApollo(PageComponent, { ssr: true })
++ export default withApollo({ ssr: true })(PageComponent)

From your error message I would guess that this change might be related to your bug report.

[fillipvt]

@HaNdTriX totally right! Completely missed that one. Thanks for pointing it out and thanks for the work with the apollo example. It has been very helpful!

Closing.