production build - classnames conflicts

darkowic commented 6 years ago

The css class names definitions are duplicated for some components - in my case it is duplicated (I guess from my debugging) for MuiIconButton and MuiModal - check current behavior

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The class names should not be duplicated across components.

Current Behavior

My button styles: classnames_conflict The class is duplicated. Styles definition: classnames_conflit_2

It is working in development mode: My buttons styles: development_class

and found the definitions: mui-icon-button-dev

and from modal: mui-modal-dev

Steps to Reproduce (for bugs)

I can try to prepare the environment to reproduce the problem but right now I just wanted to report it here.

Context

I'm trying to release my application with the production environment. ## Your Environment

Tech	Version
Material-UI	1.0.0-beta.10
React	15.6.1
browser	any
webpack	^3.3.0

I need some hints where may be the problem. I'm not using withStyles solution anywhere - I use styled components for styles overriding.

kopax commented 5 years ago

@andrewkslv this is exactly what we are trying to avoid, we'd prefer to use it without JssProvider because we only use one Input and Button component from @material-ui, instead we prefer to use for the rest another ui for react-admin.

@oliviertassinari I've just checked and I did have some dependencies issues. I fixed it but still got the errors with the following npm ls @material-ui/core:

├─┬ @bootstrap-styled/ra-ui@1.0.23
│ └── @material-ui/core@1.5.1 
├── @material-ui/core@1.5.1 
└─┬ ra-ui-materialui@2.6.4
  └── @material-ui/core@1.5.1

After doing:

rm -rf node_modules/@bootstrap-styled/ra-ui/node_modules/@material-ui/
rm -rf node_modules/ra-ui-materialui/node_modules/@material-ui/
npm ls @material-ui/core
├─┬ @bootstrap-styled/ra-ui@1.0.23
│ └── UNMET DEPENDENCY @material-ui/core@1.5.1 
├── @material-ui/core@1.5.1 
└─┬ ra-ui-materialui@2.6.4
  └── UNMET DEPENDENCY @material-ui/core@1.5.1

Then now it does work (no css issue in production). I guess this is not what I want...

Related project @material-ui dependencies:

Any idea what to do?

oliviertassinari commented 5 years ago

@kopax It's hard to tell without something I can debug. I'm happy to hear it's working now.

I have noticed you are using styled-components with Material-UI. If you have some time, I would love to chat about the integration on Gitter.

kopax commented 5 years ago

The working solution isn't natural. Which means it involve task that cannot be run with npm. I will not use it, i gave this as a hint.

We'll have the chance on monday, I'll join the mui gitter channel.

roytz commented 5 years ago

Hi @kopax, did you manage to find a solution?

kopax commented 5 years ago

No not yet. Not without the provider. @oliviertassinari I am on gitter.

griiettner commented 5 years ago

@andrewkslv Your solution really worked for me. I'm also using react-admin and AWS Amplify. Anytime I would deploy my react application to a S3 bucket, the style would be all broken, and your solution really saved me.

koutsenko commented 5 years ago

Same issue here. Why adding JssProvider helps?

oliviertassinari commented 5 years ago

I have added a warning in v4 to warn when duplicated style instances are used: #15422.

andrewkslv commented 5 years ago

I don't know. I raised this issue in react-admin when they were implementing a new version of material ui to the framework but it was ignored.

https://github.com/marmelab/react-admin/pull/3102#issuecomment-484228320

beran24 commented 4 years ago

Where i can find the solution about production build - classnames conflicts #8223 ?

Thanks,

KannugoPrithvi commented 4 years ago

@oliviertassinari Facing this issue again, even though i have followed all the instructions. Since it is working for others, i guess i might be missing something basic.

https://stackoverflow.com/questions/58938080/jssprovider-not-generating-class-prefix-with-classnameprefix

I'm using following versions of the packages.

"@material-ui/core": "^4.6.1", "@material-ui/icons": "^4.5.1", "react": "^16.12.0", "react-dom": "^16.12.0", "react-jss": "^10.0.0", "react-scripts": "3.2.0"

Update: Issue got resolved. Sorry for not going through documentation thoroughly. This part of the documentation solved my issue.

https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator

But somehow, the JSSProvider solution which was working for all others, was not working for me. Anyways, thank you :)

appli-intramuros commented 3 years ago

Thanks @KannugoPrithvi , this is the good solution ! https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator

mui / material-ui