Updated misleading error message in production environment when adding ref to a functional component (#11761)

[skiritsis]

I have followed the execution flow backwards from the stack trace thrown by the invariant which by the way looks like:

    ReactChildFiber ->at coerceRef
    ReactChildFiber -> at reconcileSingleElement
    ReactChildFiber -> at reconcileChildFibers
    ReactFiberBeginWork -> at reconcileChildrenAtExpirationTime
    ReactFiberBeginWork -> at reconcileChildren
    ReactFiberBeginWork -> at mountIndeterminateComponent
    ReactFiberBeginWork -> at beginWork
    ReactFiberScheduler -> at performUnitOfWork
    ReactFiberScheduler -> at workLoop

for the following example:

        function Child() {
            return <div ref="test" />;
        }
        
      ReactDOM.render(
              <Child />,
        document.getElementById('container')
      );

and I believe that while we are not on __DEV__ environment, since we do not set the owner for functional components, we do not have the necessary information (tag) at any point to safely deduce if the component is functional to throw the same error.

react/packages/react-reconciler/src/ReactChildFiber.js

Lines 107 to 114 in 5bd2321

	if (owner) {
	const ownerFiber = ((owner: any): Fiber);
	invariant(
	ownerFiber.tag === ClassComponent,
	'Stateless function components cannot have refs.',
	);
	inst = ownerFiber.stateNode;
	}

As such I have updated the error message to properly cover both cases. Although not ideal to have the same error for multiple reasons, seems to was the case as well in React 15.x.

Previous error message:

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.

@gaearon Should I update the documentation link with the new message as well as an additional bullet point about functional components?

Please let me know if I overlooked something obvious. Any feedback is welcome.

On a different note, the following example:

    function Bar() {
        return <div>Hello, world</div>;
    }
    class Foo extends React.Component {
        render() {
            return <Bar ref="foo" />;
        }
    }

    ReactDOM.render(
            <Foo />,
        document.getElementById('container')
    );

is a different case that can be checked. Currently on __DEV__ environment, we trigger the following warning (which is covered by the tests):

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Foo`.
    in Bar (created by Foo)
    in Foo

[gaearon]

We shouldn't manually edit this file.

[skiritsis]

Sorry, was totally unaware of that. Reverted the changes in codes.json

[gaearon]

I think this message doesn't make it clear that this could be due to using a string ref in a functional component.
Can we split it in three parts? e.g.

Element ref was specified as a string (me) but no owner was set. This could happen for one of the following reasons:

1.
2.
3.

[skiritsis]

Of course. I will update it accordingly.

[gaearon]

Looks good, thanks!