<h2 dir="auto">Bug Report</h2>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I would like to work on a fix!</li>
</ul>
<p dir="auto"><code class="notranslate">@babel/helper-compliation-targets</code> is used by <code class="notranslate">@babel/preset-env</code> to transform the browsers/targets property into a list that can be actioned. In this process, it appears that <code class="notranslate">and_chr</code> and <code class="notranslate">and_ff</code> will be resolved to just <code class="notranslate">chrome</code> or <code class="notranslate">firefox</code> which results in the wrong targets being resolved.</p>
<p dir="auto"><strong>Current Behaviour</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="last 1 firefoxandroid versions
last 3 firefox versions"><pre class="notranslate"><code class="notranslate">last 1 firefoxandroid versions
last 3 firefox versions
</code></pre></div>
<p dir="auto">results in the following output when using the debug flag:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Using targets:
{
  &quot;firefox&quot;: &quot;81&quot;
}

Using modules transform: false

Using plugins:
  syntax-numeric-separator { &quot;firefox&quot;:&quot;81&quot; }
  syntax-nullish-coalescing-operator { &quot;firefox&quot;:&quot;81&quot; }
  syntax-optional-chaining { &quot;firefox&quot;:&quot;81&quot; }
  syntax-json-strings { &quot;firefox&quot;:&quot;81&quot; }
  syntax-optional-catch-binding { &quot;firefox&quot;:&quot;81&quot; }
  syntax-async-generators { &quot;firefox&quot;:&quot;81&quot; }
  syntax-object-rest-spread { &quot;firefox&quot;:&quot;81&quot; }
  syntax-dynamic-import { &quot;firefox&quot;:&quot;81&quot; }
  syntax-export-namespace-from { &quot;firefox&quot;:&quot;81&quot; }
  syntax-top-level-await { &quot;firefox&quot;:&quot;81&quot; }"><pre class="notranslate"><code class="notranslate">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" }
</code></pre></div>
<p dir="auto"><strong>Expected Behaviour</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="last 1 firefoxandroid versions
last 3 firefox versions"><pre class="notranslate"><code class="notranslate">last 1 firefoxandroid versions
last 3 firefox versions
</code></pre></div>
<p dir="auto">resolves to a target of:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;firefox&quot;: &quot;81&quot;,
  &quot;firefox android&quot;: &quot;83&quot;
}"><pre class="notranslate"><code class="notranslate">{
  "firefox": "81",
  "firefox android": "83"
}
</code></pre></div>
<p dir="auto"><strong>Possible Solution</strong></p>
<p dir="auto">Update the <a href="https://github.com/babel/babel/blob/main/packages/babel-helper-compilation-targets/src/targets.js#L5-L20"><code class="notranslate">browserNameMap</code></a> to give distinction to mobile versions. For example if I change it to be:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="and_ff: &quot;firefox android&quot;,"><pre class="notranslate"><code class="notranslate">and_ff: "firefox android",
</code></pre></div>
<p dir="auto">Then my resulting output from running <code class="notranslate">@babel/preset-env</code> with the debug flag is correct:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Using targets:
{
  &quot;firefox&quot;: &quot;81&quot;,
  &quot;firefox android&quot;: &quot;83&quot;
}

Using modules transform: false

Using plugins:
  proposal-numeric-separator { &quot;firefox android&quot;:&quot;83&quot; }
  proposal-logical-assignment-operators { &quot;firefox android&quot;:&quot;83&quot; }
  proposal-nullish-coalescing-operator { &quot;firefox android&quot;:&quot;83&quot; }
  proposal-optional-chaining { &quot;firefox android&quot;:&quot;83&quot; }
  proposal-json-strings { &quot;firefox android&quot;:&quot;83&quot; }
  proposal-optional-catch-binding { &quot;firefox android&quot;:&quot;83&quot; }
  transform-parameters { &quot;firefox android&quot;:&quot;83&quot; }
  proposal-async-generator-functions { &quot;firefox android&quot;:&quot;83&quot; }
  proposal-object-rest-spread { &quot;firefox android&quot;:&quot;83&quot; }
  transform-dotall-regex { &quot;firefox android&quot;:&quot;83&quot; }
  proposal-unicode-property-regex { &quot;firefox android&quot;:&quot;83&quot; }
  transform-named-capturing-groups-regex { &quot;firefox android&quot;:&quot;83&quot; }
  transform-async-to-generator { &quot;firefox android&quot;:&quot;83&quot; }
  transform-exponentiation-operator { &quot;firefox android&quot;:&quot;83&quot; }
  transform-template-literals { &quot;firefox android&quot;:&quot;83&quot; }
  transform-literals { &quot;firefox android&quot;:&quot;83&quot; }
  transform-function-name { &quot;firefox android&quot;:&quot;83&quot; }
  transform-arrow-functions { &quot;firefox android&quot;:&quot;83&quot; }
  transform-block-scoped-functions { &quot;firefox android&quot;:&quot;83&quot; }
  transform-classes { &quot;firefox android&quot;:&quot;83&quot; }
  transform-object-super { &quot;firefox android&quot;:&quot;83&quot; }
  transform-shorthand-properties { &quot;firefox android&quot;:&quot;83&quot; }
  transform-duplicate-keys { &quot;firefox android&quot;:&quot;83&quot; }
  transform-computed-properties { &quot;firefox android&quot;:&quot;83&quot; }
  transform-for-of { &quot;firefox android&quot;:&quot;83&quot; }
  transform-sticky-regex { &quot;firefox android&quot;:&quot;83&quot; }
  transform-unicode-escapes { &quot;firefox android&quot;:&quot;83&quot; }
  transform-unicode-regex { &quot;firefox android&quot;:&quot;83&quot; }
  transform-spread { &quot;firefox android&quot;:&quot;83&quot; }
  transform-destructuring { &quot;firefox android&quot;:&quot;83&quot; }
  transform-block-scoping { &quot;firefox android&quot;:&quot;83&quot; }
  transform-typeof-symbol { &quot;firefox android&quot;:&quot;83&quot; }
  transform-new-target { &quot;firefox android&quot;:&quot;83&quot; }
  transform-regenerator { &quot;firefox android&quot;:&quot;83&quot; }
  transform-member-expression-literals { &quot;firefox android&quot;:&quot;83&quot; }
  transform-property-literals { &quot;firefox android&quot;:&quot;83&quot; }
  transform-reserved-words { &quot;firefox android&quot;:&quot;83&quot; }
  proposal-export-namespace-from { &quot;firefox android&quot;:&quot;83&quot; }
  syntax-dynamic-import { &quot;firefox&quot;:&quot;81&quot;, &quot;firefox android&quot;:&quot;83&quot; }
  syntax-top-level-await { &quot;firefox&quot;:&quot;81&quot;, &quot;firefox android&quot;:&quot;83&quot; }"><pre class="notranslate"><code class="notranslate">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" }
</code></pre></div>
<p dir="auto"><strong>Additional context</strong></p>
<p dir="auto">Given a browserslist of:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="last 1 firefoxandroid versions
last 3 firefox versions"><pre class="notranslate"><code class="notranslate">last 1 firefoxandroid versions
last 3 firefox versions
</code></pre></div>
<p dir="auto">This resolves to (when using the <code class="notranslate">debug</code> flag of <code class="notranslate">@babel/preset-env</code>) to:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Using targets:
{
  &quot;firefox&quot;: &quot;81&quot;
}

Using modules transform: false

Using plugins:
  syntax-numeric-separator { &quot;firefox&quot;:&quot;81&quot; }
  syntax-nullish-coalescing-operator { &quot;firefox&quot;:&quot;81&quot; }
  syntax-optional-chaining { &quot;firefox&quot;:&quot;81&quot; }
  syntax-json-strings { &quot;firefox&quot;:&quot;81&quot; }
  syntax-optional-catch-binding { &quot;firefox&quot;:&quot;81&quot; }
  syntax-async-generators { &quot;firefox&quot;:&quot;81&quot; }
  syntax-object-rest-spread { &quot;firefox&quot;:&quot;81&quot; }
  syntax-dynamic-import { &quot;firefox&quot;:&quot;81&quot; }
  syntax-export-namespace-from { &quot;firefox&quot;:&quot;81&quot; }
  syntax-top-level-await { &quot;firefox&quot;:&quot;81&quot; }"><pre class="notranslate"><code class="notranslate">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" }
</code></pre></div>
<p dir="auto">This isn't correct though as it should resolve to Firefox 81, and Firefox Android 83 (at the time of writing).</p>
<p dir="auto">The issue occurs in the <code class="notranslate">getLowestVersions</code> function:</p>
<p dir="auto"></p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/babel/babel/blob/4f3fcf11101d52e9bb27042708080bf5c619e201/packages/babel-helper-compilation-targets/src/index.js#L209-L216">babel/packages/babel-helper-compilation-targets/src/index.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
        Lines 209 to 216
      in
      <a data-pjax="true" class="commit-tease-sha" href="/babel/babel/commit/4f3fcf11101d52e9bb27042708080bf5c619e201">4f3fcf1</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L209" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="209"></td>
          <td id="LC209" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">const</span> <span class="pl-s1">browsers</span> <span class="pl-c1">=</span> <span class="pl-en">browserslist</span><span class="pl-kos">(</span><span class="pl-s1">browsersquery</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L210" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="210"></td>
          <td id="LC210" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-c1">path</span>: <span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">configPath</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L211" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="211"></td>
          <td id="LC211" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-c1">mobileToDesktop</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L212" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="212"></td>
          <td id="LC212" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-c1">env</span>: <span class="pl-s1">options</span><span class="pl-kos">.</span><span class="pl-c1">browserslistEnv</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L213" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="213"></td>
          <td id="LC213" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L214" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="214"></td>
          <td id="LC214" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">  </td>
        </tr>

        <tr class="border-0">
          <td id="L215" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="215"></td>
          <td id="LC215" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">const</span> <span class="pl-s1">queryBrowsers</span> <span class="pl-c1">=</span> <span class="pl-en">getLowestVersions</span><span class="pl-kos">(</span><span class="pl-s1">browsers</span><span class="pl-kos">)</span><span class="pl-kos">;</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L216" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="216"></td>
          <td id="LC216" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-s1">targets</span> <span class="pl-c1">=</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">assign</span><span class="pl-kos">(</span><span class="pl-s1">queryBrowsers</span><span class="pl-kos">,</span> <span class="pl-s1">targets</span><span class="pl-kos">)</span><span class="pl-kos">;</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">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:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ 'and_ff 83', 'firefox 83', 'firefox 82', 'firefox 81' ]"><pre class="notranslate"><code class="notranslate">[ 'and_ff 83', 'firefox 83', 'firefox 82', 'firefox 81' ]
</code></pre></div>
<p dir="auto">It loses it once it's normalized:</p>
<p dir="auto"></p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/babel/babel/blob/4f3fcf11101d52e9bb27042708080bf5c619e201/packages/babel-helper-compilation-targets/src/index.js#L74">babel/packages/babel-helper-compilation-targets/src/index.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 74
      in
      <a data-pjax="true" class="commit-tease-sha" href="/babel/babel/commit/4f3fcf11101d52e9bb27042708080bf5c619e201">4f3fcf1</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L74" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="74"></td>
          <td id="LC74" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">const</span> <span class="pl-s1">normalizedBrowserName</span> <span class="pl-c1">=</span> <span class="pl-s1">browserNameMap</span><span class="pl-kos">[</span><span class="pl-s1">browserName</span><span class="pl-kos">]</span><span class="pl-kos">;</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">This is because the targets map will cast <code class="notranslate">and_ff</code> to be just <code class="notranslate">firefox</code>:</p>
<p dir="auto"></p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/babel/babel/blob/4f3fcf11101d52e9bb27042708080bf5c619e201/packages/babel-helper-compilation-targets/src/targets.js#L7">babel/packages/babel-helper-compilation-targets/src/targets.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 7
      in
      <a data-pjax="true" class="commit-tease-sha" href="/babel/babel/commit/4f3fcf11101d52e9bb27042708080bf5c619e201">4f3fcf1</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L7" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="7"></td>
          <td id="LC7" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-c1">and_ff</span>: <span class="pl-s">"firefox"</span><span class="pl-kos">,</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">This also affects <code class="notranslate">and_chr</code>, <code class="notranslate">ie_mob</code> and <code class="notranslate">op_mob</code>.</p>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><a href="https://nodejs.org/api/esm.html#esm_mandatory_file_extensions" rel="nofollow">File extensions are required in import statements in ES Modules.</a></p>
<p dir="auto">But files within <code class="notranslate">@babel/runtime/helpers/esm</code> (which are treated as ES Modules because <code class="notranslate">@babel/runtime/helpers/esm/package.json</code> contains <code class="notranslate">type: "module"</code>) don't use extensions in their import statements.</p>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I would like to work on a fix!</li>
</ul>

<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">I'm getting this correct error with Webpack 5:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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 '&quot;type&quot;: &quot;module&quot;').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request."><pre class="notranslate"><code class="notranslate">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.
</code></pre></div>
<p dir="auto">This is because the first line of <code class="notranslate">@babel/runtime/helpers/esm/get.js</code> is an import without an extension:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import superPropBase from &quot;./superPropBase&quot;;"><pre class="notranslate"><code class="notranslate">import superPropBase from "./superPropBase";
</code></pre></div>
<p dir="auto"><strong>Input Code</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var your =&gt; (code) =&gt; here;"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">your</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-s1">code</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">here</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">No problems using <code class="notranslate">@babel/plugin-transform-runtime</code> with <code class="notranslate">useESModules: true</code></p>
<p dir="auto"><strong>Babel Configuration</strong></p>
<ul dir="auto">
<li>Filename: (babel config inlined in babel-loader webpack config)</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  presets: [
    ['@babel/preset-env', {targets: {browsers: 'last 2 versions'}}],
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        useESModules: true,
      },
    ],
  ]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-c1">presets</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span><span class="pl-s">'@babel/preset-env'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">targets</span>: <span class="pl-kos">{</span><span class="pl-c1">browsers</span>: <span class="pl-s">'last 2 versions'</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">'@babel/plugin-transform-runtime'</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">useESModules</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Environment</strong></p>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=""><pre class="notranslate"><code class="notranslate">
</code></pre></div>
<ul dir="auto">
<li><code class="notranslate">@babel/runtime</code>: 7.11.2</li>
<li><code class="notranslate">@babel/plugin-transform-runtime</code>: 7.11.5</li>
<li><code class="notranslate">webpack</code>: 5.0.0-rc.4</li>
<li><code class="notranslate">babel-loader</code>: 8.1.0</li>
</ul>
<p dir="auto"><strong>Possible Solution</strong></p>

<p dir="auto">Use full extensions in imports inside <code class="notranslate">@babel/runtime/helpers/esm</code>, so I don't get these errors, for example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import superPropBase from &quot;./superPropBase.js&quot;;"><pre class="notranslate"><code class="notranslate">import superPropBase from "./superPropBase.js";
</code></pre></div>