Duplicate helper functions generated when building bundle with babel and webpack

Question

I'm trying to build bundle as small as possible using webpack and babel.

I know that in order to skip duplication of extends, classCallCheck, etc. I should use @babel/plugin-transform-runtime and this works as expected.

Unfortunately, there are still some function which are defined lots of times in the beginning of the module, which is using them. Some of them are:

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }

And so on...

My config files are:

babel.config.js

module.exports = function(api) {
  api.cache(false);
  const presets = [
    ["@babel/preset-typescript"],
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "14",
          "chrome": "61",
          "safari": "11.1",
          "ie": "11",
          "ios": "8"
        }
      }
    ]
  ];
  const plugins = [
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-transform-runtime"]]
  return {
    presets,
    plugins,
    sourceType: "unambiguous"
  };
};

webpack:

      config.entry = [
        "core-js/stable/array/includes",
        "core-js/stable/array/find",
        "core-js/stable/array/from",
        "core-js/stable/promise",
        "core-js/stable/map",
        "core-js/stable/set",
        "core-js/stable/symbol/async-iterator",
        "regenerator-runtime/runtime",
        "intersection-observer",
        bundleEntry];

I've played a lot configuring babel, but with no success. Any help will be appreciated.

Answer 1

It turned out that there are recent issues in github:
https://github.com/preconstruct/preconstruct/issues/297 https://github.com/preconstruct/preconstruct/issues/318

TL;DR;

version parameter of @babel/plugin-transform-runtime should be added in the babel config file:

 ["@babel/plugin-transform-runtime", {"version": "7.11.5"}]