styled-jsx does not render server side with custom _document.js #2593

mattfca · 2017-07-19T00:55:55Z

I am using styled-jsx throughout my app and I am getting a flicker when the server loads the initial page.
This only happens when I use a custom _document.js, so it must be something with that page.

This is the code:

import Document, { Head, Main, NextScript } from 'next/document'
import GoogleTagManager from '../utils/GTM'
import flush from 'styled-jsx/server'

export default class MyDocument extends Document {
    static async getInitialProps ({ renderPage }) {
        const { html, head } = renderPage()
        const styles = flush()
        return { html, head, styles }
    }
    render () {
        console.log('styles: ', this.props.styles)
        return (
            <html>
                <head>
                    <script src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_KEY}`} />
                    <meta charSet="utf-8" />
                    {this.props.styles}
                </head>
                <body className="body">
                    <GoogleTagManager gtmId='GTM-xxx' />
                    <div id="fb-root" />
                    <Main />
                    <NextScript />
                </body>
            </html>
        )
    }
}

Output:

styles: []
styles: []

The console output for props.style is always empty arrays. Should this be done in a different way? I'm unsure what to do as the docs seem to say this is all that is needed.

Your Environment

Tech	Version
next	2.4.6
node	7.7.4
OS	w10/macos/centos
browser	all
etc

The text was updated successfully, but these errors were encountered:

mattfca · 2017-07-19T04:31:17Z

I moved everything from _document.js into my Layout components and everything is working as expected.

I did some logging inside style.js from styled-jsx and it doesn't look like it was finding any components to add to stylesMap.

arunoda · 2017-07-19T05:44:47Z

Try to use this as getInitialProps:

    static async getInitialProps (ctx) {
      return Document.getInitialProps (ctx)
    }

timneutkens · 2017-07-19T08:05:54Z

  static getInitialProps ({ renderPage }) {
    const {html, head, errorHtml, chunks} = renderPage()
    const styles = flush()
    return { html, head, errorHtml, chunks, styles }
  }

The document.js signature has changed. Looks like the above now. That's why Arunoda is suggesting calling the parent 👍

mattfca · 2017-07-20T00:28:56Z

Okay so using

static async getInitialProps (ctx) {
      return Document.getInitialProps (ctx)
    }

does work, I have access to a styles prop.

aviramga · 2017-10-16T13:06:25Z

Hi @mattfca, @timneutkens, @arunoda
I got the same issue
This is my getInitialProps:
static async getInitialProps(ctx) {
const { html, head, errorHtml, chunks } = renderPage();
return { html, head, errorHtml, chunks };
}

And changing it to
static async getInitialProps (ctx) {
return Document.getInitialProps (ctx)
}

solves it. But can you please explain why?
Im using latest NextJS.

Also where can I find documentation about document.js and all its capabilities and features?

Thanks!

zation · 2017-10-25T10:46:52Z

This is really weird... When I rewrite getInitialProps with exact same code as original Document, I can not get styles:

  static getInitialProps ({ renderPage }) {
    const { html, head, errorHtml, chunks } = renderPage();
    const styles = flush();
    return { html, head, errorHtml, chunks, styles };
  }

When I use original Document.getInitialProps or not to rewrite it, I can get styles. Can anyone let me know why? Thanks!

pruhstal · 2017-10-25T17:50:43Z

Out of curiosity, is it necessary to call const styles = flush(); for styled jsx? @arunoda @timneutkens

timneutkens · 2017-10-25T17:54:13Z

@pruhstal it's the way to flush all the styles into a string and make sure they're rendered server side, so yes, if you're using styled-jsx. If you're not using styled-jsx at all you don't need it.

mattfca closed this as completed Jul 20, 2017

ianwang mentioned this issue Apr 26, 2018

remove jsx and global attributes to fix broken style during initial load CodementorIO/nextjs-redux-starter#4

Merged

NathanielHill mentioned this issue May 5, 2018

Example for styled-components breaks the support of styled-jsx #3422

Closed

1 task

znarf mentioned this issue Oct 1, 2018

Fix styled-jsx server side rendering opencollective/opencollective-frontend#869

Merged

lock bot locked as resolved and limited conversation to collaborators Mar 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

styled-jsx does not render server side with custom _document.js #2593

styled-jsx does not render server side with custom _document.js #2593

mattfca commented Jul 19, 2017 •

edited

Loading

mattfca commented Jul 19, 2017

arunoda commented Jul 19, 2017 •

edited

Loading

timneutkens commented Jul 19, 2017

mattfca commented Jul 20, 2017

aviramga commented Oct 16, 2017

zation commented Oct 25, 2017

pruhstal commented Oct 25, 2017

timneutkens commented Oct 25, 2017

styled-jsx does not render server side with custom _document.js #2593

styled-jsx does not render server side with custom _document.js #2593

Comments

mattfca commented Jul 19, 2017 • edited Loading

Your Environment

mattfca commented Jul 19, 2017

arunoda commented Jul 19, 2017 • edited Loading

timneutkens commented Jul 19, 2017

mattfca commented Jul 20, 2017

aviramga commented Oct 16, 2017

zation commented Oct 25, 2017

pruhstal commented Oct 25, 2017

timneutkens commented Oct 25, 2017

mattfca commented Jul 19, 2017 •

edited

Loading

arunoda commented Jul 19, 2017 •

edited

Loading