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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay