Latest version doesn't work with next.js example

[zwenza]

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.

[kostyasu5]

@zwenza hi! There is a solution?

[zwenza]

As I mentioned in the issue there is a hack but I am not sure if everything is working as expected after removing the code. Unfortunately nobody seems to take care of reported issues here so I stopped using jss

[derek-smith]

I'm having this exact same issue with Next.js and react-jss.

I was able to partially fix it by using babel-plugin-add-react-displayname (https://www.npmjs.com/package/babel-plugin-add-react-displayname) and adding it to .bablerc.

However, it only fixed 2 of the 4 components that are styled as Component-*. I'm now going through the plugin source (it's pretty tiny) to figure out why it can't detect all 4 of the display names.

[derek-smith]

Okay, this is solved for me. It turns out that the shortcut for React fragments doesn't work. So I had to ultimately make 2 changes to fix this problem:

1. Use babel-plugin-add-react-displayname
2. Replace <>...</> with <React.Fragment>...</React.Fragment> for all components returning fragments