<p dir="auto">Verified that version 4.2.0 works well, so a recent regression. Haven't tried to create a small example to reproduce, but since it's a recent bugfix version that should be fairly easy to pinpoint.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
Page load throws console error: <code class="notranslate">Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Chrome console
6VM598:27 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null
window.console.error @ VM598:27
printWarning @ warning.js:36
warning @ warning.js:60
mountIndeterminateComponent @ react-dom.development.js:10488
beginWork @ react-dom.development.js:10647
performUnitOfWork @ react-dom.development.js:12621
workLoop @ react-dom.development.js:12730
callCallback @ react-dom.development.js:1319
invokeGuardedCallbackDev @ react-dom.development.js:1358
invokeGuardedCallback @ react-dom.development.js:1215
performWork @ react-dom.development.js:12848
batchedUpdates @ react-dom.development.js:13292
performFiberBatchedUpdates @ react-dom.development.js:1666
stackBatchedUpdates @ react-dom.development.js:1657
batchedUpdates @ react-dom.development.js:1671
batchedUpdatesWithControlledComponents @ react-dom.development.js:1684
dispatchEvent @ react-dom.development.js:1894"><pre class="notranslate"><code class="notranslate">// Chrome console
6VM598:27 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null
window.console.error @ VM598:27
printWarning @ warning.js:36
warning @ warning.js:60
mountIndeterminateComponent @ react-dom.development.js:10488
beginWork @ react-dom.development.js:10647
performUnitOfWork @ react-dom.development.js:12621
workLoop @ react-dom.development.js:12730
callCallback @ react-dom.development.js:1319
invokeGuardedCallbackDev @ react-dom.development.js:1358
invokeGuardedCallback @ react-dom.development.js:1215
performWork @ react-dom.development.js:12848
batchedUpdates @ react-dom.development.js:13292
performFiberBatchedUpdates @ react-dom.development.js:1666
stackBatchedUpdates @ react-dom.development.js:1657
batchedUpdates @ react-dom.development.js:1671
batchedUpdatesWithControlledComponents @ react-dom.development.js:1684
dispatchEvent @ react-dom.development.js:1894
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
No console error. Or at least some way to trace which is the stateless component that is causing the issue.</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><br>
<code class="notranslate">"react": "^16.0.0-rc.3",</code><br>
<code class="notranslate">Chrome Version 60.0.3112.113 (Official Build) (64-bit)</code><br>
<code class="notranslate">macOS Sierra 10.12.6</code></p>
<ul dir="auto">
<li>This error only started to appear after upgrading from React 15 -&gt; 16.</li>
</ul>