How to remove duplicated dependencies code from webpack bundle?

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.