How to get rid of duplicate _interopRequireDefault code generated by babel-loader?

Question

webpack

A snippet of my webpack config :

{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: `babel-loader`,
            query: {
                presets: [`es2015`],
                plugins: [
                    ['transform-runtime', {
                      helpers: true,
                      polyfill: false,
                      regenerator: false, }]
                    ]
            }
        }

I'm using transform-runtime 6.х.х version
But still it doesn't put everything into a separate module, the code duplicates and duplicates everything

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
//...

Answer 1

I'm not a js specialist, but if you go to the babel-runtime sources, then this function is duplicated inside the helpers themselves (although it exists as a helper, but is not connected in other helpers) + it is also duplicated in the project code by babel. As a result, there are a lot of these duplicates. I don't know why they did it. I think it might be better to use: Documentation External helpers , and disable runtime helpers

Answer 2

Regular block with shadow.
The two back elements via pseudo elements, with a z-index lower than the main one.
https://jsfiddle.net/webirus/j85931f5/2/

Answer 3

Slightly modernized the answer Sergey Goryachev :
Looks like? :)
https://jsfiddle.net/j85931f5/5/