Duplicated components in bundle

See more:

Javascript

React

I have a project on react / typescript with webpack 2 and different components refered by the main module from outside with index files. Here is the test project:

Uploadfiles.io - duplicatedcomponentsinbundle.zip[^]


The bundle is located in:TestReactTs\Scripts\App\portal.bundle.js

hello.tsx is my main component the code looks like this:

import * as React from "react";
import { HomeC2L1 } from "./components2"
import { HomeL3 } from "./components1/components1_level2/components1_level3/homel3"




export interface HelloProps { compiler: string; framework: string; }

export class Hello extends React.Component<HelloProps, {}> {
    render() {
        return (
            <div>
                <h1>Hello from React {this.props.compiler} {this.props.framework}</h1>
                <HomeC2L1 />

                <HomeL3/>
            </div>
        );
    }
}

where HomeC2L1 includes HomeL3.

This is the first occurance at number 11 in bundle:

/* 11 */
/*!*************************************************************************************!*\
  !*** ./dist/components/components1/components1_level2/components1_level3/homeL3.js ***!
  \*************************************************************************************/
/***/ function(module, exports, __webpack_require__) {

    "use strict";
    var __extends = (this && this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
    var React = __webpack_require__(/*! react */ 1);
    var HomeL3 = (function (_super) {
        __extends(HomeL3, _super);
        function HomeL3() {
            _super.apply(this, arguments);
        }
        HomeL3.prototype.render = function () {
            return (React.createElement("div", null, 
                React.createElement("h2", null, "this is home Level3")
            ));
        };
        return HomeL3;
    }(React.Component));
    exports.HomeL3 = HomeL3;
    //# sourceMappingURL=homeL3.js.map

/***/ },

And the second occurance of the same component homeL3 at number 16:

/* 16 */
/*!*************************************************************************************!*\
  !*** ./dist/components/components1/components1_level2/components1_level3/homel3.js ***!
  \*************************************************************************************/
/***/ function(module, exports, __webpack_require__) {

    "use strict";
    var __extends = (this && this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
    var React = __webpack_require__(/*! react */ 1);
    var HomeL3 = (function (_super) {
        __extends(HomeL3, _super);
        function HomeL3() {
            _super.apply(this, arguments);
        }
        HomeL3.prototype.render = function () {
            return (React.createElement("div", null, 
                React.createElement("h2", null, "this is home Level3")
            ));
        };
        return HomeL3;
    }(React.Component));
    exports.HomeL3 = HomeL3;
    //# sourceMappingURL=homeL3.js.map

/***/ }

Is there a way to auto remove this duplucations like webpack plugin or something.
Is there a plugin that does the job right and how to configure it?
Thanks in advance. Good day!

What I have tried:

I've added the dedupe plugin in webpack.config / it does some optimization but it does not solve the duplication of my components (in some sites there is information that dedupe is deprecated in webpack 2. is it realy deprecated or not?). Tried also the commonchunks plugin.