Next 5.0+ and Styletron server-side rendering is broken

[matthooks]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I'm trying to upgrade from Next 4.2.3 to 5.1. I have styletron set up as per the example provided here with a few tweaks to make it work for version 3 of styletron. When using Next 5.1, the server side rendering isn't rendering the styles correctly. Client-side rehydration is still happening. This is causing a flash of unstyled content when loading a page for the first time.

Current Behavior

In the example, the styletron object is loaded in the getInitialProps function of a custom Document. In 4.2.3, this object is there, but for some reason it's undefined/null in 5.1+.

See here: https://github.com/zeit/next.js/blob/canary/examples/with-styletron/pages/_document.js#L7

Steps to Reproduce (for bugs)

1. yarn create next-app --example with-styletron with-styletron-app
2. Remove styletron-client and styletron-server from package.json, add styletron at ^3.0.0 and update styletron-react to ^3.0.0
3. Change line 11 in styletron.js to const Styletron = require('styletron-client').default.
4. Run the development server, experience the flash of unstyled content. Also observe that the <style> tag that should be re-hydrated is empty.
5. Try it on 4.2.3. No flash of unstyled content. The rehydrated <style> tag is not empty.

In 5.1.0, the styletron object on this line is undefined/null when server side rendering happens.

Context

Just trying to upgrade to 5+ to take advantage of the improvements! I'd be more than happy to update the styletron example to the latest version of styletron if we can get this working.

Your Environment

Tech	Version
next	5.1.0
node	8.1.3
OS	Mac
browser	Chrome

[vikfroberg]

It's not pretty but I got it working like this https://gist.github.com/vikfroberg/23afed1bfd84fd280645401f1215f4f9

[timneutkens]

@vikfroberg Feel free to send a pull request

[vikfroberg]

I'll send a pull request when someone approves this solution.

[matthooks]

@vikfroberg Confirmed this is working for me as expected. Thanks for digging into this. I'm happy to help you with the PR!

[matthooks]

One note -- I needed to change sheet.media to sheet.attrs.media on this line to get the media queries to work correctly.

[davidjerleke]

It seems to be broken with version 6.1.2. I'm getting a flash of unstyled content when loading a page for the first time. Can anyone get Styletron to server side render using next.js example setup with versions below?

{
    "next": "^6.1.2",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "styletron-engine-atomic": "^1.0.8",
    "styletron-react": "^4.3.5"
}

[timneutkens]

Going to close this as the issue is stale.