Next 5.0+ and Styletron server-side rendering is broken

• 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

[matthooks]

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

[timneutkens]

Going to close this as the issue is stale.