Error with khan/aphrodite for CSS when manually reload

[alexrqs]

// pages/index.js
import React from 'react'
import { StyleSheet, css } from 'aphrodite'

const styles = StyleSheet.create({ h1: { color: 'crimson' } })

const header = () => <h1 className={css(styles.h1)}>Hola</h1>

export default header;

If the document is already open when you apply css(styles.h1) it takes the chages and you see the red text, but if you manually reload the browser or the application is just starting you get a 500 | Internal Server Error.

and the console will give you

Error: Cannot automatically buffer without a document
    at injectGeneratedCSSOnce (/nextApp/node_modules/aphrodite/lib/inject.js:138:23)
    at injectStyleOnce (/nextApp/node_modules/aphrodite/lib/inject.js:156:9)
    at injectAndGetClassName (/nextApp/node_modules/aphrodite/lib/inject.js:232:5)
    at css (/nextApp/node_modules/aphrodite/lib/exports.js:133:54)
    at header (/nextApp/.next/dist/pages/index.js:22:37)
    at /nextApp/node_modules/react/lib/ReactCompositeComponent.js:305:16
    at measureLifeCyclePerf (/nextApp/node_modules/react/lib/ReactCompositeComponent.js:74:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (/nextApp/node_modules/react/lib/ReactCompositeComponent.js:304:14)
    at ReactCompositeComponentWrapper._constructComponent (/nextApp/node_modules/react/lib/ReactCompositeComponent.js:279:21)
    at ReactCompositeComponentWrapper.mountComponent (/nextApp/node_modules/react/lib/ReactCompositeComponent.js:187:21)

I get the import style from 'next/css' but I already have another project with aphrodite modules that I'd like to reuse.

[nkzawa]

I guess the error occurs because there is no setting for server rendering of aphrodite.

Khan/aphrodite#33

And since there is no way to add the setting, you wouldn't be able to use the library.
I recommend to convert your code to next/css.

[impronunciable]

@alexrqs your snippet with next/css looks like this:

// pages/index.js
import React from 'react'
import css from 'next/css'

const styles = { h1: { color: 'crimson' } }

const header = () => <h1 className={css(styles.h1)}>Hola</h1>

export default header;

[xymostech]

@nkzawa Aphrodite does support server-side rendering. You need to wrap the server render in Aphrodite's StyleSheetServer.renderStatic instead of using glamour's renderStatic function in server/render.js

See https://github.com/Khan/aphrodite/blob/master/README.md#server-side-rendering for more info and for instructions on how to rehydrate.

[rauchg]

We're going to address it with #251. I don't think wrapping is a good API though. I think all SSR modules should expose a "flush" or "rewind" API