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

[lukejagodzinski]

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]

I've also prepared version of this app that uses Webpack instead of Parcel and the same problem occurs. So it's nothing related with the bundler, or actually it might be a problem with all the bundlers. However, it's somehow solved for the React package in MaterialUI and it's also known that we can't have two different versions of React working in the same app.

[oliviertassinari]

We have tried to provide as many information about the problem in https://next.material-ui.com/getting-started/faq/#duplicated-module-in-node-modules. I fear we can help more. Let us know when you find the solution, hopefully, it will help someone else!

[lukejagodzinski]

@oliviertassinari if you're gonna help me with this warning, then at least help me with the index option not working when used in both app and npm package.

[oliviertassinari]

I'm sorry, I can't help you.

[support]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[eps1lon]

We get this warning in our own docs. Not sure if there are too many false positives involved.

[oliviertassinari]

@eps1lon Is it on the server side, between two HMR updates?

[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

[eps1lon]

@eps1lon Is it on the server side, between two HMR updates?

Yes.

[dkadrios]

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

@lukejagodzinski , can you please elaborate on your solution? I do not quite follow your description and I'm having exactly the same issue (material-ui also listed as peer dependency in my npm package).

[lukejagodzinski]

@dkadrios to be honest it still is pain in the ass to deal with peer dependencies :) as new problems appeared. However, to answer your question.

You have two directories, one with your application and the other one with the package. In the package you have material-ui/styles installed as a peer dependency. In you application, you have your package added with the file: protocol or linked using npm link and also installed the material-ui/styles package.

In my case, in the package I also had the material-ui/styles installed as the dev dependency in my package so that's why I had duplicates in both application and package. There were two copies of the material-ui/styles in node_modules directories. So, I had to remove all the node_modules first and install them again and it helped at least with the warning about duplicates. However, a new problem showed up. The TypeScript compiler is not able to find material-ui/styles if it's installed as a peer dependency. So I had to closely replicated what MaterialUI team is doing to build packages which is using babel compiler instead.

The other solution, I found recently that solves all the problems is using monorepo with Lerna and Yarn workspaces to just have all the dependencies installed only once at the top level.

[dkadrios]

Thanks, @lukejagodzinski. Monorepo would certainly solve this. The trouble is the one npm package is public while the other repos are private and it feels like asking for trouble to get that working.

Right now I'm trying to get it working using webpack resolve as described at https://material-ui.com/getting-started/faq/#duplicated-module-in-node-modules
Haven't had much luck with that yet, but will try your file: solution after that.

[alexandrecanuto]

The TypeScript compiler is not able to find material-ui/styles if it's installed as a peer dependency. So I had to closely replicated what MaterialUI team is doing to build packages which is using babel compiler instead.

Hey, @lukejagodzinski , can you elaborate this part?

I did what you said and yes, now material-ui/styles can't be found for the package. What did you change then?

[lukejagodzinski]

@alexandrecanuto I've just used Babel to build package instead of TypeScript compiler. Take a look at this line: https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/package.json#L31
However, I've changed that as it was pretty annoying to build package on every change. Currently, I'm using monorepo with Lerna and Parcel where I don't have to build package at all. Parcel has nice feature of importing package using the source field in the package.json. So everything works like it's one project but I still have separation of packages in subpackages.

[aleccaputo]

@lukejagodzinski I think you tagged the wrong person 🙂

[lukejagodzinski]

@aleccaputo oh right, sorry :D

[thierryMic]

This is how i solved the problem for me, hope it helps.

• Remove node_modules and the yarn.lock file
• reinstall everything with yarn install

Note that my yarn.lock file appeared to refer to multiple versions of @material-ui/styles.

[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

[jailsonpaca]

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

It's the same for me!

[Enteleform]

I'm having this issue as well. The webpack build works fine, but running the project with webpack-dev-server exhibits the warning & some style issues (i.e. only the first tab in a tab group has the ripple effect & active tab indicator). I tried setting an alias in the webpack config as mentioned in the FAQ, but it didn't seem to have any effect.

Any ideas for fixing this issue when using webpack-dev-server ?

[maneetgoyal]

We have tried to provide as many information about the problem in https://next.material-ui.com/getting-started/faq/#duplicated-module-in-node-modules. I fear we can help more. Let us know when you find the solution, hopefully, it will help someone else!

Hey @oliviertassinari, once Webpack 5 allows ESM modules output, can you suggest if this double bundling concern will still remain?

Edit:

Ref: webpack/webpack#2933

[carlnc]

Scenario: pnpm, CRA, Jest.

The following worked for me.

In primary App (not the external Storybook library):

1. Added "@material-ui/styles" to package.json (devDeps)
2. Added to webpack.config.js resolve.alias['@material-ui/styles'] = require.resolve("@material-ui/styles");
3. Added to jest.config.js under moduleNameMapper ... '^@material-ui/styles(.*)$': '<rootDir>/path_to_app/node_modules/@material-ui/styles$1',