Fixes multiple instances of styled-components in mono-repos

Created by: victorhqc

Motivation

When working in a monorepo (possibly regular repos as well) and using a dependency that is using styled-components a warning appears showing a duplicated instance was found. This happens during development phase when packages are linked using npm link.

The issue

The monorepo I'm working on has two packages:

1. components
2. app

components has styled-components as peerDependency and is placed in devDependencies. I bundled the app using rollup and styled-components is placed as external.

const config = {
  input: './src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      external: ['react', 'react-dom', 'styled-components'],
    },
  ],
  ...
}

I checked the final bundle and in styled-components is not bundled 👍

app hasstyled-componentsand components (the other package in monorepo) but used npm link as I'm still doing lots of changes and I'd rather not have a new version for every small change or debug process.

Then I ran the app and it all works but the following message appears:

How to fix

Luckily there's an easy fix already documented here: https://www.styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page

I'd rather avoid ejecting my project just to add this alias. I checked by modifying react-scripts in node_modules directly and fix works! Styles are back and everything is working.

How to reproduce

Clone this repo and follow instructions.