Specify runtime exports #10853

JLHwung · 2019-12-10T16:43:39Z

Q	A
Fixed Issues?	Fixes #10548, fixes #8462, fixes #12003, fixes #12058
License	MIT

Solved issues

This PR add helper/esm exports to @babel/runtime(-corejs[23])?. Importing esm modular helpers are now broken on Babel 7.7.6 and Node.js 13.2

import "@babel/runtime/helpers/esm/applyDecoratedDescriptor"

// Error: Package exports for /path/to/babel/node_modules/@babel/runtime/package.json
// do not define a './helpers/esm/applyDecoratedDescriptor' subpath,
// imported from /path/to/code/babel/test.mjs

import "@babel/runtime/helpers/esm/applyDecoratedDescriptor.js"

// Error: Package exports for /path/to/babel/babel/node_modules/@babel/runtime/package.json
// do not define a './helpers/esm/applyDecoratedDescriptor.js' subpath,
// imported from /path/to/babel/test.mjs

This PR adds such missing exports so both

import "@babel/runtime/helpers/esm/applyDecoratedDescriptor"
// and
import "@babel/runtime/helpers/esm/applyDecoratedDescriptor.js"

should work.

Changes to `@babel/runtime`

Take @babel/runtime-corejs3 as an example:

7.11.2

import _Array$isArray from "../../core-js/array/is-array";
import arrayLikeToArray from "./arrayLikeToArray";
export default function _arrayWithoutHoles(arr) {
  if (_Array$isArray(arr)) return arrayLikeToArray(arr);
}

This PR

import _Array$isArray from "@babel/runtime-corejs3/core-js/array/is-array";
import arrayLikeToArray from "@babel/runtime-corejs3/helpers/esm/arrayLikeToArray";
export default function _arrayWithoutHoles(arr) {
  if (_Array$isArray(arr)) return arrayLikeToArray(arr);
}

The relative imports to core-js helpers are replaced by submodule imports @babel/runtime-corejs3/core-js. The relative imports to internal Babel helpers are also replaced by @babel/runtime-corejs3/helpers/esm/arrayLikeToArray.

This changes are also applied on non-esm helpers.

7.11.2

var _Array$isArray = require("../core-js/array/is-array");
var arrayLikeToArray = require("./arrayLikeToArray");
function _arrayWithoutHoles(arr) {
  if (_Array$isArray(arr)) return arrayLikeToArray(arr);
}
module.exports = _arrayWithoutHoles;

This PR

var _Array$isArray = require("@babel/runtime-corejs3/core-js/array/is-array");
var arrayLikeToArray = require("@babel/runtime-corejs3/helpers/arrayLikeToArray");
function _arrayWithoutHoles(arr) {
  if (_Array$isArray(arr)) return arrayLikeToArray(arr);
}
module.exports = _arrayWithoutHoles;

Node.js ESM requires relative imports (e.g. ./arrayLikeToArray) ending with specific extension .js. However, adding extension to import path will break people consuming @babel/runtime via AMD, because we removed file extension from the module specifier:

babel/packages/babel-helper-module-transforms/src/get-module-name.js

Line 40 in 20fd450

.replace(/\.(\w*?)$/, "");

. So we generated define("@babel/runtime/arrayLikeToArray") for arrayLikeToArray.js and thus require("./arrayLikeToArray.js") will throw for AMD users.

Since it is a breaking to change the moduleName behaviour. This PR does not add extension but adding more exports so it can work with both Node.js ESM and AMD.

packages/babel-plugin-transform-runtime/scripts/build-dist.js

+    "./helpers/": "./helpers/",
+    "./helpers/esm/": "./helpers/esm/",
+    "./regenerator": "./regenerator/index.js",
+    "./regenerator/": "./regenerator/",


packages/babel-plugin-transform-runtime/scripts/build-dist.js

nicolo-ribaudo · 2019-12-10T22:45:32Z

No need to introduce removeImportsExtension option in 7.8.0

Don't we still need it for the useBuiltIns option anyway?

JLHwung · 2019-12-11T19:30:23Z

Don't we still need it for the useBuiltIns option anyway?

I think we can add .js to corejs and regenerator-runtime imports since they doesn't support amd. (See #10862 After that PR we don't have to introduce removeImportsExtension then.

We could consider introduce removeImportsExtension to transform-modules-amd so that the following usage

import "foo/bar.js"

can be correctly transpiled to AMD

define(["foo/bar"], function (_bar) {
  "use strict";
});

politician · 2020-06-19T04:10:00Z

What's the status on this PR?
Unless I missed something, as of today, it is not possible for Babel to transpile ES6 modules to be consumed natively by Node 13 and 14 when using plugin-transform-runtime.

#10549 was apparently fixing the issue but has been rolled back

babel-bot · 2020-06-24T01:27:59Z

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/29137/

codesandbox-ci · 2020-09-08T21:04:23Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4997566:

Sandbox	Source
babel-repl-custom-plugin	Configuration
babel-plugin-multi-config	Configuration
babel-repl-custom-plugin	Issue #12003

JLHwung · 2020-09-08T21:06:59Z

packages/babel-runtime-corejs2/package.json

+    "./package.json": "./package.json",
+    "./regenerator": "./regenerator/index.js",
+    "./regenerator/": "./regenerator/",
+    "./core-js/": "./core-js/",


Note that the directory export map is deep: All files under core-js can be imported via path/filename.ext:

import "@babel/runtime-corejs2/core-js/object/assign.js"

alexander-akait

Looks good, maybe it will be good idea to add couple of tests

JLHwung · 2020-09-14T15:40:03Z

packages/babel-runtime-corejs2/helpers/esm/toArray.js

@@ -1,7 +1,7 @@
-import arrayWithHoles from "./arrayWithHoles";


Interesting, some corejs 2 helper files are tracked in git repository. Yet it is convenient so you can review the actual change of helper imports.

/cc @rwjblue Will ember support self referencing package? In this case @babel/runtime-corejs2 is referencing itself. The import path extension .js is not added so this part should work with amd.

Yet it is convenient so you can review the actual change of helper imports.

That's exactly why we don't ignore some of these files 😛

JLHwung · 2020-09-14T21:49:56Z

test/esm/babel-runtime-corejs3.mjs

@@ -0,0 +1,69 @@
+import assert from "assert";
+
+export default {


I wrote the testcases in such a way that hopefully we can use a codemod to convert the testcases to Jest BDD test styles, after Jest supports esm.

JLHwung · 2020-09-14T21:51:10Z

test/esm/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@babel/test-esm",


This package is not visible to lerna. It is handled by yarn so we can import @babel/runtime from the workspace.

nicolo-ribaudo

This looks good!

nicolo-ribaudo · 2020-09-17T09:46:03Z

packages/babel-runtime-corejs2/helpers/esm/iterableToArray.js

-import _Symbol from "../../core-js/symbol";
+import _Array$from from "@babel/runtime-corejs2/core-js/array/from";
+import _isIterable from "@babel/runtime-corejs2/core-js/is-iterable";
+import _Symbol from "@babel/runtime-corejs2/core-js/symbol";


For users using PnP, is it allowed for a package to import itself?

Yarn PnP does not support esm yet: yarnpkg/berry#638

@merceyz Does PnP support require("package/itself")?

Yes, that's totally fine

nicolo-ribaudo · 2020-09-17T09:46:29Z

packages/babel-runtime-corejs2/helpers/esm/toArray.js

@@ -1,7 +1,7 @@
-import arrayWithHoles from "./arrayWithHoles";


Yet it is convenient so you can review the actual change of helper imports.

That's exactly why we don't ignore some of these files 😛

refs FOO-1331 need the fix in babel/babel#10853 so that the helpers injected by @babel/runtime et al do work in ESM mode (previously they would be missing the file extension) Change-Id: I41b13e03d248068b421065c6eada7f93defb48f7

JLHwung added the PR: Internal 🏠 A type of pull request used for our changelog categories label Dec 10, 2019

JLHwung mentioned this pull request Dec 10, 2019

Disable submodule exports #10850

Closed

JLHwung commented Dec 10, 2019

View reviewed changes

packages/babel-plugin-transform-runtime/scripts/build-dist.js Outdated Show resolved Hide resolved

JLHwung force-pushed the specify-runtime-exports branch from 1d2276e to 14e8335 Compare December 10, 2019 20:17

JLHwung commented Dec 10, 2019

View reviewed changes

packages/babel-plugin-transform-runtime/scripts/build-dist.js

"./helpers/": "./helpers/",

"./helpers/esm/": "./helpers/esm/",

"./regenerator": "./regenerator/index.js",

"./regenerator/": "./regenerator/",

This comment was marked as outdated.

Sign in to view

JLHwung commented Dec 10, 2019

View reviewed changes

packages/babel-plugin-transform-runtime/scripts/build-dist.js Outdated Show resolved Hide resolved

shimataro mentioned this pull request Dec 21, 2019

Add ".js" extension to injected polyfill imports #10549

Merged

JLHwung force-pushed the specify-runtime-exports branch from 14e8335 to 99c950e Compare June 24, 2020 01:25

JLHwung changed the base branch from master to main June 24, 2020 01:25

JLHwung requested review from nicolo-ribaudo and kaicataldo June 24, 2020 01:26

JLHwung mentioned this pull request Aug 25, 2020

Invalid Import Path for core-js Imports When Using type: module #12003

Closed

1 task

JLHwung force-pushed the specify-runtime-exports branch from 99c950e to 2237a96 Compare September 8, 2020 20:57

JLHwung commented Sep 8, 2020

View reviewed changes

JLHwung mentioned this pull request Sep 14, 2020

Webpack5 ESM strict mode #12058

Closed

alexander-akait reviewed Sep 14, 2020

View reviewed changes

JLHwung force-pushed the specify-runtime-exports branch from 2237a96 to 36d435d Compare September 14, 2020 15:34

JLHwung commented Sep 14, 2020

View reviewed changes

Timer mentioned this pull request Sep 15, 2020

Update webpack 5 resolving vercel/next.js#17095

Merged

nicolo-ribaudo approved these changes Sep 17, 2020

View reviewed changes

JLHwung added this to the v7.12.0 milestone Sep 17, 2020

nicolo-ribaudo requested a review from hzoo September 17, 2020 19:38

kaicataldo approved these changes Sep 21, 2020

View reviewed changes

nicolo-ribaudo added the PR: Ready to be Merged A pull request with already two approvals, but waiting for the next minor release label Sep 30, 2020

JLHwung added 9 commits October 1, 2020 17:24

chore: emit helper/core-js exports to package.json

330352e

chore: add exports to runtime

26d421c

fix: add sub import paths

96fc51e

fix: rewrite helper imports to runtime sub imports

1194ee6

update helper artifacts

485d48c

test: add esm tests

aababfc

ci: run test:esm on latest node

60cc15a

chore: add more testcases

92c8717

Run esm test after coverage test

4997566

JLHwung force-pushed the specify-runtime-exports branch from ab64884 to 4997566 Compare October 1, 2020 21:25

jedwards1211 mentioned this pull request Oct 9, 2020

missing extension in import paths in @babel/runtime/helpers/esm #12158

Closed

1 task

nicolo-ribaudo merged commit 4e66b8e into babel:main Oct 14, 2020

nicolo-ribaudo deleted the specify-runtime-exports branch October 14, 2020 18:07

ntucker mentioned this pull request Oct 15, 2020

pkg: babel to 7.12 ntucker/anansi#46

Merged

jsnajdr mentioned this pull request Dec 7, 2020

Upgrade Babel packages to 7.12.x WordPress/gutenberg#27553

Merged

github-actions bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Jan 14, 2021

github-actions bot locked as resolved and limited conversation to collaborators Jan 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Specify runtime exports #10853

Specify runtime exports #10853

JLHwung commented Dec 10, 2019 •

edited by gitpod-io bot

This comment was marked as outdated.

nicolo-ribaudo commented Dec 10, 2019

JLHwung commented Dec 11, 2019 •

edited

politician commented Jun 19, 2020

babel-bot commented Jun 24, 2020 •

edited

codesandbox-ci bot commented Sep 8, 2020 •

edited

JLHwung Sep 8, 2020

alexander-akait left a comment

JLHwung Sep 14, 2020

nicolo-ribaudo Sep 17, 2020

JLHwung Sep 14, 2020

JLHwung Sep 14, 2020

nicolo-ribaudo left a comment

nicolo-ribaudo Sep 17, 2020

JLHwung Sep 17, 2020

merceyz Sep 17, 2020

nicolo-ribaudo Sep 17, 2020

		@@ -1,7 +1,7 @@
		import arrayWithHoles from "./arrayWithHoles";

		@@ -0,0 +1,69 @@
		import assert from "assert";

		export default {

Specify runtime exports #10853

Specify runtime exports #10853

Conversation

JLHwung commented Dec 10, 2019 • edited by gitpod-io bot

Solved issues

Changes to @babel/runtime

This comment was marked as outdated.

nicolo-ribaudo commented Dec 10, 2019

JLHwung commented Dec 11, 2019 • edited

politician commented Jun 19, 2020

babel-bot commented Jun 24, 2020 • edited

codesandbox-ci bot commented Sep 8, 2020 • edited

Choose a reason for hiding this comment

alexander-akait left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicolo-ribaudo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JLHwung commented Dec 10, 2019 •

edited by gitpod-io bot

Changes to `@babel/runtime`

JLHwung commented Dec 11, 2019 •

edited

babel-bot commented Jun 24, 2020 •

edited

codesandbox-ci bot commented Sep 8, 2020 •

edited