several instance of styled-component in node modules - reactjs

Question

I am creating a separate repo for sharable UI component. I am using styled-component. When I am locally publishing the package using npm link. It's throwing error.
Error is explained here.
Project
|
+-- node_modules
|
+-- styled-component v4.0.2
|
+-- ui-component
|
+-- styled-component v4.1.1
There are couple of ways to fix it as if mention in link.
npm dedupe (Not suitable for dev environment as it's not work well with npm link ).
Setting up your webpack (some of the project will be using create-react-app so they don't have access to webpack).
I have two though running in my mind.
First, both the solution kind of forcing end user to do something at your end. I want to make it like other npm package where you just install and use it without telling user to do something in configuration level.
Second, Why I have to even do that. I have setup everything in webpack. I have ask webpack to not to use it's own dependency for the particular package rather use the end user package.
How other npm packages are working which depends on parent dependency but they use own dependancy in dev process. like react
Here is files from my sharable UI component library.
Package.json
{
"name": "ui-component",
"version": "1.0.0",
"description": "Shareable web UI component",
"main": "build/index.js",
"scripts": {
"dev": "start-storybook -p 6006",
"build": "webpack",
"build:storybook": "build-storybook",
"test": "jest --env=jsdom",
"lint": "eslint"
},
"jest": {
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
},
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!storybook-static/**/*.{js,jsx}",
"!congif/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/src/enzymeSetup.js"
],
"testMatch": [
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"testPathIgnorePatterns": [
"<rootDir>/__tests__/setup/"
],
"moduleNameMapper": {
"^#theme": "<rootDir>/src/theme.js",
"^#validation": "<rootDir>/src/validation/index.js",
"^#helper": "<rootDir>/src/helper.js"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"npm run lint --fix",
"cross-env CI=true npm test -- --coverage --bail --findRelatedTests"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^3.5.1",
"#material-ui/icons": "^3.0.1",
"react": "^16.6.3",
"react-router-dom": "^4.3.1",
"styled-components": "^4.1.1"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"babel-core": "7.0.0-bridge.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"#storybook/addon-actions": "^4.0.7",
"#storybook/addon-centered": "^4.0.7",
"#storybook/addon-info": "^4.0.7",
"#storybook/addon-links": "^4.0.7",
"#storybook/addon-options": "^4.0.7",
"#storybook/addons": "^4.0.7",
"#storybook/components": "^4.0.7",
"#storybook/react": "^4.0.7",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^2.0.0",
"husky": "^1.1.2",
"jest": "^23.6.0",
"lint-staged": "^8.0.4",
"react-dom": "^16.6.3",
"react-router-dom": "^4.3.1",
"storybook-styled-components": "^1.1.2",
"style-loader": "^0.23.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"peerDependencies": {
"react": "^16.5.2",
"styled-components": "^4.1.1"
}
}
webpack
const path = require ('path');
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.resolve(__dirname, './build'),
filename: 'index.js',
libraryTarget: 'commonjs2',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
}],
}
],
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
}
}
}
},
plugins: [],
resolve: {
alias: {
'#theme': path.resolve(__dirname, './src/theme.js'),
'#validation': path.resolve(__dirname, './src/validation/index.js'),
'#helper': path.resolve(__dirname, './src/helper.js'),
}
},
externals: {
'react': 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
'styled-components': 'commonjs styled-components' // this line is just to use the React dependency of our parent-testing-project instead of using our own styled-component.
}
}
My parent app is using styled-components ^4.0.2 and my sharable ui library using styled-components "styled-components": "^4.1.1".
I have had a entries in peerDependencies as well as in webpack. struggling with it more than a day any help would highly appreciated.

Answer 1

See this FAQ entry in the official styled-components documentation. In most cases, adding an alias to the webpack configuration is enough to overcome the issue:
resolve: {
+ alias: {
+ "styled-components": path.resolve("./node_modules", "styled-components"),
+ }
}

Answer 2

I spent hours trying various things to overcome this issue myself, including everything in the styled-components docs with no luck at all. Nothing worked until I found this suggestion on GitHub.
Adding the below to your Webpack config tells it to use a single runtime for all of your entrypoints, instead of creating a new runtime for each.
optimization: {
runtimeChunk: {
name: "vendor"
},
....

Answer 3

I also run into this issue, somehow I think you can't load two version of styled-components sometimes even when they are the same version, ex. 4.4.1.
So in the end, i have to use peerDependencies, luckily i have control on all the repos, so I relocated the styled-components to peerDependencies for my core libraries. And then rely on only one copy in the implementation repo.
I can still smell things not right here, but so far i can only get the ThemeProvider to work this way across different repos.