I build a UI library which is having dependency on MUI4 and MUI5. I published it on NPM and tried to use in a target application which is also using MUI4 and 5. But I’m getting a lot of errors related to MUI classnames.

For example:

TS2339: Property 'loader' does not exist on type 'ClassNameMap<never>'.
    171 |     }
    172 |     if(scenario && scenario==="homePageChat" && isFetching){
  > 173 |         return <Box className={classes.loader}>
        |                                        ^^^^^^
    174 |             <CircularProgress size={30} />
    175 |         </Box>  
    176 |     }

without integrating library, everything is working smoothly.

Here is what I tried to resolve this:

Browsing through stack overflow and asking to ai chats, I made following changes to resolve this error:

Added mui dependencies in peerDependencies in my library’s package.json file.

Marked mui as external in rollup.config.js file.

here are my peerDependencies:

"peerDependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@mui/icons-material": "^5.14.18",
    "@mui/material": "^5.14.18",
    "react": "17.0.2",
    "react-dom": "17.0.2"
}