<p dir="auto">Hi<br>
I have a problem with "async" in babel and node js that i couldn't solve for days... the error bellow:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\BOOSTACKSTICK\BOOSTACK\node_modules\@babel\runtime\helpers\esm\asyncToGenerator.js
[1] require() of ES modules is not supported.
[1] require() of C:\BOOSTACKSTICK\BOOSTACK\node_modules\@babel\runtime\helpers\esm\asyncToGenerator.js from C:\BOOSTACKSTICK\BOOSTACK\prod-server\api\auth\auth-controller.js is an ES module file as it is a .js file whose nearest parent package.json contains &quot;type&quot;: &quot;module&quot; which defines all .js files in that package scope as ES modules.
[1] Instead rename asyncToGenerator.js to end in .cjs, change the requiring code to use import(), or remove &quot;type&quot;: &quot;module&quot; from C:\BOOSTACKSTICK\BOOSTACK\node_modules\@babel\runtime\helpers\esm\package.json."><pre class="notranslate"><code class="notranslate">Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\BOOSTACKSTICK\BOOSTACK\node_modules\@babel\runtime\helpers\esm\asyncToGenerator.js
[1] require() of ES modules is not supported.
[1] require() of C:\BOOSTACKSTICK\BOOSTACK\node_modules\@babel\runtime\helpers\esm\asyncToGenerator.js from C:\BOOSTACKSTICK\BOOSTACK\prod-server\api\auth\auth-controller.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
[1] Instead rename asyncToGenerator.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\BOOSTACKSTICK\BOOSTACK\node_modules\@babel\runtime\helpers\esm\package.json.
</code></pre></div>
<p dir="auto">I compile my dev-server folder to a prod-server with config bellow<br>
<strong>package.json</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;scripts&quot;: {
    &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
    &quot;build&quot;: &quot;babel dev-server --out-dir prod-server &amp;&amp; vue-cli-service build&quot;,
    &quot;lint&quot;: &quot;vue-cli-service lint&quot;,
    &quot;dev&quot;: &quot;concurrently \&quot;babel dev-server --out-dir prod-server --watch\&quot; \&quot;nodemon prod-server/index.js\&quot; \&quot;npm run serve\&quot; &quot;
  },"><pre class="notranslate"><code class="notranslate">"scripts": {
    "serve": "vue-cli-service serve",
    "build": "babel dev-server --out-dir prod-server &amp;&amp; vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "concurrently \"babel dev-server --out-dir prod-server --watch\" \"nodemon prod-server/index.js\" \"npm run serve\" "
  },
</code></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;devDependencies&quot;: {
    &quot;@babel/cli&quot;: &quot;^7.12.1&quot;,
    &quot;@babel/core&quot;: &quot;^7.12.3&quot;,
    &quot;@babel/node&quot;: &quot;^7.12.1&quot;,
    &quot;@babel/plugin-transform-async-to-generator&quot;: &quot;^7.12.1&quot;,
    &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.12.1&quot;,
    &quot;@babel/preset-env&quot;: &quot;^7.12.1&quot;,
    &quot;@babel/runtime-corejs3&quot;: &quot;^7.12.1&quot;,
    &quot;@vue/cli-plugin-babel&quot;: &quot;^4.5.8&quot;,
    &quot;@vue/cli-plugin-eslint&quot;: &quot;^4.5.8&quot;,
    &quot;@vue/cli-service&quot;: &quot;^4.5.8&quot;,
    &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
    &quot;compass-mixins&quot;: &quot;^0.12.10&quot;,
    &quot;concurrently&quot;: &quot;^5.3.0&quot;,
    &quot;core-js&quot;: &quot;^3.6.5&quot;,
    &quot;css-loader&quot;: &quot;^3.6.0&quot;,
    &quot;eslint&quot;: &quot;^5.16.0&quot;,
  },"><pre class="notranslate"><span class="pl-s">"devDependencies"</span>: <span class="pl-kos">{</span>
    <span class="pl-s">"@babel/cli"</span>: <span class="pl-s">"^7.12.1"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/core"</span>: <span class="pl-s">"^7.12.3"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/node"</span>: <span class="pl-s">"^7.12.1"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/plugin-transform-async-to-generator"</span>: <span class="pl-s">"^7.12.1"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/plugin-transform-runtime"</span>: <span class="pl-s">"^7.12.1"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/preset-env"</span>: <span class="pl-s">"^7.12.1"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/runtime-corejs3"</span>: <span class="pl-s">"^7.12.1"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@vue/cli-plugin-babel"</span>: <span class="pl-s">"^4.5.8"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@vue/cli-plugin-eslint"</span>: <span class="pl-s">"^4.5.8"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@vue/cli-service"</span>: <span class="pl-s">"^4.5.8"</span><span class="pl-kos">,</span>
    <span class="pl-s">"babel-eslint"</span>: <span class="pl-s">"^10.1.0"</span><span class="pl-kos">,</span>
    <span class="pl-s">"compass-mixins"</span>: <span class="pl-s">"^0.12.10"</span><span class="pl-kos">,</span>
    <span class="pl-s">"concurrently"</span>: <span class="pl-s">"^5.3.0"</span><span class="pl-kos">,</span>
    <span class="pl-s">"core-js"</span>: <span class="pl-s">"^3.6.5"</span><span class="pl-kos">,</span>
    <span class="pl-s">"css-loader"</span>: <span class="pl-s">"^3.6.0"</span><span class="pl-kos">,</span>
    <span class="pl-s">"eslint"</span>: <span class="pl-s">"^5.16.0"</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div>
<p dir="auto"><strong>.babelrc</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    [
      &quot;@babel/preset-env&quot;,
      {
        &quot;useBuiltIns&quot;: &quot;usage&quot;, // or &quot;entry&quot;
        &quot;corejs&quot;: 3,
        &quot;targets&quot;: {
          &quot;node&quot;: &quot;current&quot;
        }
      }
    ]
  ],
  &quot;plugins&quot;: [
    [
      &quot;@babel/plugin-transform-runtime&quot;,
      {
        &quot;corejs&quot;: 3
      }
    ],
    [&quot;@babel/plugin-proposal-class-properties&quot;]
  ]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"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-s">"useBuiltIns"</span>: <span class="pl-s">"usage"</span><span class="pl-kos">,</span> <span class="pl-c">// or "entry"</span>
        <span class="pl-s">"corejs"</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span>
        <span class="pl-s">"targets"</span>: <span class="pl-kos">{</span>
          <span class="pl-s">"node"</span>: <span class="pl-s">"current"</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-s">"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-s">"corejs"</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-kos">[</span><span class="pl-s">"@babel/plugin-proposal-class-properties"</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="Node: v12.16.3
Babel: 7.12.3"><pre class="notranslate"><code class="notranslate">Node: v12.16.3
Babel: 7.12.3
</code></pre></div>
<p dir="auto">Simple code with "async" that causing a problem</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="//Check And Validate Request (LOGIN METHODE)
export async function index(req, res) {
  return res.status(200).json({ user: &quot;user&quot; });
}"><pre class="notranslate"><code class="notranslate">//Check And Validate Request (LOGIN METHODE)
export async function index(req, res) {
  return res.status(200).json({ user: "user" });
}
</code></pre></div>
<p dir="auto">** OutPut Babel**</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;

var _interopRequireDefault = require(&quot;C:/BOOSTACKSTICK/BOOSTACK/node_modules/@babel/runtime/helpers/interopRequireDefault&quot;);

var _Object$defineProperty = require(&quot;@babel/runtime-corejs3/core-js-stable/object/define-property&quot;);

_Object$defineProperty(exports, &quot;__esModule&quot;, {
  value: true
});

exports.index = index;

var _regenerator = _interopRequireDefault(require(&quot;@babel/runtime-corejs3/regenerator&quot;));

require(&quot;regenerator-runtime/runtime&quot;);

var _asyncToGenerator2 = _interopRequireDefault(require(&quot;C:/BOOSTACKSTICK/BOOSTACK/node_modules/@babel/runtime/helpers/esm/asyncToGenerator&quot;));

//Check And Validate Request (LOGIN METHODE)
function index(_x, _x2) {
  return _index.apply(this, arguments);
}

function _index() {
  _index = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(req, res) {
    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            return _context.abrupt(&quot;return&quot;, res.status(200).json({
              user: &quot;user&quot;
            }));

          case 1:
          case &quot;end&quot;:
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _index.apply(this, arguments);
}"><pre class="notranslate"><code class="notranslate">"use strict";

var _interopRequireDefault = require("C:/BOOSTACKSTICK/BOOSTACK/node_modules/@babel/runtime/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.index = index;

var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));

require("regenerator-runtime/runtime");

var _asyncToGenerator2 = _interopRequireDefault(require("C:/BOOSTACKSTICK/BOOSTACK/node_modules/@babel/runtime/helpers/esm/asyncToGenerator"));

//Check And Validate Request (LOGIN METHODE)
function index(_x, _x2) {
  return _index.apply(this, arguments);
}

function _index() {
  _index = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(req, res) {
    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            return _context.abrupt("return", res.status(200).json({
              user: "user"
            }));

          case 1:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _index.apply(this, arguments);
}
</code></pre></div>
<p dir="auto"><strong>Possible Solution</strong><br>
the only workaround i tested to avoid this error is to modify manually the <code class="notranslate">node_modules\@babel\runtime\helpers\esm\package.json</code> to remove <code class="notranslate">"type": module</code> and remove <code class="notranslate">import</code>  from <code class="notranslate">node_modules\@babel\runtime\helpers\esm\asyncToGenerator.js</code></p>
<p dir="auto">is it a bug or i'm doing something wrong?</p>
<p dir="auto">Thank you in advance for your reply.</p>
<blockquote>
<p dir="auto">Issue originally reported by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/aweary/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/aweary">@aweary</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="222245450" data-permission-text="Title is private" data-url="https://github.com/babel/babel-preset-env/issues/294" data-hovercard-type="issue" data-hovercard-url="/babel/babel-preset-env/issues/294/hovercard" href="https://github.com/babel/babel-preset-env/issues/294">babel/babel-preset-env#294</a></p>
</blockquote>
<p dir="auto">This started from a conversation stemming from this tweet: <a href="https://twitter.com/aweary/status/853771117894545408" rel="nofollow">https://twitter.com/aweary/status/853771117894545408</a></p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hzoo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/hzoo">@hzoo</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/JakeChampion/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/JakeChampion">@JakeChampion</a> and I met today and had a quick discussion about how we could make <code class="notranslate">babel-preset-env</code> integrate with <a href="https://polyfill.io/" rel="nofollow">https://polyfill.io/</a>. The rough plan we agreed upon was:</p>
<ol dir="auto">
<li>Move the <a href="https://github.com/babel/babel-preset-env/blob/2.0/src/use-built-ins-plugin.js">use-built-ins plugin</a> into a standalone package</li>
<li>Expose an option to write the list of features requiring a polyfill to disk, instead of including the default <code class="notranslate">core-js</code> imports.</li>
</ol>
<p dir="auto">This would allow users to read the feature list at build time and include the appropriate polyfill.io link, which uses a query string to communicate which polyfills should be included.</p>
<p dir="auto">This approach makes polyfill.io integration very easy, but it will also open up new ways for community build tools to fulfill polyfill requirements at build time.</p>