Issue 1:
Bug Report

I would like to work on a fix!

@babel/helper-compliation-targets is used by @babel/preset-env to transform the browsers/targets property into a list that can be actioned. In this process, it appears that and_chr and and_ff will be resolved to just chrome or firefox which results in the wrong targets being resolved.

Current Behaviour

last 1 firefoxandroid versions
last 3 firefox versions

results in the following output when using the debug flag:

Using targets:
{
"firefox": "81"
}

Using modules transform: false

Using plugins:
syntax-numeric-separator { "firefox":"81" }
syntax-nullish-coalescing-operator { "firefox":"81" }
syntax-optional-chaining { "firefox":"81" }
syntax-json-strings { "firefox":"81" }
syntax-optional-catch-binding { "firefox":"81" }
syntax-async-generators { "firefox":"81" }
syntax-object-rest-spread { "firefox":"81" }
syntax-dynamic-import { "firefox":"81" }
syntax-export-namespace-from { "firefox":"81" }
syntax-top-level-await { "firefox":"81" }

Expected Behaviour

last 1 firefoxandroid versions
last 3 firefox versions

resolves to a target of:

{
"firefox": "81",
"firefox android": "83"
}

Possible Solution

Update the browserNameMap to give distinction to mobile versions. For example if I change it to be:

and_ff: "firefox android",

Then my resulting output from running @babel/preset-env with the debug flag is correct:

Using targets:
{
"firefox": "81",
"firefox android": "83"
}

Using modules transform: false

Using plugins:
proposal-numeric-separator { "firefox android":"83" }
proposal-logical-assignment-operators { "firefox android":"83" }
proposal-nullish-coalescing-operator { "firefox android":"83" }
proposal-optional-chaining { "firefox android":"83" }
proposal-json-strings { "firefox android":"83" }
proposal-optional-catch-binding { "firefox android":"83" }
transform-parameters { "firefox android":"83" }
proposal-async-generator-functions { "firefox android":"83" }
proposal-object-rest-spread { "firefox android":"83" }
transform-dotall-regex { "firefox android":"83" }
proposal-unicode-property-regex { "firefox android":"83" }
transform-named-capturing-groups-regex { "firefox android":"83" }
transform-async-to-generator { "firefox android":"83" }
transform-exponentiation-operator { "firefox android":"83" }
transform-template-literals { "firefox android":"83" }
transform-literals { "firefox android":"83" }
transform-function-name { "firefox android":"83" }
transform-arrow-functions { "firefox android":"83" }
transform-block-scoped-functions { "firefox android":"83" }
transform-classes { "firefox android":"83" }
transform-object-super { "firefox android":"83" }
transform-shorthand-properties { "firefox android":"83" }
transform-duplicate-keys { "firefox android":"83" }
transform-computed-properties { "firefox android":"83" }
transform-for-of { "firefox android":"83" }
transform-sticky-regex { "firefox android":"83" }
transform-unicode-escapes { "firefox android":"83" }
transform-unicode-regex { "firefox android":"83" }
transform-spread { "firefox android":"83" }
transform-destructuring { "firefox android":"83" }
transform-block-scoping { "firefox android":"83" }
transform-typeof-symbol { "firefox android":"83" }
transform-new-target { "firefox android":"83" }
transform-regenerator { "firefox android":"83" }
transform-member-expression-literals { "firefox android":"83" }
transform-property-literals { "firefox android":"83" }
transform-reserved-words { "firefox android":"83" }
proposal-export-namespace-from { "firefox android":"83" }
syntax-dynamic-import { "firefox":"81", "firefox android":"83" }
syntax-top-level-await { "firefox":"81", "firefox android":"83" }

Additional context

Given a browserslist of:

last 1 firefoxandroid versions
last 3 firefox versions

This resolves to (when using the debug flag of @babel/preset-env) to:

Using targets:
{
"firefox": "81"
}

Using modules transform: false

Using plugins:
syntax-numeric-separator { "firefox":"81" }
syntax-nullish-coalescing-operator { "firefox":"81" }
syntax-optional-chaining { "firefox":"81" }
syntax-json-strings { "firefox":"81" }
syntax-optional-catch-binding { "firefox":"81" }
syntax-async-generators { "firefox":"81" }
syntax-object-rest-spread { "firefox":"81" }
syntax-dynamic-import { "firefox":"81" }
syntax-export-namespace-from { "firefox":"81" }
syntax-top-level-await { "firefox":"81" }

This isn't correct though as it should resolve to Firefox 81, and Firefox Android 83 (at the time of writing).

The issue occurs in the getLowestVersions function:

babel/packages/babel-helper-compilation-targets/src/index.js

Lines 209 to 216
in
4f3fcf1

const browsers = browserslist(browsersquery, {

path: options.configPath,

mobileToDesktop: true,

env: options.browserslistEnv,

});

const queryBrowsers = getLowestVersions(browsers);

targets = Object.assign(queryBrowsers, targets);

This function attempts to normalize the incoming browser name, and in do so, loses the distinction between the mobile and desktop version. While this function gets the correct browsers:

[ 'and_ff 83', 'firefox 83', 'firefox 82', 'firefox 81' ]

It loses it once it's normalized:

babel/packages/babel-helper-compilation-targets/src/index.js

Line 74
in
4f3fcf1

const normalizedBrowserName = browserNameMap[browserName];

This is because the targets map will cast and_ff to be just firefox:

babel/packages/babel-helper-compilation-targets/src/targets.js

Line 7
in
4f3fcf1

and_ff: "firefox",

This also affects and_chr, ie_mob and op_mob.

Issue 2:
Bug Report

File extensions are required in import statements in ES Modules.

But files within @babel/runtime/helpers/esm (which are treated as ES Modules because @babel/runtime/helpers/esm/package.json contains type: "module") don't use extensions in their import statements.

I would like to work on a fix!

Current behavior

I'm getting this correct error with Webpack 5:

ERROR in ./node_modules/@babel/runtime/helpers/esm/get.js 1:0-44
Module not found: Error: Can't resolve './superPropBase' in '/Users/andy/clarity/node_modules/@babel/runtime/helpers/esm'
Did you mean 'superPropBase.js'?
BREAKING CHANGE: The request './superPropBase' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

This is because the first line of @babel/runtime/helpers/esm/get.js is an import without an extension:

import superPropBase from "./superPropBase";

Input Code

var your => (code) => here;

Expected behavior

No problems using @babel/plugin-transform-runtime with useESModules: true

Babel Configuration

Filename: (babel config inlined in babel-loader webpack config)

{
presets: [
['@babel/preset-env', {targets: {browsers: 'last 2 versions'}}],
],
plugins: [
[
'@babel/plugin-transform-runtime',
{
useESModules: true,
},
],
]
}

Environment

@babel/runtime: 7.11.2

@babel/plugin-transform-runtime: 7.11.5

webpack: 5.0.0-rc.4

babel-loader: 8.1.0

Possible Solution

Use full extensions in imports inside @babel/runtime/helpers/esm, so I don't get these errors, for example:

import superPropBase from "./superPropBase.js";