<p dir="auto">Choose one: is this a bug report or feature request?</p>
<p dir="auto">Seems like a bug, since it's throwing validation errors from internal code on valid(ish) input, but given <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="165209299" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/3575" data-hovercard-type="pull_request" data-hovercard-url="/babel/babel/pull/3575/hovercard" href="https://github.com/babel/babel/pull/3575">#3575</a> my <em>preferred</em> behavior would probably be a feature request.</p>
<h3 dir="auto">Input Code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// test.js
import React from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;

const content = ['Hello ', &lt;b&gt;cruel&lt;/b&gt;, ' world'];
const target = &lt;div&gt;{...content}&lt;/div&gt;;
ReactDOM.render(target, document.body);"><pre class="notranslate"><span class="pl-c">// test.js</span>
<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s">"react-dom"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">content</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s">'Hello '</span><span class="pl-kos">,</span> <span class="pl-c1">&lt;</span><span class="pl-ent">b</span><span class="pl-c1">&gt;</span>cruel<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">b</span><span class="pl-c1">&gt;</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-k">const</span> <span class="pl-s1">target</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span>...<span class="pl-s1">content</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
<span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Babel/Babylon Configuration (.babelrc, package.json, cli command)</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// .babelrc.js
module.exports = {
  presets: [&quot;@babel/react&quot;]
}"><pre class="notranslate"><span class="pl-c">// .babelrc.js</span>
<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">presets</span>: <span class="pl-kos">[</span><span class="pl-s">"@babel/react"</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// package.json
{
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
    &quot;react&quot;: &quot;^16.2.0&quot;,
    &quot;react-dom&quot;: &quot;^16.2.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@babel/core&quot;: &quot;7.0.0-beta.35&quot;,
    &quot;@babel/cli&quot;: &quot;7.0.0-beta.35&quot;,
    &quot;@babel/preset-react&quot;: &quot;7.0.0-beta.35&quot;,
    &quot;@types/react&quot;: &quot;^16.0.31&quot;,
    &quot;@types/react-dom&quot;: &quot;^16.0.3&quot;
  }
}"><pre class="notranslate"><span class="pl-ii">// package.json</span>
{
  <span class="pl-ent">"private"</span>: <span class="pl-c1">true</span>,
  <span class="pl-ent">"dependencies"</span>: {
    <span class="pl-ent">"react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.2.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-dom"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.2.0<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"devDependencies"</span>: {
    <span class="pl-ent">"@babel/core"</span>: <span class="pl-s"><span class="pl-pds">"</span>7.0.0-beta.35<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@babel/cli"</span>: <span class="pl-s"><span class="pl-pds">"</span>7.0.0-beta.35<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@babel/preset-react"</span>: <span class="pl-s"><span class="pl-pds">"</span>7.0.0-beta.35<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@types/react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.0.31<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@types/react-dom"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.0.3<span class="pl-pds">"</span></span>
  }
}</pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ babel test.js"><pre class="notranslate"><code class="notranslate">$ babel test.js
</code></pre></div>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">I'd prefer output something like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const content = ['Hello ', React.createElement('b', null, 'cruel'), ' world'];
const target = React.createElement('div', null, ...content);
ReactDOM.render(target, document.body);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">content</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s">'Hello '</span><span class="pl-kos">,</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">'b'</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-s">'cruel'</span><span class="pl-kos">)</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-k">const</span> <span class="pl-s1">target</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">'div'</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> ...<span class="pl-s1">content</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">but <code class="notranslate">tsc --jsx react</code> emits without the <code class="notranslate">...</code>, i.e. <code class="notranslate">React.createElement('div', null, content)</code>.</p>
<p dir="auto">More likely, given the discussion in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="165209299" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/3575" data-hovercard-type="pull_request" data-hovercard-url="/babel/babel/pull/3575/hovercard" href="https://github.com/babel/babel/pull/3575">#3575</a>, simply giving a user-facing error message would be preferred? Something like <code class="notranslate">transform-react-jsx does not support '{...children}', use '{children}'</code>?</p>
<h3 dir="auto">Current Behavior</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="C:\code\personal\babel-tsx-parsing&gt;yarn babel src\index.js
yarn run v1.3.2
$ C:\code\personal\babel-tsx-parsing\node_modules\.bin\babel src\index.js
TypeError: Property arguments[2] of CallExpression expected node to be of a type [&quot;Expression&quot;,&quot;SpreadElement&quot;,&quot;JSXNamespacedName&quot;] but instead got &quot;JSXSpreadChild&quot;
    at validate (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\definitions\utils.js:88:13)
    at validator (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\definitions\utils.js:47:7)
    at Object.validate (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\definitions\utils.js:143:10)
    at validate (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\validators\validate.js:15:9)
    at builder (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\builders\builder.js:40:27)
    at Object.CallExpression (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\builders\generated\index.js:276:27)
    at buildElementCall (C:\code\personal\babel-tsx-parsing\node_modules\@babel\helper-builder-react-jsx\lib\index.js:131:28)
    at PluginPass.exit (C:\code\personal\babel-tsx-parsing\node_modules\@babel\helper-builder-react-jsx\lib\index.js:25:22)
    at newFn (C:\code\personal\babel-tsx-parsing\node_modules\@babel\traverse\lib\visitors.js:223:21)
    at NodePath._call (C:\code\personal\babel-tsx-parsing\node_modules\@babel\traverse\lib\path\context.js:64:19)"><pre class="notranslate"><code class="notranslate">C:\code\personal\babel-tsx-parsing&gt;yarn babel src\index.js
yarn run v1.3.2
$ C:\code\personal\babel-tsx-parsing\node_modules\.bin\babel src\index.js
TypeError: Property arguments[2] of CallExpression expected node to be of a type ["Expression","SpreadElement","JSXNamespacedName"] but instead got "JSXSpreadChild"
    at validate (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\definitions\utils.js:88:13)
    at validator (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\definitions\utils.js:47:7)
    at Object.validate (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\definitions\utils.js:143:10)
    at validate (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\validators\validate.js:15:9)
    at builder (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\builders\builder.js:40:27)
    at Object.CallExpression (C:\code\personal\babel-tsx-parsing\node_modules\@babel\types\lib\builders\generated\index.js:276:27)
    at buildElementCall (C:\code\personal\babel-tsx-parsing\node_modules\@babel\helper-builder-react-jsx\lib\index.js:131:28)
    at PluginPass.exit (C:\code\personal\babel-tsx-parsing\node_modules\@babel\helper-builder-react-jsx\lib\index.js:25:22)
    at newFn (C:\code\personal\babel-tsx-parsing\node_modules\@babel\traverse\lib\visitors.js:223:21)
    at NodePath._call (C:\code\personal\babel-tsx-parsing\node_modules\@babel\traverse\lib\path\context.js:64:19)
</code></pre></div>
<h3 dir="auto">Context</h3>
<p dir="auto">React seems to distinguish between dynamic array contents (e.g. <code class="notranslate">{arrayProp.map(toChild)}</code>) and direct children only in that the latter do not warn on <code class="notranslate">key</code>, so the simple workaround is remove the <code class="notranslate">...</code> and add keys, or to convert rendering a component.</p>
<p dir="auto">I ran into this while converting some <code class="notranslate">document.createElement()</code> calls that walk a JSON description, so I was trying to avoid changing structure too much, and I don't have meaningful keys in the source yet.</p>
<h3 dir="auto">Your Environment</h3>
<table role="table">
<thead>
<tr>
<th>software</th>
<th>version(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Babel</td>
<td>7.0.0-beta.32 ... .35</td>
</tr>
<tr>
<td>node</td>
<td>v6.11.4</td>
</tr>
<tr>
<td>npm</td>
<td>yarn 1.3.2</td>
</tr>
<tr>
<td>Operating System</td>
<td>Windows 10</td>
</tr>
</tbody>
</table>
<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">@rollup/plugin-babel</p>
<h3 dir="auto">Input code</h3>
<p dir="auto"><a href="https://babeljs.io/repl#?browsers=defaults&amp;build=&amp;builtIns=false&amp;corejs=3.6&amp;spec=false&amp;loose=true&amp;code_lz=CYUwxgNghgTiAEkoGdnwILwN4F8BQeAZgK4B2YALgJYD2pG8AFAJTY5A&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=false&amp;presets=typescript&amp;prettier=false&amp;targets=&amp;version=7.15.5&amp;externalPlugins=%40babel%2Fplugin-transform-typescript%407.13.0&amp;assumptions=%7B%7D" rel="nofollow">REPL</a></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="declare class A {}

function A () {}"><pre class="notranslate"><span class="pl-k">declare</span> <span class="pl-k">class</span> <span class="pl-smi">A</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-smi">A</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Configuration file name</h3>
<p dir="auto">.babelrc</p>
<h3 dir="auto">Configuration</h3>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [&quot;@babel/preset-typescript&quot;]
}"><pre class="notranslate">{
  <span class="pl-ent">"presets"</span>: [<span class="pl-s"><span class="pl-pds">"</span>@babel/preset-typescript<span class="pl-pds">"</span></span>]
}</pre></div>
<h3 dir="auto">Current and expected behavior</h3>
<p dir="auto">I expect this construction to be compiled correctly because <code class="notranslate">tsc</code> <a href="https://www.typescriptlang.org/play?#code/CYUwxgNghgTiAEkoGdnwILwN4F8BQeAZgK4B2YALgJYD2pG8AFAJTY5A" rel="nofollow">can</a> do it. However, currently Babel throws an error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Duplicate declaration &quot;A&quot;
  1 | declare class A {}
  2 |
&gt; 3 | function A () {}
    | "><pre class="notranslate"><code class="notranslate">Duplicate declaration "A"
  1 | declare class A {}
  2 |
&gt; 3 | function A () {}
    | 
</code></pre></div>
<h3 dir="auto">Environment</h3>
<ul dir="auto">
<li>Babel version(s): 7.15.5</li>
<li>Node: 16</li>
<li>npm: 7</li>
<li>OS: Windows 10</li>
<li>Monorepo: no</li>
</ul>
<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>