React: Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null after updating to React 16

[clodal]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Page load throws console error: Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null

// 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

What is the expected behavior?
No console error. Or at least some way to trace which is the stateless component that is causing the issue.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "^16.0.0-rc.3",
Chrome Version 60.0.3112.113 (Official Build) (64-bit)
macOS Sierra 10.12.6

• This error only started to appear after upgrading from React 15 -> 16.

[CharlesStover]

Stateless functions could not be given refs even in React 15.

Try converting your function component into a class component.

[clemmy]

Thanks for reporting the issue! We'll change the error message to show the stateless component that is causing the issue.

[clodal]

@CharlesStover Thanks, but these warnings only occur after i upgraded from 15.6.1 to 16-rc3. I don't use refs in my own application code. So it's probably coming from external modules, which I have no way to trace at the moment.

[gaearon]

The "null" at the end should have been a stacktrace pointing you at the offending component. Seeing "null" there seems like a bug.

Can you share a minimal project reproducing this please?

[AhmedSayed77]

I see the same error. The weird part is this from the sack trace

__stack_frame_overlay_proxy_console__ @ proxyConsole.js:56
.
.
render @ react-dom.development.js:17129
./src/index.js @ index.js:33
__webpack_require__ @ bootstrap a768beb…:698
fn @ bootstrap a768beb…:111
0 @ types.js:1 <----- this file

type.js is a file that exports a json object, and it's not even imported in the src/index.js file

This happened when I updated react to [email protected]

[gaearon]

Please provide a reproducing project.

There’s nothing we can discuss until there is a way to reproduce.

[Luchanso]

@gaearon I found this bug in lib [email protected]

And reproduce in: https://codesandbox.io/s/931pp9zv0p

You need click on left button

[clodal]

PS: I was also using the Ant Design library when this bug was reported.

[gaearon]

I don’t know how CodeSandbox works for sure, but it seems to me that you have duplicate react or react-dom in the bundle, and that is causing the issue.

Can you provide a local project reproducing it?

[MrSauceman]

I am experiencing this same error from the DragSource and DropTarget components in react-dnd after upgrading my project to react 16.

[gaearon]

As I already said in an earlier comment there is no need to leave a comment in this thread if you don't provide a project on GitHub that reproduces it.

The warning itself is legitimate. It points out a real problem that should be fixed either in your app or a library you use. You should not be trying to pass a ref to a functional component since it won't work. React now warns you about this.

However, the warning should also display a stack instead of "null" at the end. If you see "null" at the end of the message, your development environment is messed up, and you have multiple versions of React and ReactDOM in the bundle. You need to fix it yourself, there is no way we can fix it for you.

To check you can run:

npm ls react

Do you see more than one React? That's the problem. Remove the extra one and file an issue with the library that brought it in. React should be a peer dependency, not a dependency.

Do the same for react-dom:

npm ls react-dom 

See more than one? That's the issue. Remove the extra one and file an issue with the library that brought that dependency.

If after all these steps the issue is unsolved, upload your project on GitHub and provide a link. Then we can look at what's causing it.

Thanks!

[Luchanso]

@gaearon https://github.com/Luchanso/issue-react-16

git clone [email protected]:Luchanso/issue-react-16.git
cd issue-react-16
yarn
yarn start
"Click btn"

Issue code: https://github.com/Luchanso/issue-react-16/blob/master/src/App.js#L6

[Luchanso]

I can look later problem in antd lib.

[gaearon]

The example was very helpful, thanks.
The fact that there is null there is our bug, and I’ll look into fixing it!

The warning is still valid though. If I fix the bug in React, I see this:

This is pointing out that MenuItem is a functional component but something here attaches a ref to it.

[gaearon]

OK, I have a fix for the null thing in https://github.com/facebook/react/pull/10915.
Note that, as I said above, the warning itself is correct.

[chenfanggm]

when this fix will get released?

[gaearon]

When 16.1 is released. Which will happen within a week or two.

[gaearon]

React 16.1.0-beta has been released. Please update react, react-dom, and react-test-renderer (if you use it) to this version and let us know if it solved the issue! We’d appreciate if you could test before Monday when we plan to get 16.1.0 out.

[WhynoChinese]

@gaearon I still have this problem, react and react-dom is 16.1.1

[Army-U]

+1

[gaearon]

I'm afraid you are not reading the thread.

Please re-read my reply in https://github.com/facebook/react/issues/10831#issuecomment-332824850.

Again, the warning itself is correct and should be fixed in your code. This issue is just about "null" instead of component stack in the message. That has been fixed.

[gaearon]

If you experience issues or believe there is a false positive in the warning please file a new issue with an example.