Using styled-components in a monorepo

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.

[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.

[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.