<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"> I would like to work on a fix!</li>
</ul>

<p dir="auto"><strong>Current behavior</strong><br>
A clear and concise description of the behavior.</p>
<ul dir="auto">
<li><a href="babeljs.io/repl">REPL</a>, <a href="https://codesandbox.io/s/babel-repl-custom-plugin-7s08o?file=/src/index.js" rel="nofollow">Codesandbox</a>, or GitHub Repo helps!</li>
</ul>
<p dir="auto">When I use <code class="notranslate">@babel/preset-env</code> with the <code class="notranslate">useBuiltIns</code> option, the <code class="notranslate">core-js</code> imports still output without the <code class="notranslate">.js</code>. This is usually fine, except when running in a node environment that supports built-in modules, e.g. with <code class="notranslate">type: module</code> in the package.json or outputting to a file with the <code class="notranslate">.mjs</code> extension.</p>
<p dir="auto">This happens even if I use <code class="notranslate">--out-file-extension .mjs</code>.</p>
<p dir="auto"><code class="notranslate">--out-file-extension .cjs</code> works, if you don't use <code class="notranslate">modules: false</code>, but then you're not outputting modules.</p>
<p dir="auto"><strong>Input Code</strong></p>
<p dir="auto"><code class="notranslate">test.js</code></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const greeting = new Set(['Hello', 'world!']);
console.log(Array.from(greeting).join(' '));"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">greeting</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Set</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'Hello'</span><span class="pl-kos">,</span> <span class="pl-s">'world!'</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span><span class="pl-s1">greeting</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">' '</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npx babel test.js -d test/
node test/test.js"><pre class="notranslate">npx babel test.js -d test/
node test/test.js</pre></div>
<p dir="auto">Output:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '&lt;repo&gt;/node_modules/core-js/modules/esnext.set.add-all' imported from &lt;repo&gt;/test/test.js
Did you mean to import core-js/modules/esnext.set.add-all.js?
    at finalizeResolution (internal/modules/esm/resolve.js:275:11)
    at packageResolve (internal/modules/esm/resolve.js:668:12)
    at moduleResolve (internal/modules/esm/resolve.js:716:14)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:809:11)
    at Loader.resolve (internal/modules/esm/loader.js:85:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
    at ModuleWrap.&lt;anonymous&gt; (internal/modules/esm/module_job.js:51:40)
    at link (internal/modules/esm/module_job.js:50:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}"><pre class="notranslate"><code class="notranslate">internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '&lt;repo&gt;/node_modules/core-js/modules/esnext.set.add-all' imported from &lt;repo&gt;/test/test.js
Did you mean to import core-js/modules/esnext.set.add-all.js?
    at finalizeResolution (internal/modules/esm/resolve.js:275:11)
    at packageResolve (internal/modules/esm/resolve.js:668:12)
    at moduleResolve (internal/modules/esm/resolve.js:716:14)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:809:11)
    at Loader.resolve (internal/modules/esm/loader.js:85:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
    at ModuleWrap.&lt;anonymous&gt; (internal/modules/esm/module_job.js:51:40)
    at link (internal/modules/esm/module_job.js:50:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
A clear and concise description of what you expected to happen (or code).</p>
<p dir="auto">No errors</p>
<p dir="auto"><strong>Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)</strong></p>
<ul dir="auto">
<li>Filename: <code class="notranslate">babel.config.js</code></li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const presets = [['@babel/preset-env', {
  targets: {node: true},
  modules: false,
  useBuiltIns: 'usage',
  corejs: {version: 3, proposals: true},
}]];

export default {presets};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">presets</span> <span class="pl-c1">=</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">node</span>: <span class="pl-c1">true</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">modules</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
  <span class="pl-c1">useBuiltIns</span>: <span class="pl-s">'usage'</span><span class="pl-kos">,</span>
  <span class="pl-c1">corejs</span>: <span class="pl-kos">{</span><span class="pl-c1">version</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">proposals</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-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">{</span>presets<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="System:
  OS: android
Binaries:
  Node: 14.8.0 - /data/data/com.termux/files/usr/bin/node
  npm: 6.14.7 - /data/data/com.termux/files/usr/bin/npm
npmPackages:
  @babel/cli: ^7.10.5 =&gt; 7.10.5
  @babel/core: ^7.11.4 =&gt; 7.11.4
  @babel/preset-env: ^7.11.0 =&gt; 7.11.0"><pre class="notranslate"><code class="notranslate">System:
  OS: android
Binaries:
  Node: 14.8.0 - /data/data/com.termux/files/usr/bin/node
  npm: 6.14.7 - /data/data/com.termux/files/usr/bin/npm
npmPackages:
  @babel/cli: ^7.10.5 =&gt; 7.10.5
  @babel/core: ^7.11.4 =&gt; 7.11.4
  @babel/preset-env: ^7.11.0 =&gt; 7.11.0
</code></pre></div>
<p dir="auto"><strong>Possible Solution</strong></p>

<p dir="auto">One possible solution would be to always output with the extension. This would create longer output, but it would be future-proof and wouldn't require the user to do anything.</p>
<p dir="auto">The best solution would probably be to guess whether the extension is needed, based on whether the package.json has <code class="notranslate">type: module</code>, and have a configuration option like <code class="notranslate">addExtension</code> or <code class="notranslate">addCorejsExtension</code> to force it one way or the other.</p>
<p dir="auto">The last option I can think of is to always output <code class="notranslate">.cjs</code>, or add a configuration like <code class="notranslate">changeExtension</code>. <code class="notranslate">.mjs</code> would output to a <code class="notranslate">.mjs</code> file AND add the <code class="notranslate">corejs</code> path extensions. <code class="notranslate">.cjs</code> would output to <code class="notranslate">.cjs</code> and wouldn't add the extensions. <code class="notranslate">.js</code>, the default, would output to <code class="notranslate">.js</code> and possibly guess or use the <code class="notranslate">addCorejsExtension</code> option. I notice there is a <code class="notranslate">--out-file-extension</code> option for <code class="notranslate">@babel/cli</code>: having this keep the <code class="notranslate">corejs</code> extensions when you use <code class="notranslate">.mjs</code> would be fine, too.</p>
<p dir="auto"><strong>Additional context</strong><br>
Add any other context about the problem here. Or a screenshot if applicable</p>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong></p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$ node --experimental-modules dist/example.mjs
(node:5693) ExperimentalWarning: The ESM module loader is experimental.
internal/modules/esm/default_resolve.js:79
  let url = moduleWrapResolve(specifier, parentURL);
            ^

Error: Cannot find module /path/to/example/node_modules/core-js/modules/es.array.iterator imported from /path/to/example/dist/example.mjs
    at Loader.resolve [as _resolve] (internal/modules/esm/default_resolve.js:79:13)
    at Loader.resolve (internal/modules/esm/loader.js:73:33)
    at Loader.getModuleJob (internal/modules/esm/loader.js:152:40)
    at ModuleWrap.&lt;anonymous&gt; (internal/modules/esm/module_job.js:43:40)
    at link (internal/modules/esm/module_job.js:42:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}"><pre class="notranslate">$ node --experimental-modules dist/example.mjs
(node:5693) ExperimentalWarning: The ESM module loader is experimental.
internal/modules/esm/default_resolve.js:79
  <span class="pl-c1">let</span> url = moduleWrapResolve(specifier, parentURL)<span class="pl-k">;</span>
            ^

Error: Cannot find module /path/to/example/node_modules/core-js/modules/es.array.iterator imported from /path/to/example/dist/example.mjs
    at Loader.resolve [as _resolve] (internal/modules/esm/default_resolve.js:79:13)
    at Loader.resolve (internal/modules/esm/loader.js:73:33)
    at Loader.getModuleJob (internal/modules/esm/loader.js:152:40)
    at ModuleWrap.<span class="pl-k">&lt;</span>anonymous<span class="pl-k">&gt;</span> (internal/modules/esm/module_job.js:43:40)
    at link (internal/modules/esm/module_job.js:42:36) {
  code: <span class="pl-s"><span class="pl-pds">'</span>ERR_MODULE_NOT_FOUND<span class="pl-pds">'</span></span>
}</pre></div>
<p dir="auto"><strong>Input Code</strong></p>
<p dir="auto"><code class="notranslate">src/example.mjs</code> (source code)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="for (const x of [1, 2, 3]) {
  console.log(x);
}"><pre class="notranslate"><span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">const</span> <span class="pl-s1">x</span> <span class="pl-k">of</span> <span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">]</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><code class="notranslate">dist/example.mjs</code> (generated code)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import &quot;core-js/modules/es.array.iterator&quot;;

for (const x of [1, 2, 3]) {
  console.log(x);
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s">"core-js/modules/es.array.iterator"</span><span class="pl-kos">;</span>

<span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">const</span> <span class="pl-s1">x</span> <span class="pl-k">of</span> <span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">]</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Expected behavior/code</strong></p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="node --experimental-modules dist/example.mjs
(node:5717) ExperimentalWarning: The ESM module loader is experimental.
1
2
3"><pre class="notranslate">node --experimental-modules dist/example.mjs
(node:5717) ExperimentalWarning: The ESM module loader is experimental.
1
2
3</pre></div>
<p dir="auto"><strong>Babel Configuration (.babelrc, package.json, cli command)</strong></p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="[
  &quot;@babel/preset-env&quot;,
  {
    &quot;targets&quot;: {
      &quot;node&quot;: &quot;8.5.0&quot;
    },
    &quot;useBuiltIns&quot;: &quot;usage&quot;,
    &quot;corejs&quot;: 3,
    &quot;modules&quot;: false
  }
]"><pre class="notranslate">[
  <span class="pl-s"><span class="pl-pds">"</span>@babel/preset-env<span class="pl-pds">"</span></span>,
  {
    <span class="pl-ent">"targets"</span>: {
      <span class="pl-ent">"node"</span>: <span class="pl-s"><span class="pl-pds">"</span>8.5.0<span class="pl-pds">"</span></span>
    },
    <span class="pl-ent">"useBuiltIns"</span>: <span class="pl-s"><span class="pl-pds">"</span>usage<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"corejs"</span>: <span class="pl-c1">3</span>,
    <span class="pl-ent">"modules"</span>: <span class="pl-c1">false</span>
  }
]</pre></div>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version(s): 7.6.4</li>
<li>Node/npm version: Node v12.11.1/npm 6.11.3</li>
<li>OS: Ubuntu 18.04</li>
<li>Monorepo: no</li>
<li>How you are using Babel: cli</li>
</ul>
<p dir="auto"><strong>Possible Solution</strong><br>
Could you add <code class="notranslate">.js</code> extension when importing polyfill?</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import &quot;core-js/modules/es.array.iterator.js&quot;; // needs &quot;.js&quot;

for (const x of [1, 2, 3]) {
  console.log(x);
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s">"core-js/modules/es.array.iterator.js"</span><span class="pl-kos">;</span> <span class="pl-c">// needs ".js"</span>

<span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">const</span> <span class="pl-s1">x</span> <span class="pl-k">of</span> <span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">]</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Now, it will work properly!</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$ node --experimental-modules dist/example.mjs
(node:5705) ExperimentalWarning: The ESM module loader is experimental.
1
2
3"><pre class="notranslate">$ node --experimental-modules dist/example.mjs
(node:5705) ExperimentalWarning: The ESM module loader is experimental.
1
2
3</pre></div>
<p dir="auto"><strong>Additional context/Screenshots</strong><br>
As of Node.js v12, <a href="https://medium.com/@nodejs/announcing-a-new-experimental-modules-1be8d2d6c2ff" rel="nofollow">extension requires on <code class="notranslate">import</code> syntax</a>.</p>