Styles don't seem to work with statically rendered next.js about bumbag-ui HOT 4 CLOSED

This also only happens on authenticated routes, possibly something to do with critical css, but I'm not entirely sure.

Seems like if you have code like such:

const SomeComponent = () => {
    const [show, setShow] = useState(false)

    if (show) {
        return <BumBagInput />
    }

    return <Button onClick={() => setShow(true)}>click</Button>
}

the critical css doesn't get extracted (makes sense). But when the component(BumBagInput for ex) renders, it does not get its styles.

What's also strange is navigating to routes. For example, if I navigate to the settings page (image above) the components are blacked out. If I refresh on the settings page, it looks as expected.

I was finally happy to find a great looking UI library and spent a week converting my app, hopefully we can figure this out because I really do like this library :(

from bumbag-ui.

It seems to actually be an issue with the build phase rather than the static exporting. I do not use any of the server side aspects of next and so when it builds, it generates static assets. Even after running the next.js server, this issue persists.

Help would be greatly appreciated, thank you.

from bumbag-ui.

Upgrading emotion seems to do the trick...will do some more testing. I opened up a PR here: #109

Ideally we can remove @emotion/core entirely for @emotion/react. However, there's an inconsistency that I'm having trouble finding the upgrade path for.

The first is import { InterpolationWithTheme } from "@emotion/core"; in types/theme.ts

from bumbag-ui.

In the meantime to get my app working, I published a separate npm module: https://www.npmjs.com/package/bumbag-update

Will take it down after merging, but works in my prod app w/ no hickups...

from bumbag-ui.