jss instance counter (moduleId) causes SSR class name mismatch

I hope I can impress upon everyone that using counters for class names is very, very brittle and I’ve had to work through dozens of server/client class name mismatches because of counters. I’m getting pretty tired of it, and it doesn’t seem sustainable to me.

This latest problem comes from the apparently new moduleId.js jss instance counter getting worked into the generated class names. Here’s the error I’m getting:

Warning: Prop `className` did not match. Server: "MuiSvgIconroot-1-2-26 MuiIconButtonicon-1-2-22" Client: "MuiSvgIconroot-0-2-26 MuiIconButtonicon-0-2-22

I know you’ll probably say it’s up to us to ensure that the same jss instances get created in the same order on the server and client. But this is getting increasingly difficult as some libraries like material-ui create their own jss instances.

[jedwards1211]

I guess I’ll spend some time thinking about the details of a less brittle approach then and let you know once I’ve figured it out.

[kof]

see https://github.com/cssinjs/jss/issues/658 and https://github.com/cssinjs/jss/issues/677