<h3 dir="auto"><g-emoji class="g-emoji" alias="computer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4bb.png">💻</g-emoji></h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Would you like to work on a fix?</li>
</ul>
<h3 dir="auto">How are you using Babel?</h3>
<p dir="auto">@babel/cli</p>
<h3 dir="auto">Input code</h3>
<p dir="auto">I'm using the Babel CLI on the .js file generated by <a href="https://github.com/vuejs/devtools/blob/main/packages/shell-electron/src/backend.js">https://github.com/vuejs/devtools/blob/main/packages/shell-electron/src/backend.js</a> once Webpack have been run. The resulting source file contains this :</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  async notifyComponentUpdate(instance = null) {
    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.COMPONENTS)) return;

    if (instance) {
      this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_UPDATED, ...(await this.backendApi.transformCall(shared_utils_1.HookEvents.COMPONENT_UPDATED, instance)));
    } else {
      this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_UPDATED);
    }
  }"><pre class="notranslate">  <span class="pl-en">async</span> <span class="pl-s1">notifyComponentUpdate</span><span class="pl-kos">(</span><span class="pl-s1">instance</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">enabled</span> <span class="pl-c1">||</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">hasPermission</span><span class="pl-kos">(</span><span class="pl-s1">shared_utils_1</span><span class="pl-kos">.</span><span class="pl-c1">PluginPermission</span><span class="pl-kos">.</span><span class="pl-c1">COMPONENTS</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-k">return</span><span class="pl-kos">;</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">instance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ctx</span><span class="pl-kos">.</span><span class="pl-c1">hook</span><span class="pl-kos">.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s1">shared_utils_1</span><span class="pl-kos">.</span><span class="pl-c1">HookEvents</span><span class="pl-kos">.</span><span class="pl-c1">COMPONENT_UPDATED</span><span class="pl-kos">,</span> ...<span class="pl-kos">(</span><span class="pl-k">await</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">backendApi</span><span class="pl-kos">.</span><span class="pl-en">transformCall</span><span class="pl-kos">(</span><span class="pl-s1">shared_utils_1</span><span class="pl-kos">.</span><span class="pl-c1">HookEvents</span><span class="pl-kos">.</span><span class="pl-c1">COMPONENT_UPDATED</span><span class="pl-kos">,</span> <span class="pl-s1">instance</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">else</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ctx</span><span class="pl-kos">.</span><span class="pl-c1">hook</span><span class="pl-kos">.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s1">shared_utils_1</span><span class="pl-kos">.</span><span class="pl-c1">HookEvents</span><span class="pl-kos">.</span><span class="pl-c1">COMPONENT_UPDATED</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">Which crashes Babel with the following error :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: D:\git\devtools\packages\shell-electron\build\backend.js: Expected type &quot;Expression&quot; with option undefined, but instead got &quot;SpreadElement&quot;.
    at assert (D:\git\devtools\node_modules\@babel\types\lib\asserts\generated\index.js:311:11)
    at Object.assertExpression (D:\git\devtools\node_modules\@babel\types\lib\asserts\generated\index.js:1308:3)
    at Emitter.Ep.explodeExpression (D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:700:7)
    at explodeViaTempVar (D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:743:23)
    at D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:815:18
    at Array.map (&lt;anonymous&gt;)
    at Emitter.Ep.explodeExpression (D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:814:28)
    at Emitter.Ep.explodeStatement (D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:340:12)
    at D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:323:12
    at Array.forEach (&lt;anonymous&gt;) {
  code: 'BABEL_TRANSFORM_ERROR'
}"><pre class="notranslate"><code class="notranslate">Error: D:\git\devtools\packages\shell-electron\build\backend.js: Expected type "Expression" with option undefined, but instead got "SpreadElement".
    at assert (D:\git\devtools\node_modules\@babel\types\lib\asserts\generated\index.js:311:11)
    at Object.assertExpression (D:\git\devtools\node_modules\@babel\types\lib\asserts\generated\index.js:1308:3)
    at Emitter.Ep.explodeExpression (D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:700:7)
    at explodeViaTempVar (D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:743:23)
    at D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:815:18
    at Array.map (&lt;anonymous&gt;)
    at Emitter.Ep.explodeExpression (D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:814:28)
    at Emitter.Ep.explodeStatement (D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:340:12)
    at D:\git\devtools\node_modules\regenerator-transform\lib\emit.js:323:12
    at Array.forEach (&lt;anonymous&gt;) {
  code: 'BABEL_TRANSFORM_ERROR'
}
</code></pre></div>
<p dir="auto">When I modify emit.js to log the expr variable, I have :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Node {
  type: 'SpreadElement',
  start: 12927,
  end: 13022,
  loc: SourceLocation {
    start: Position { line: 526, column: 70, index: 12927 },
    end: Position { line: 526, column: 165, index: 13022 },
    filename: undefined,
    identifierName: undefined
  },
  argument: {
    type: 'YieldExpression',
    argument: Node {
      type: 'CallExpression',
      start: 12937,
      end: 13021,
      loc: [SourceLocation],
      callee: [Node],
      arguments: [Array],
      leadingComments: undefined,
      innerComments: undefined,
      trailingComments: undefined
    },
    delegate: false,
    trailingComments: [],
    leadingComments: [],
    innerComments: []
  },
  leadingComments: undefined,
  innerComments: undefined,
  trailingComments: undefined
}"><pre class="notranslate"><code class="notranslate">Node {
  type: 'SpreadElement',
  start: 12927,
  end: 13022,
  loc: SourceLocation {
    start: Position { line: 526, column: 70, index: 12927 },
    end: Position { line: 526, column: 165, index: 13022 },
    filename: undefined,
    identifierName: undefined
  },
  argument: {
    type: 'YieldExpression',
    argument: Node {
      type: 'CallExpression',
      start: 12937,
      end: 13021,
      loc: [SourceLocation],
      callee: [Node],
      arguments: [Array],
      leadingComments: undefined,
      innerComments: undefined,
      trailingComments: undefined
    },
    delegate: false,
    trailingComments: [],
    leadingComments: [],
    innerComments: []
  },
  leadingComments: undefined,
  innerComments: undefined,
  trailingComments: undefined
}
</code></pre></div>
<h3 dir="auto">Configuration file name</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Configuration</h3>
<p dir="auto">The commang I run is simply :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npx babel ./shell-electron/build/backend.js -o ./shell-electron/build/backend-babel.js --presets=@babel/preset-env"><pre class="notranslate"><code class="notranslate">npx babel ./shell-electron/build/backend.js -o ./shell-electron/build/backend-babel.js --presets=@babel/preset-env
</code></pre></div>
<h3 dir="auto">Current and expected behavior</h3>
<p dir="auto">Babel CLI crashes and don't output the new file. But when I change the js to :</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  async notifyComponentUpdate(instance = null) {
    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.COMPONENTS)) return;

    if (instance) {
      let t = await this.backendApi.transformCall(shared_utils_1.HookEvents.COMPONENT_UPDATED, instance);
      this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_UPDATED, ...t);
    } else {
      this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_UPDATED);
    }
  }"><pre class="notranslate">  <span class="pl-en">async</span> <span class="pl-s1">notifyComponentUpdate</span><span class="pl-kos">(</span><span class="pl-s1">instance</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">enabled</span> <span class="pl-c1">||</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">hasPermission</span><span class="pl-kos">(</span><span class="pl-s1">shared_utils_1</span><span class="pl-kos">.</span><span class="pl-c1">PluginPermission</span><span class="pl-kos">.</span><span class="pl-c1">COMPONENTS</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-k">return</span><span class="pl-kos">;</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">instance</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">let</span> <span class="pl-s1">t</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">backendApi</span><span class="pl-kos">.</span><span class="pl-en">transformCall</span><span class="pl-kos">(</span><span class="pl-s1">shared_utils_1</span><span class="pl-kos">.</span><span class="pl-c1">HookEvents</span><span class="pl-kos">.</span><span class="pl-c1">COMPONENT_UPDATED</span><span class="pl-kos">,</span> <span class="pl-s1">instance</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ctx</span><span class="pl-kos">.</span><span class="pl-c1">hook</span><span class="pl-kos">.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s1">shared_utils_1</span><span class="pl-kos">.</span><span class="pl-c1">HookEvents</span><span class="pl-kos">.</span><span class="pl-c1">COMPONENT_UPDATED</span><span class="pl-kos">,</span> ...<span class="pl-s1">t</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ctx</span><span class="pl-kos">.</span><span class="pl-c1">hook</span><span class="pl-kos">.</span><span class="pl-en">emit</span><span class="pl-kos">(</span><span class="pl-s1">shared_utils_1</span><span class="pl-kos">.</span><span class="pl-c1">HookEvents</span><span class="pl-kos">.</span><span class="pl-c1">COMPONENT_UPDATED</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">It don't crash anymore. Modifying the outputted file by hand is not a production-proof workflow though, and it'd be better if Babel could be run on it naturally.</p>
<h3 dir="auto">Environment</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npx envinfo --preset babel

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD"><pre class="notranslate"><code class="notranslate">npx envinfo --preset babel

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
</code></pre></div>
<h3 dir="auto">Possible solution</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Additional context</h3>
<p dir="auto"><em>No response</em></p>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current behavior</strong></p>
<ul dir="auto">
<li><a href="https://babeljs.io/repl#?browsers=firefox%2047&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=true&amp;code_lz=JYWwDg9gTgLgBAYQuCA7Apq-AzKy4DkAAgOYA2oI6UA9AMbKQZYEDcAUKJLHMFtQGd0dGMDRxc-AmQgATAIYCAFjT4xBw0Wjbt26AB7d4s9NnkBXMvDplFAuADEIEJCmbwD61LPuummeABvdjg4RQBPVDoJZwAKAEo4YNDQtQ0RMVRYgDpc2PkAd3lgeAAFPBBgIWz5MjJYgG0AXXjWjlCAX3YOoA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=module&amp;lineWrap=true&amp;presets=env%2Cstage-1&amp;prettier=true&amp;targets=Node-14.14&amp;version=7.12.12&amp;externalPlugins=" rel="nofollow">REPL</a></li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Component from '@glimmer/component';
import intersection from 'lodash/intersection';

export default class FooComponent extends Component {
  async foo() {
    intersection(...(await Promise.all([])));
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Component</span> <span class="pl-k">from</span> <span class="pl-s">'@glimmer/component'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">intersection</span> <span class="pl-k">from</span> <span class="pl-s">'lodash/intersection'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">FooComponent</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-k">async</span> <span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">intersection</span><span class="pl-kos">(</span>...<span class="pl-kos">(</span><span class="pl-k">await</span> <span class="pl-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">all</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>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
Code to be transpiled correctly.</p>
<p dir="auto">Currently Babel blows up with:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Expected type &quot;Expression&quot; with option undefined, but instead got &quot;SpreadElement&quot;."><pre class="notranslate"><code class="notranslate">Expected type "Expression" with option undefined, but instead got "SpreadElement".
</code></pre></div>
<p dir="auto">Using <code class="notranslate">firefox 35</code> for targets works. As does <code class="notranslate">firefox 53</code> and above.</p>