Howto Fix Multiple styled-component Instances

Have you ever seen a warning in a developer console of browser where styled-components was complaining that it is loaded multiple times?

It looks like there are several instances of ‘styled-components’ initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process and makes your application bigger without a good reason.
See https://s-c.sh/2BAXzed for more info. styled-components.browser.esm.js:2354

I use create-react-app and one package has styled-components as a peer dependency. And the application has it in the dependencies too. I thought being a peer dependency would handle that. But apparently it doesn’t.

The application is not ejected, but uses customize-cra to tune Webpack configuration.

To fix multiple instances being loaded, set up customize-cra and add this to the config.overrides.js. AFAIK it aliases styled-components to be loaded only from one place regardless of how many times is dependent upon.

const { addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    'styled-components': path.resolve(
      __dirname,
      'node_modules',
      'styled-components',
    ),
  }),
);

Restart the application and now there shouldn’t be any warning and everything works just fine.