diff --git a/docs/warnings/refs-must-have-owner.md b/docs/warnings/refs-must-have-owner.md index 59a953df5d5d9..2fca7ff9933fc 100644 --- a/docs/warnings/refs-must-have-owner.md +++ b/docs/warnings/refs-must-have-owner.md @@ -4,8 +4,14 @@ layout: single permalink: warnings/refs-must-have-owner.html --- -You are probably here because you got the following error messages: +You are probably here because you got one of the following error messages: +*React 16.0.0+* +> Warning: +> +> Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner). + +*earlier versions of React* > Warning: > > addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded. diff --git a/src/renderers/shared/fiber/ReactChildFiber.js b/src/renderers/shared/fiber/ReactChildFiber.js index f5f46616197a2..abff0abf362ba 100644 --- a/src/renderers/shared/fiber/ReactChildFiber.js +++ b/src/renderers/shared/fiber/ReactChildFiber.js @@ -162,6 +162,18 @@ function coerceRef(current: Fiber | null, element: ReactElement) { }; ref._stringRef = stringRef; return ref; + } else { + invariant( + typeof mixedRef === 'string', + 'Expected ref to be a function or a string.', + ); + invariant( + element._owner, + 'Element ref was specified as a string (%s) but no owner was ' + + 'set. You may have multiple copies of React loaded. ' + + '(details: https://fb.me/react-refs-must-have-owner).', + mixedRef, + ); } } return mixedRef; diff --git a/src/renderers/shared/fiber/ReactFiberCommitWork.js b/src/renderers/shared/fiber/ReactFiberCommitWork.js index a8b25935471bb..23a0230e06541 100644 --- a/src/renderers/shared/fiber/ReactFiberCommitWork.js +++ b/src/renderers/shared/fiber/ReactFiberCommitWork.js @@ -557,12 +557,6 @@ module.exports = function( function commitAttachRef(finishedWork: Fiber) { const ref = finishedWork.ref; if (ref !== null) { - invariant( - typeof ref === 'function', - 'commitAttachRef(...): Expected ref to be a function. ' + - 'You may have multiple copies of React loaded. ' + - '(details: https://fb.me/react-expected-ref-to-be-function).', - ); const instance = finishedWork.stateNode; switch (finishedWork.tag) { case HostComponent: