Warning: Several instances of @material-ui/styles initialized

Hey, I’m creating an app that imports my custom NPM package. Here is reproduction repository: https://github.com/lukejagodzinski/mui-styles-reproduction

Little bit info about package and app.

Package:

• name: card
• bundler: TypeScript
• peerDependencies:
  • "@material-ui/styles": "^4.0.0-beta.2"
  • …

App:

• bundler: Parcel
• dependencies:
  • "@material-ui/styles": "^4.0.0-beta.2"
  • "card": "file:../card"

I’m using Yarn

In the package I’m not bundling dependencies and they are peer dependencies so the app using a package can define it and that’s what I’m doing. However, I still get error: It looks like there are several instances of "@material-ui/styles" initialized in this application. This may cause theme propagation issues, broken class names and makes your application bigger without a good reason.

I’ve followed instructions but I can’t solve this problem. It still loads styles package twice. It also problematic for me for another reason. I’m using the index option in the makeStyles function, to force given order of the styles but having two packages makes it impossible to use the same order sequence in both package and app.

Any ideas?

[lukejagodzinski]

Actually I solved my problem but it was related to adding package as dependency using the file protocol. It appears that it’s not behaving the same way as it would when package is published to the npm repository. It’s just symlink, so when you have some packages being installed in the node_modules it will count them too. I’ve just had to remove node_modules and make sure that yarn install does not put peer packages in the node_modules. Probably previously I was adding packages as regular dependency and later just changed it to peer dependency and package was not removed from the node_modules

[yuki-yoshimura]

In my case I was writing something like this inside my index.html file. <script src="/bundle.js"></script>

But I was also using HtmlWebpackPlugin (a plugin which automatically add bundle.js reference inside index.html) inside my webpack.config.js.

So I just solved this by removing the bundle.js reference from index.html. Bad me