Descrizione
Expected behavior: Have a working example app for Next.js
Describe the bug: https://github.com/zeit/next.js/tree/master/examples/with-react-jss
It looks like the example app in the Next.js repository is using v10.0.0-alpha9. Apparently the example doesn't work with the actual v10.0.0 release, something must have changed.
The exact issue is only visible when producing a production build in Next.js. The styles are visible for a very short duration until they get removed.
Removing the logic in https://github.com/zeit/next.js/blob/master/examples/with-react-jss/pages/_app.js fixes the issue, but I am not sure if that's intended.
It seems like the naming is not matching, this is what I get generated into my header:
<style data-jss="" data-meta="Component, Unthemed">
.Component-container-0-1-1 {
margin-top: 100px;
text-align: center;
}
.Component-header-0-1-2 {
font-size: 24px;
line-height: 1.25;
}
</style>
Even though the rendered div looks like this:
<div class="Index-container-0-1-1">
<h1 class="Index-header-0-1-2">
Example on how to use react-jss with Next.js
</h1>
</div>
When I run the app with yarn run dev everything works fine though...
Codesandbox link:
Basically exactly the example app on the latest react-jss version See https://codesandbox.io/s/blissful-tree-r1zxx
Versions (please complete the following information):
- jss: >10.0.0-alpha9
- Browser: all browsers
- OS: all OS Feel free to add any additional versions which you may think are relevant to the bug.