Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Duplicate JSS classes generated in production

See original GitHub issue

Using Madeno Material-UI notifications to display notifications in my app. During development there were never any issues with that. When the notification is triggered, the DOM JSS classes in <head> gets injected accordingly, and then later removed when the notification is dismissed.

Under production, when the notification is triggered, the injected JSS classes (i.e. .jss###) have counters already used in <head> for other elements, causing weird corruption and artifacts (shown below).

This is a v1.x issue (v0.x is no longer maintained).
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

This is a GIF of the expected behavior on development machine. Notice the notification is displayed fine and the rest of the UI is OK.

materil-ui-dev-working

Current Behavior

Under production (NODE_ENV=production), duplicate jss classes are injected in the DOM resulting in a mess:

materil-ui-prod-error

Steps to Reproduce (for bugs)

Go to https://live.stellarmate.com
Insert any username/password and click login
Notification is triggered and GUI is messed up

Context

After investigating the vDOM for the two cases above, the difference is this:

In the development version, when the notification is triggered, new jss### numbers are increased properly as not with overlap with existing styles. For example, this style gets added to <head> with .jss583:

<style type="text/css" data-jss="" data-meta="MuiButtonBase">
.jss583 {
  color: inherit;
  cursor: pointer;
  margin: 0;
  border: 0;
  display: inline-flex;
  padding: 0;
  outline: none;
  position: relative;
  user-select: none;
  align-items: center;
  border-radius: 0;
  vertical-align: middle;
  justify-content: center;
  -moz-appearance: none;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.jss583::-moz-focus-inner {
  border-style: none;
}
.jss583.jss584 {
  cursor: default;
  pointer-events: none;
}
</style>

Under production, the exact JSS### above is added is .jss289 which already exists in the vDOM before the notification for another element.

Pre-notification:

.jss289 {
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.625rem;
}

Post-notification (above still exists in the vDOM):

<style type="text/css" data-jss="" data-meta="MuiButtonBase">
.jss289 {
  color: inherit;
  cursor: pointer;
  margin: 0;
  border: 0;
  display: inline-flex;
  padding: 0;
  outline: none;
  position: relative;
  user-select: none;
  align-items: center;
  border-radius: 0;
  vertical-align: middle;
  justify-content: center;
  -moz-appearance: none;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.jss289::-moz-focus-inner {
  border-style: none;
}
.jss289.jss290 {
  cursor: default;
  pointer-events: none;
}
</style>

Your Environment

material-ui/core: 1.2.1, material-ui/icons: 1.1.0, material-ui/lab: 1.0.0-alpha.5, react: 16.4.0, react-dom: 16.4.0, madeno: git+https://github.com/knro/madeno.git, Chrome Version 67.0.3396.79 on Linux

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:11 (5 by maintainers)

Top GitHub Comments

33reactions

igorkrupcommented, Dec 11, 2020

If anybody is seeing this in 2019 and use marterial-ui v4. As API has changed a bit. That fixed my issue:

import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  productionPrefix: 'c',
  disableGlobal: true
});

Then you wrap your app with:

<StylesProvider generateClassName={generateClassName}>
 ...
</StylesProvider>

27reactions

knrocommented, Dec 11, 2020

More details on how to fix this would be greatly appreciated! It was driving me insane!

EDIT: The documentation helped me fix he issue. I added the following:

import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
    dangerouslyUseGlobalCSS: false,
    productionPrefix: 'c',
});

Then I wrapped my App with <JssProvider generateClassName={generateClassName}>

Afterward, it worked like a charm! Thanks!!

Top Results From Across the Web

Duplicate JSS classes generated in production #11843 - GitHub

Under production, when the notification is triggered, the injected JSS classes (i.e. .jss###) have counters already used in for other elements, ...

React + Material-UI style classes from different components ...

Setup: I'm serving a React app (built with create-react-app ) that uses Material-UI jss styling and a Rails back end.

Styles API - MUI System

Disable the generation of deterministic class names. options.productionPrefix (string [optional]): Defaults to 'jss' . The string used to prefix the class ...

Finding and fixing duplicates in webpack with Inspectpack

Needlessly duplicated dependencies produce larger, slower web applications. Let's embark on a deep dive into how npm and webpack work, ...

Parcel.js

Run Parcel with the --https flag, and it will automatically generate a certificate for you! Or, if you like, you can provide your...