Using styled-components in a monorepo

[wmdmark]

Version

> 2.0

Reproduction

We have a UI library built with styled-components that is for use by our team internally as well as with external developers. While this library depends on styled-components, it does not bundle styled components as part of the npm distribution.

Steps to reproduce

Install an npm library that exports components built with styled-components in a React project that also uses styled-component (Create React App in our case)

Expected Behavior

styled-components should work for both the "local" React app and the imported library components.

Actual Behavior

As soon as the library components are imported to the local React app, the local apps styled-components stop working.

I'm guessing this is related to #1032. The temporary fix we've found is to downgrade to 1.4.

[kitten]

Since the StyleSheet will be responsible for any bugs here, we can assume that it's fine as long as it's a singleton. Since you're not installing it in the dependency, we have to investigate more here. Otherwise I don't have anything to go on in this issue.

My guess is that it's the same as #1032, but you haven't found the cause of the duplication.

What would help is:

• npm ls styled-components in the parent, and maybe yarn list styled-components
• Webpack Stats if the first doesn't show duplication
• An output bundle maybe and the sub-dependency package.json
• Last but not least, if all else fails, a reproduction repository

[tmeasday]

For the record, I've found npm ls and yarn list to be unreliable for this kind of problem. Not sure why but they sometimes don't tell you about duplicates. I find asking the filesystem with something as simple as find node_modules | grep /styled-components/package.json works.

[danistefanovic]

I'm not sure if I've run into the same bug as described above. Here is a repo for reproduction: https://github.com/danistefanovic/styled-components-keyframes-bug

Let me know if I should open a new issue for this.

[BiancaYen]

Good day, I'm running into the same issue. I've already established that there are no duplications of styled-components in the project by using find node_modules | grep /styled-components/package.json and the various other commands.

We've got a component library package that we pull in for our individual projects. Then we have a feature package (with complex redux) than pull in some of the notification components from above. When both are included in the project only the component library styles render and not the components from the feature package.

[mxstbr]

This is very likely a duplicate of #1032, so if anybody wants to tackle #1011 that'd be awesome!

If that ships and you're still running into this issue then it's something else, but until then it's fairly safe to assume those are related. Closing for now, please follow #1032 and #1011 instead.

[mansdahlstrom1]

Is there any solution/update for this issue? have looked through the related issues and havn't found a solution for our case.

@wmdmark Seems to have the same problem as we do, did you find a solution that works for your senario? We have created an styled-compoent UI library that's included in all of your products using NPM. But our client apps are also using Styled-components and the inclusion of styled-components will break the external library styles as they are not appended to the head of the page. It works if we exclude styled components entirely from the client apps.

[wmdmark]

@mansfahlstrom1 the only fix we found was to downgrade to 1.4 😕

[mxstbr]

https://www.styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page

[wmdmark]

@mxstbr that fix works fine for some cases but not for the one described above. We're using lerna to manage our separate libraries and the solutions above do not work in that scenario even when there is no duplication issue in the local module (we've verified this multiple times).

[mxstbr]

@wmdmark oh I see, that's very weird. Let me reopen this issue because that should really just work out of the box.

[mxstbr]

Since we have a reproduction above (https://github.com/danistefanovic/styled-components-keyframes-bug) it'd be great if somebody could dig into fixing this!

[gribnoysup]

Hi @wmdmark!

I used source-map-explorer on your application example and I can see that there are several instances of styled-components bundled in this application:

One module is coming from root/website/node_modules and the other is from root/node_modules

As there is no way to modify how create-react-app builds your assets, there is no easy fix with modifying your webpack.config as described in the FAQ for duplicated modules, unfortunately.

But you still can treat your separate libraries as an actual libraries (see this FAQ for more info). In your example repo try completely removing styled-components from root folder and leave it only in your website folder. After the build, you can see that there is no more duplicated libraries in your app bundle:

And the website app shows animation properly 🎉

EDIT: Oops, sorry, didn't notice that the application example repo is not yours, @wmdmark!

So just to clarify, I'm still pretty sure that the issue is the same. If you are using lerna to wire together different packages and importing sources in your application, you pretty much have the same setup as an example repo above, lerna just does symlinks for you.

[mxstbr]

Thanks for digging into that @gribnoysup—seems like we don't have a reproduction after all.

@wmdmark if you can provide a reproduction of this bug I'll upgrade this again, but for now I have to assume you're loading two instances of styled-components somehow?

[wmdmark]

@gribnoysup @mxstbr thanks for looking into this, however that is not my example repo above and is not configured the same way as ours (we're using lerna not npm link). I've checked our repo for duplicate styled-components and we did not have any duplicates from the module we were importing our UI library into.

[gribnoysup]

@wmdmark how are you checking for duplication? Is it possible for you to use source-map-explorer or webpack-bundle-analyzer on your application bundle and provide an output here? npm link symlinks modules together, this is more or less the same thing as lerna does on bootstrap

[mansdahlstrom1]

@wmdmark @mxstbr Have been sitting last 2 days with the same issue and been testing different thing out. Here is a webpack-bundle-analyser output for our build. Our UI lib (marked with red outline in image) is minified via webpack and has styled-components as a devDependencie / peerDependencie) for development i use npm link to use in in our client. When i do NPM ls i stil do get multiple dependencies even though it should be a peerDependencie from the UI package.

My last option now is to do a replication repo witch i will share if it also fails there. I'll get back to you with the repo!

[mxstbr]

Can you share the webpack config of your UI lib @mansdahlstrom1? Are you excluding styled-components from the bundle correctly?

[mansdahlstrom1]

wepback config in ui package. Not sure if we are excluding it correctly. In our packages json it's listed as a devDependencie not a Dependencie, We have nothing in our webpack config excluding it

import webpack from 'webpack';

module.exports = function (env) {
  return {
    entry: {
      index: `${__dirname}/src`,
    },
    output: {
      filename: 'bundle.min.js',
      libraryTarget: 'umd',
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader',
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"',
        },
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: false,
        debug: false,
      }),
      new webpack.optimize.UglifyJsPlugin({
        beautify: false,
        mangle: {
          screw_ie8: true,
          keep_fnames: true,
        },
        compress: {
          screw_ie8: true,
        },
        comments: false,
      }),
    ],
  };
};

[mansdahlstrom1]

Did a small repo with the same setup as we use https://github.com/mansdahlstrom1/styled-component-with-ui-lib/ AND IT WORKED!!!

So thanks for all the help and fast respons times. Seems like this is not a bug and solvable (at least in my case).

[mxstbr]

@mansdahlstrom1 you have to mark styled-components as external in the webpack configuration, see https://www.styled-components.com/docs/faqs#running-multiple-applications-on-one-page

That has nothing to do whether it's in the devDependencies or normal dependencies in the package.json. :blush: Hope that helps in resolving it in your actual app!

[mansdahlstrom1]

@mxstbr Can you expand on what you mean with that we have marked styled components as external? Not sure regarding what section in the FAQ's you are referring to either. i've tried with some diffrent solution to exclude it from the UI lib without any luck, including the resolve attributes in webpack config on our UI lib.

[gribnoysup]

@mansdahlstrom1 in your library webpack config you could specify styled-components as external module: https://webpack.js.org/configuration/externals/

That way you are guaranteed it is not in your library bundle.

We should probably expand this FAQ section a little bit more, my bad ;)

[mxstbr]

That sounds good, PR maybe @gribnoysup? :wink:

[mansdahlstrom1]

Thanks! @gribnoysup & @mxstbr working now!

[allexysleeps]

Hi, guys. I'm facing the same issue. Using externals and peerDependencies didn't help at all. We still lost all App SC when we import at least 1 component from UI lib, build with styled components.

[christiannaths]

For anyone else landing running into this and landing here, this part of the Styled Components FAQ solved it for me: https://www.styled-components.com/docs/faqs#duplicated-module-in-node_modules

Specifically:

• setting styled-components as a peerDependency in my react library
• updating the Webpack config in my react app to prioritize it's own node_modules folder

I'm using create-react-app and react-app-rewired, so my config-overrides.js file in my react app now looks like this:

const path = require('path');

module.exports = function override(config, env) {

  config.resolve = Object.assign({}, config.resolve, {
    modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'],
  });

  return config;
};

Hope that helps someone else.

[youngrichard]

@allexysleeps did you ever find a solution to this? I have the same problem, where all app styles are clobbered after importing 1 component from our private lib

[allexysleeps]

@youngrichard Hi, I've solve this problem by adding resolve to webpack.config in the project that is using this library.

resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
    ],
  },

Also check Issue that i've created there are some other options that might help you.

1740

[quantizor]

Webpack aliasing is the way to go here as others have mentioned.

[rovansteen]

@probablyup what if you don’t have access to the Webpack config? CRA is going to ship monorepo support in 2.0 but does not provide any way for the user to configure Webpack.

[focux]

I'm having the same problem but what if I'm using a third party library? How I can make it work?

[notrab]

Running into this issue too...

Does anyone have any workarounds using rollup to get this working? Setting a custom module directory doesn't seem to play with rollup.

[christiannaths]

@rovansteen https://github.com/styled-components/styled-components/issues/1076#issuecomment-390837273

[rovansteen]

@christiannaths thanks, I am aware of that solution. But It is a bit ridiculous that you have to do that to be able to use a library that uses styled components.

[christiannaths]

Agree, I see that more of a CRA issue though. The solution to update your webpack config seems suitable (but not ideal) to me.

[wmdmark]

@christiannaths I dunno if I'd see this as a CRA issue... most build tools are trending in the direction of zero config. It seems to me that it would be best if styled-components didn't require manually configuring Webpack to behave as expected in a library scenario. I don't fully understand the underlying issue here but styled-components pre 2.0 worked just fine without any special configuration as do other CSS and JS libraries like glamorous etc. It's a bummer styled-components doesn't.

[christiannaths]

Point taken

[quantizor]

This is just the reality of using a singleton library in a multi repo scenario. React would have the same issue.

On Wed, Jun 27, 2018 at 2:17 PM Mark Johnson notifications@github.com wrote:

@christiannaths https://github.com/christiannaths I dunno if I'd see this as a CRA issue... most build tools are trending in the direction of zero config. It seems to me that it would be best if styled-components didn't require manually configuring Webpack to behave as expected in a library scenario. I don't fully understand the underlying issue here but styled-components pre 2.0 worked just fine without any special configuration as do other CSS and JS libraries like glamorous etc. It's a bummer styled-components doesn't.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/1076#issuecomment-400798438, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1k-Liz-GziRyYLoxqten3iX_VTQ8ks5uA9pTgaJpZM4OyhVo .

[wmdmark]

@probablyup React does not have that issue... we're using React + Lerna in our libs just fine with zero additional config to make it work (same with glamorous). It's only styled-components post 2.0 giving us this issue (and not just us based on the comments above).

[quantizor]

Yes because React is likely getting deduped correctly. It’s when the library isn’t deduped that these problems occur. On Wed, Jun 27, 2018 at 3:54 PM Mark Johnson notifications@github.com wrote:

@probablyup https://github.com/probablyup React does not have that issue... we're using React + Lerna in our libs just fine with no zero additional config to make it work (same with glamorous). It's only styled-components post 2.0 giving us this issue (and not just us based on the comments above).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/1076#issuecomment-400825745, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1oe3CIwFimX_eOpFP5-ADc53ApXmks5uA_EOgaJpZM4OyhVo .

[VictorChen]

running into this issue using CRA v2... is there a workaround?

[sadsa]

Bump on this. Also getting issues when installing via pnpm. This may help understand the issue further - https://rushjs.io/pages/maintainer/package_managers/ . Specifically the part about PNPM and libraries following uncommon standards.

[sbcreates]

Bump on this as well. Getting issues when I try to upgrade styled-components in my React monorepo.

I have three packages in my monorepo, two apps and one UI kit with components that I import into my apps. All apps have their own package.json file and were each running on the same styled-components v2.4.1. I upgraded each one to 4.4.0 after making sure we weren't using anything in our apps that would break with the change and my app crashed, stating it was unable to find t.button, referencing a component being imported from my UI kit.

I then downgraded back to the old version I was using and kept getting the error. I then removed and again added back styled-components several times, each time with a different version, and still received the same error.

After reading this thread I changed my styled-components to v2.0.0 and I'm now getting a working app.