Information: solving jss classnames production build conflict with external MUI dependent component

So I spend the all afternoon reading the related issues and debugging my code so I am posting this here in case it helps someone.
I can make a PR for the doc if you want but don’t know where it should go as it is not directly a MUI issue.

Use case:

• I have an external component “mui-tree-list” which use mui v1.
• The lib use rollup to package the component.
• in the rollup config I put external: [ 'react', '@material-ui/core', '@material-ui/icons', 'react-dom' ], WRONG ! ;p

If you do this, you’ll end up having jss classname conflicts in the production build of you final app.

why ?

cause @material-ui/core does not avoid @material-ui/core/List for instance to be included in your dist package.

and @material-ui/core/List will include withStyles which will cause jss class naming conflict in your final package !

So the solution is, you should put this in your rollup config:
external: id => /react|react-dom|material-ui\/.*/.test(id),

this way all material-ui components will be excluded from your build… lost some hair with this one :p .

[marton-levay]

Ohai

If anybody is still looking for a solution with webpack (for us it was an ejected create-react-app with material-ui elements, shared as a library, and then used in a similar cra app with material elements): You have to externalize your whole material-ui dependency using regex in webpack config, otherwise various material scripts - withStyles, withTheme, etc… - will load twice (or more if you have more libs) which will cause the screen to fall apart.

https://webpack.js.org/guides/author-libraries/#external-limitations So in webpack.config.prod.js add something similar:

externals: [
    'react',
    'react-dom',
    //this will externalize everything which start with '@material-ui'
    /^@material-ui\/.+$/,
    'prop-types',
    'react-router-dom'
  ],

Of course this means you want to indicate in your /build/package json that these are peerDependecies. You have to have them in the app where you wish to use this lib.

[oliviertassinari]

You should have a warning in the console next time.