published under license Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)copy! share!
posted in category Software Development & Programming / JavaScript
posted at 25. Nov '19
last updated at 11. May '21
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.
Add Comment