<p dir="auto">Hi, we are seeing this error</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/378859/30689628-d46232a2-9ec1-11e7-8fbf-5b81c3b3bcc0.jpeg"><img src="https://user-images.githubusercontent.com/378859/30689628-d46232a2-9ec1-11e7-8fbf-5b81c3b3bcc0.jpeg" alt="screenshot_20170919_161441" style="max-width: 100%;"></a></p>
<p dir="auto">but the React Developer Tools is saying this</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/378859/30689654-ebe05864-9ec1-11e7-8000-9fe165cc6f9a.jpg"><img src="https://user-images.githubusercontent.com/378859/30689654-ebe05864-9ec1-11e7-8000-9fe165cc6f9a.jpg" alt="reach_notification" style="max-width: 100%;"></a></p>
<p dir="auto">We use <code class="notranslate">NODE_ENV=production</code> to build our js file (using browserify) and I also tried out <code class="notranslate">envify</code> but no luck. The red warning doesn't disappear.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
<em>bug</em> (I think)</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
Here's a <a href="https://codesandbox.io/s/0ml3roomr0" rel="nofollow">codesandbox</a>. Or just plop this in an <code class="notranslate">index.html</code>:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;body&gt;
&lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;https://unpkg.com/react@16.0.0/umd/react.development.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://unpkg.com/babel-standalone@6.26.0/babel.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/babel&quot;&gt;
function makeRenderable(fn, valueGetter) {
  const ITERATOR_SYMBOL =
    (typeof Symbol === 'function' &amp;&amp; Symbol.iterator) || '@@iterator'
  function iterator() {
    let timesCalled = 0
    return {
      next() {
        const done = timesCalled++ &gt; 0
        return {done, value: done ? undefined : valueGetter()}
      },
    }
  }
  fn[ITERATOR_SYMBOL] = iterator
  return fn
}

const renderableFunction = makeRenderable(function(a, b) {
  // kinda irrelevant what goes on in here...
  return a + b
}, () =&gt; 'I am the rendered version of the function')

function Working() {
  return (
    &lt;div&gt;
      This works: &lt;div&gt;{renderableFunction}&lt;/div&gt;
    &lt;/div&gt;
  )
}

function NotWorking() {
  return &lt;div&gt;This does not work: {renderableFunction}&lt;/div&gt;
}

ReactDOM.render(
  &lt;div&gt;
    &lt;Working /&gt;
    &lt;hr /&gt;
    &lt;NotWorking /&gt;
  &lt;/div&gt;,
  document.getElementById('root'),
)
&lt;/script&gt;
&lt;/body&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">root</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/react@16.0.0/umd/react.development.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/babel-standalone@6.26.0/babel.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">text/babel</span>"<span class="pl-kos">&gt;</span>
<span class="pl-k">function</span> <span class="pl-en">makeRenderable</span><span class="pl-kos">(</span><span class="pl-s1">fn</span><span class="pl-kos">,</span> <span class="pl-s1">valueGetter</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-c1">ITERATOR_SYMBOL</span> <span class="pl-c1">=</span>
    <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-v">Symbol</span> <span class="pl-c1">===</span> <span class="pl-s">'function'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-v">Symbol</span><span class="pl-kos">.</span><span class="pl-c1">iterator</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-s">'@@iterator'</span>
  <span class="pl-k">function</span> <span class="pl-en">iterator</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">timesCalled</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
      <span class="pl-en">next</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">const</span> <span class="pl-s1">done</span> <span class="pl-c1">=</span> <span class="pl-s1">timesCalled</span><span class="pl-c1">++</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">0</span>
        <span class="pl-k">return</span> <span class="pl-kos">{</span>done<span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s1">done</span> ? <span class="pl-c1">undefined</span> : <span class="pl-s1">valueGetter</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-s1">fn</span><span class="pl-kos">[</span><span class="pl-c1">ITERATOR_SYMBOL</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">iterator</span>
  <span class="pl-k">return</span> <span class="pl-s1">fn</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-s1">renderableFunction</span> <span class="pl-c1">=</span> <span class="pl-en">makeRenderable</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">a</span><span class="pl-kos">,</span> <span class="pl-s1">b</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-c">// kinda irrelevant what goes on in here...</span>
  <span class="pl-k">return</span> <span class="pl-s1">a</span> <span class="pl-c1">+</span> <span class="pl-s1">b</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">=&gt;</span> <span class="pl-s">'I am the rendered version of the function'</span><span class="pl-kos">)</span>

<span class="pl-k">function</span> <span class="pl-v">Working</span><span class="pl-kos">(</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-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
      This works: <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">renderableFunction</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-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-kos">}</span>

<span class="pl-k">function</span> <span class="pl-v">NotWorking</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>This does not work: <span class="pl-kos">{</span><span class="pl-s1">renderableFunction</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-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Working</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">hr</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">NotWorking</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</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-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'root'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
<span class="pl-kos">)</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I expect that things will render the same regardless of whether they're an only child or a member of an array of children.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">Yes, <a href="https://codesandbox.io/s/8zlpvjzjy9" rel="nofollow">it worked in React@15</a>.</p>
<p dir="auto"><strong>Suggested Solution</strong></p>
<p dir="auto">I'm fairly confident that the issue is in the array of children case, the <a href="https://github.com/facebook/react/blob/2c0a8fb99e945315c9dce7a15c85775d51f5755d/packages/react-reconciler/src/ReactChildFiber.js#L578-L586"><code class="notranslate">getIteratorFn</code> call</a> is within a <code class="notranslate">typeof newChild === 'object' &amp;&amp; newChild !== null</code> if statement, whereas the original <a href="https://github.com/facebook/react/blob/2c0a8fb99e945315c9dce7a15c85775d51f5755d/packages/react-reconciler/src/ReactChildFiber.js#L1358">reconcileChildFibers</a> puts the <a href="https://github.com/facebook/react/blob/2c0a8fb99e945315c9dce7a15c85775d51f5755d/packages/react-reconciler/src/ReactChildFiber.js#L1434-L1441"><code class="notranslate">getIteratorFn</code> call outside it</a>.</p>
<p dir="auto">If I'm not mistaken, a simple fix would be to move <a href="https://github.com/facebook/react/blob/2c0a8fb99e945315c9dce7a15c85775d51f5755d/packages/react-reconciler/src/ReactChildFiber.js#L589">this curly brace</a> a few lines up 😉</p>
<p dir="auto">I'm happy to do so complete with a test given a little direction (like, where the test should go). Thanks!</p>