DEV Community

Vladimir Klepov
Vladimir Klepov

Posted on • Originally published at blog.thoughtspile.tech on

Using babel's transform-runtime? It may not work well without "version" option.

IE11 is not dead yet, and our library is supposed to run there and make russian grandmas happy. As you can guess, we rely on babel’s preset-env a lot. We also don’t want our code to be 55% babel helpers, so we use babel’s transform-runtime — it should make babel import someHelper from '@babel/runtime/some-helper' instead of inlining it into every file. After making some build chain updates I went to see if the transpiled version was OK. And guess what I noticed? Some babel helpers were still there, inlined:

import \_defineProperty from "@babel/runtime/helpers/defineProperty";
// go away transform do you have any idea who I am?
function ownKeys(object, enumerableOnly) { /\* blah-blah-blah \*/ }
function \_objectSpread(target) { /\* more blah-blah-blah \*/ }

var copy = function copy(obj) {
  return \_objectSpread({}, options);
};
Enter fullscreen mode Exit fullscreen mode

WTF? I want to import _objectSpread, you lazy code! What’s wrong with you? A leak from an external library? An unexpected interaction with preset-react or preset-typescript? Corrupt installation? Babel bugs? No, no, no, no.

The answer was simple — transform-runtime wants me to tell it what @babel/runtime version I have via the version option. For some reason, transform-runtime assumes you have @babel/runtime version 7.0.0, and if a helper was not in runtime@7.0.0, it won’t bother importing it. Babel is at 7.15.x now, and a lot has changed. Anyways, if you pass the real runtime version you installed:

exports = {
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      // this is the magic line
      "version": "7.15.0"
    }]
  ]
}
Enter fullscreen mode Exit fullscreen mode

transform-runtime will finally do its job as it should:

import \_objectSpread from "@babel/runtime/helpers/objectSpread2";
var copy = \_objectSpread({}, props);
Enter fullscreen mode Exit fullscreen mode

If you’d rather do it once, use babel.config.js and read the runtime version from package.json — both your dependency range and the version in node_modules work fine, though I feel the latter is cleaner:

// in babel.config.js
const requiredVersion = require('./package.json').dependencies['@babel/runtime'];
const installedVersion = require('@babel/runtime/package.json').version;
Enter fullscreen mode Exit fullscreen mode

If you want your @babel/plugin-transform-runtime not to get lazy and really deduplicate all the helpers, set transform-runtime’s version option to the current @babel/runtime version. Also keep your babel stack updated, and try to match @babel/* versions. You’re welcome.

Top comments (0)