How to remove duplicated dependencies code from webpack bundle? - node.js

Question

I have these local NPM packages:
common-package
^ ^
| |
father-package mother-package
^ ^
| |
son-package
Both father-package and mother-package import common-package, and then son-package imports both father-package and mother-package
The problem here is that the son-package bundle duplicates the common-package code. The common-package has a User.ts class and as you can see there are 2 definitions of the User.ts class in the output bundle when searching for "class User {":
My goal is to dedupe it. I believe that is possible by tweaking webpack.config.js optimization but i cant figure how.
Here is what I have tried so far:
son-package webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins:[
new HtmlWebpackPlugin({
template: './index.html',
inject: true,
filename: './index.html'
})
],
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
mode: 'development',
devtool: 'source-map',
target: 'es2017',
entry: {
index: './src/Index.ts'
},
output: {
path: `${path.resolve('dist')}`,
filename: '[name].js',
library: {
type: 'module'
},
chunkFormat: 'module'
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
],
},
resolve: {
extensions: ['.js', '.ts'],
}
};
Should i add the same optimization configuration in father-package and mother-package to webpack.config.json files?
Hope to have explained my problem well. Thanks in advance.
Btw, my node version is v18.11.0 and NPM is 8.19.2 and webpack 5.