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.

[quisido]

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?

[AhmadMayo]

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 react@16.0.0

[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 antd@2.12.8

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 git@github.com: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.