Implementing with-graphql-react example alongside createGlobalstyle from styled-components causes conflicts

[fev4]

Hello,

Just today I found this behavior and would like to start a discussion in order to get to the bottom of it, because really, I'm not sure how to fix it.

This is the error:

(node:22363) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'children' of undefined
    at GlobalStyleComponent.render (/Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/styled-components/dist/styled-co
mponents.cjs.js:2376:93)
    at recurse (/Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/graphql-react/lib/preload.js:104:35)
    at /Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/graphql-react/lib/preload.js:40:20
    at Array.forEach (<anonymous>)
    at recurse (/Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/graphql-react/lib/preload.js:39:19)
    at recurse (/Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/graphql-react/lib/preload.js:112:11)
    at recurse (/Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/graphql-react/lib/preload.js:104:18)
    at recurse (/Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/graphql-react/lib/preload.js:104:18)
    at recursePreload (/Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/graphql-react/lib/preload.js:116:7)
    at /Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/graphql-react/lib/preload.js:120:5
    at new Promise (<anonymous>)
    at preload (/Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/graphql-react/lib/preload.js:14:10)
    at /Users/Felipe/Local_Projects/wagglio-gitlab/monorepo/node_modules/next-graphql-react/lib/index.js:77:38
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:22363) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:22363) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

It seems like a conflict between preload and createGlobalStyles (from styled-components). This is the implementation of global styles, it goes according to their docs:

import { normalize } from 'styled-normalize'
import { createGlobalStyle } from 'styled-components'

import { scales } from './variables'

export const WGlobalStyles = createGlobalStyle`
  ${normalize}
  html {
  font-size: ${scales.baseFont}px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  }
  *, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
  }
`

It's simply the implementation of base font sizes and resets from styled-normalize and just a bit of my own.

This is the _app.js implementation on the side of Next.js. Comes directly from the example with-graphql-react and trying to implement the global styles :

import 'cross-fetch/polyfill'
import {Provider} from 'graphql-react'
import {withGraphQL} from 'next-graphql-react'
import App, { Container } from 'next/app'

import { WGlobalStyles } from '@wagglio/components'

class WagglioMainApp extends App {
    render() {
    const { Component, pageProps, graphql } = this.props
    return (
      <Container>
        <Provider value={graphql}>
          <WGlobalStyles />
          <Component {...pageProps} />
        </Provider>
      </Container>
    )
  }
}

export default withGraphQL(WagglioMainApp)

Everything works whenever I comment out <WGlobalStyles />. Not sure how to pin point the unhandled promise in this case.

If there's any other info I can provide in order to help solve this, please let me know.

Cheers

[jaydenseric]

What is the version of Next.js you are using?

[fev4]

@jaydenseric these are the related deps

    "cross-fetch": "^3.0.0",
    "graphql-react": "^6.0.0",
    "next": "^7.0.2",
    "next-graphql-react": "^1.0.1",
    "react": "16.7.0",
    "react-dom": "16.7.0",
    "styled-components": "^4.1.3",
    "styled-normalize": "^8.0.4",

Thanks for answering btw!

[jaydenseric]

I've managed to reproduce the issue, and am trying to work out if it's a styled-components or graphql-react bug.

[jaydenseric]

So it was kinda both.

I have made a styled-components PR to make the GlobalStyleComponent created by createGlobalStyle call the base constructor with props, which is a React class component best practice.

Since a lot of React SSR libraries are fault-tolerant of this, I will look at making the graphql-react preload function account for the situation too.

Also, I have some ideas how to make how preload render errors display better, and not crash SSR.

[fev4]

This looks awesome. Thank you @jaydenseric !

[jaydenseric]

graphql-react@6.0.1 and next-graphql-react@1.0.2 have been published, fixing all these issues 🙏