A strange off-by-one problem – incorrect style is applied sometimes

I’m trying to debug a problem where material-ui-kit pulls in material-ui that uses jss and I use it all with gatsby’s SSR.

I’ll work on a minimal reproducible build but what I see insofar is that sometimes jss is rendered incorrectly and all the elements get assigned jss+1 indices, exploding the page at random. It seems to be pretty consistent in that +1, e.g.

is a good render, while

is a bad one.

While I hunt for what exactly triggers the bad behavior, any ideas what could possibly cause this N+1?

npm ls|grep jss
│ ├─┬ @types/jss@9.5.7
│ ├─┬ jss@9.8.7
│ ├─┬ jss-camel-case@6.1.0
│ ├── jss-default-unit@8.0.2
│ ├── jss-global@3.0.0
│ ├─┬ jss-nested@6.0.1
│ ├── jss-props-sort@6.0.0
│ ├─┬ jss-vendor-prefixer@7.0.0
└─┬ react-jss@8.6.1
  ├── jss@9.8.7 deduped
  ├─┬ jss-preset-default@4.5.0
  │ ├── jss-camel-case@6.1.0 deduped
  │ ├─┬ jss-compose@5.0.0
  │ ├── jss-default-unit@8.0.2 deduped
  │ ├── jss-expand@5.3.0
  │ ├─┬ jss-extend@6.2.0
  │ ├── jss-global@3.0.0 deduped
  │ ├── jss-nested@6.0.1 deduped
  │ ├── jss-props-sort@6.0.0 deduped
  │ ├─┬ jss-template@1.0.1
  │ └── jss-vendor-prefixer@7.0.0 deduped

[oliviertassinari]

@kof I get issues like this one all the time on Material-UI. We have been documenting the workarounds in the documentation, it’s a bit better now. But people are struggling with the index counter approach. I have been personally hit multiple times by the problem. It doesn’t leave any room for mistake. I wish we can explore a hash-based generation logic in the future.

[kof]

In your example you are using createGenerateClassName from MUI, not from react-jss. One of the reasons could be that the way class names generator is used differently on the client and server. We need to see some working code to understand exactly how.

cc @oliviertassinari