#babel/plugin-transform-runtime is allowing esm imports in cjs files - babeljs

Question

I'm using Rollup.js, and babel to bundle my js library. I noticed that my dist cjs files are referencing esm core-js helpers in addition to the correct cjs helpers.
For instance, in my final cjs file, I see a reference to both var _extends$2 = require('#babel/runtime-corejs3/helpers/esm/extends'); and var _extends$3 = require('#babel/runtime-corejs3/helpers/extends'); when I run yarn build:lib.
Has anyone seen this before? Been racking my brain and haven't been able to find what is the cause of this.
For reference,
package.json (condensed for brevity)
{
"name": "my-platform",
"version": "0.1.0",
"description": "",
"main": "dist/index.cjs",
"module": "dist/my-platform.esm.js",
"types": "dist/index.d.ts",
"engines": {
"node": ">=10.18.0"
},
"scripts": {
"build:lib": "rollup -c",
"build:docs": "build-storybook",
"build": "concurrently \"yarn build:lib\" \"yarn build:docs\"",
},
"sideEffects": false,
"peerDependencies": {
"#emotion/core": "^10.0.22",
"react": "^16.12.0 || 17"
},
"resolutions": {
"git-raw-commits": "2.0.8"
},
"devDependencies": {
"#babel/cli": "^7.12.7",
"#babel/core": "^7.12.7",
"#babel/plugin-transform-runtime": "^7.12.10",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#commitlint/cli": "^11.0.0",
"#commitlint/config-conventional": "^11.0.0",
"#emotion/babel-preset-css-prop": "^10.0.23",
"#emotion/core": "^10.0.22",
"#jest/globals": "^26.6.2",
"#rollup/plugin-babel": "^5.2.2",
"#rollup/plugin-commonjs": "^17.1.0",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^11.1.0",
"#rollup/plugin-replace": "^2.3.4",
"#typescript-eslint/eslint-plugin": "^4.14.0",
"#typescript-eslint/parser": "^4.14.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.0.6",
"babel-plugin-annotate-pure-calls": "^0.4.0",
"babel-plugin-dev-expression": "^0.2.2",
"babel-plugin-macros": "^3.0.1",
"concurrently": "^5.0.1",
"fs-extra": "^9.1.0",
"husky": ">=4.3.8",
"jest": "^26.6.3",
"jest-emotion": "^10.0.26",
"jest-junit": "^12.0.0",
"path": "^0.12.7",
"prettier": "^2.2.1",
"react": "^17.0.1",
"react-docgen-typescript-loader": "^3.4.0",
"react-dom": "^17.0.1",
"react-test-renderer": "^17.0.1",
"regenerator-runtime": "^0.13.3",
"rollup": "^2.38.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.29.0",
"stylelint": "^13.9.0",
"stylelint-config-prettier": "^8.0.0",
"stylelint-config-standard": "^20.0.0",
"tsdx": "^0.14.1",
"tslib": "^2.1.0",
"typescript": "^4.1.3"
},
"dependencies": {
"#babel/runtime-corejs3": "~7.12.18"
}
}
babel.config
module.exports = (api) => {
const isTest = api.env('test');
api.cache.forever();
return {
presets: [
[
'#babel/preset-env',
isTest ? { targets: { node: 'current' } } : { modules: false },
],
'#babel/preset-react',
'#babel/preset-typescript',
'#emotion/babel-preset-css-prop',
],
plugins: [
'annotate-pure-calls',
'dev-expression',
'macros',
[
'#babel/plugin-transform-runtime',
{
corejs: 3,
version: '^7.12.5',
},
],
],
comments: false,
};
};
rollup.config.js
import fs from 'fs-extra';
import path from 'path';
import resolve from '#rollup/plugin-node-resolve';
import babel from '#rollup/plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import json from '#rollup/plugin-json';
import commonjs from '#rollup/plugin-commonjs';
import replace from '#rollup/plugin-replace';
import del from 'rollup-plugin-delete';
import { terser } from 'rollup-plugin-terser';
import { DEFAULT_EXTENSIONS } from '#babel/core';
import pkg from './package.json';
const external = [
...Object.keys(pkg.peerDependencies || {}),
...Object.keys(pkg.dependencies || {}),
];
const makeExternalPredicate = (externalArr) => {
if (externalArr.length === 0) {
return () => false;
}
const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`);
return (id) => pattern.test(id);
};
const configTerser = () =>
terser({
output: { comments: false },
compress: {
keep_infinity: true,
pure_getters: true,
passes: 10,
},
ecma: 5,
toplevel: true,
warnings: true,
});
function writeCjsEntryFile() {
const baseLine = `module.exports = require('./my-platform`;
const contents = `
'use strict'
if (process.env.NODE_ENV === 'production') {
${baseLine}.cjs.production.min.js')
} else {
${baseLine}.cjs.development.js')
}
`;
return fs.outputFile(path.join(__dirname, './dist', 'index.js'), contents);
}
const getEnv = (format, minify) => {
switch (format) {
case 'cjs':
return minify ? 'production.' : 'development.';
default:
return '';
}
};
const makeOutput = (format, minify) => ({
file: `dist/my-platform.${format}.${getEnv(format, minify)}${
minify ? 'min.' : ''
}js`,
esModule: true,
exports: 'named',
format,
freeze: false,
sourcemap: true,
plugins: [
minify && configTerser(),
format === 'cjs' && {
writeBundle: writeCjsEntryFile,
},
],
});
let currentBundleIndex = 0;
const makeRollupConfig = (minify, format) => {
return {
input: './src/index.ts',
output: makeOutput(format, minify),
plugins: [
currentBundleIndex === 1 && del({ targets: 'dist/**' }),
minify &&
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
resolve({
extensions: ['.js', '.jsx', '.ts', '.tsx'],
}),
json(),
typescript({
typescript: require('typescript'),
tsconfigOverride: {
exclude: [
'**/*.spec.ts',
'**/*.test.ts',
'**/*.stories.ts',
'**/*.spec.tsx',
'**/*.test.tsx',
'**/*.stories.tsx',
'node_modules',
'test',
],
compilerOptions: {
target: 'esnext',
rootDir: 'src',
},
},
}),
commonjs(),
babel({
babelHelpers: 'runtime',
exclude: 'node_modules/**',
extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx'],
presets: [
[
'#babel/preset-env',
{
modules: false,
},
],
],
plugins: [
[
'#babel/plugin-transform-runtime',
{
useESModules: format === 'esm',
corejs: 3,
version: '^7.12.5',
},
],
],
}),
],
external: makeExternalPredicate(external),
};
};
export default [
makeRollupConfig(false, 'cjs'),
makeRollupConfig(false, 'esm'),
makeRollupConfig(true, 'cjs'),
];
Any help would be appreciated. Thanks!