Uncaught Error: Element ref was specified as a string (message) but no owner was set

Question

Uncaught Error: Element ref was specified as a string (message) but no owner was set

cosmin220304 opened this issue 3 years ago · comments

Hi,

I get the following error when trying to use MessageList from documentation (note: even without any change from documentation)

react-dom.development.js:13218 Uncaught Error: Element ref was specified as a string (message) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://reactjs.org/link/refs-must-have-owner for more information.
    at coerceRef (react-dom.development.js:13218)
    at reconcileSingleElement (react-dom.development.js:14054)
    at reconcileChildFibers (react-dom.development.js:14112)
    at reconcileChildren (react-dom.development.js:16990)
    at finishClassComponent (react-dom.development.js:17511)
    at updateClassComponent (react-dom.development.js:17435)
    at beginWork (react-dom.development.js:19073)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)

Anyone got any fix for this?

Cosmin Aftanase · Answer 1 · Sat Jan 01 2022 19:12:52 GMT+0800 (China Standard Time)

Same error for MessageBox component

faseehjaved · Answer 2 · Sun Jan 09 2022 06:39:47 GMT+0800 (China Standard Time)

if you are using react version other than 16 then this error may be due to multiple copies of react. try npm ls react. react-chat-elements is using react version 16.14.0 so the conflict occurs.

Deleted user · Answer 3 · Sat Jan 29 2022 03:39:34 GMT+0800 (China Standard Time)

Is there some solution for different react versions?

emregudur · Answer 4 · Wed Feb 23 2022 21:34:12 GMT+0800 (China Standard Time)

Hi guys, this problem is about you are probably using function component, we tried to change MessageBox and MessageList components class component to function component and this fixed the problem. You can use class component instead of function component for react-chat-elements components to the fast solution.

Vahid · Answer 5 · Fri Feb 25 2022 18:28:41 GMT+0800 (China Standard Time)

I have converted my components from function components to class components, but I still face the same error. Looks like that the issue is related to datasource property. If I remove it the error is gone, but off course the component will render blank.

Below is the code of my component:

import 'react-chat-elements/dist/main.css';
import { Component } from 'react';

import { MessageBox } from 'react-chat-elements'

export class Chat extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        
        return (            
            <MessageBox
                position={'left'}
                type={'photo'}
                text={'react.svg'}
                data={{
                    uri: 'https://facebook.github.io/react/img/logo.svg',
                    status: {
                        click: false,
                        loading: 0,
                    }
                }}
            />
        );
    }
};

Note that this component is directly added to a route as shown in the code below, inside App component. My app component is also a class component.

<Routes>
    <Route path="/" element={<View.Shelf exact />
    <Route path="/chat" element={<Chat />} />
    <Route path="/about" element={<View.About />
    <Route path="/webview" element={<View.Webview exact />} />
</Routes>

Tried this too:

<Routes>
    <Route path="/" element={<View.Shelf exact />
    <Route path="/chat" element={<View.Chat />} />
    <Route path="/about" element={<View.About />
    <Route path="/webview" element={<View.Webview exact />} />
</Routes>

I have tried it outside the router, directly inside render() in App component:

export class App extends Component {
    render() {
        return (
            <Chat />
        );
    }
}

My react version tree looks like this:

/path-to-project/project-name
├─┬ @emotion/react@11.7.1
│ └── react@17.0.2 deduped
├─┬ @emotion/styled@11.6.0
│ └── react@17.0.2 deduped
├─┬ @reduxjs/toolkit@1.7.1
│ └── react@17.0.2 deduped
├─┬ @testing-library/react@12.1.2
│ └── react@17.0.2 deduped
├─┬ react-anime@4.1.1
│ └── react@17.0.2 deduped
├─┬ react-chat-elements@10.16.0
│ ├─┬ react-icons@2.2.7
│ │ ├─┬ react-dom@16.14.0
│ │ │ └── react@16.14.0 deduped
│ │ ├─┬ react-icon-base@2.1.0
│ │ │ └── react@17.0.2 deduped
│ │ └── react@16.14.0
│ └─┬ react-progress-bar.js@0.2.3
│   └── react@16.14.0 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-redux@7.2.6
│ └── react@17.0.2 deduped
├─┬ react-router-dom@6.2.1
│ ├─┬ react-router@6.2.1
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ react-scripts@5.0.0
│ └── react@17.0.2 deduped
├─┬ react-slide-routes@2.0.0
│ ├─┬ react-transition-group@4.4.2
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
└── react@17.0.2

I end up with following errors:

react-dom.development.js:13218 Uncaught Error: Element ref was specified as a string (message) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://reactjs.org/link/refs-must-have-owner for more information.
    at coerceRef (react-dom.development.js:13218:1)
    at reconcileSingleElement (react-dom.development.js:14054:1)
    at reconcileChildFibers (react-dom.development.js:14112:1)
    at reconcileChildren (react-dom.development.js:16990:1)
    at finishClassComponent (react-dom.development.js:17511:1)
    at updateClassComponent (react-dom.development.js:17435:1)
    at beginWork (react-dom.development.js:19073:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
coerceRef @ react-dom.development.js:13218
reconcileSingleElement @ react-dom.development.js:14054
reconcileChildFibers @ react-dom.development.js:14112
reconcileChildren @ react-dom.development.js:16990
finishClassComponent @ react-dom.development.js:17511
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react-dom.development.js:20085 The above error occurred in the <t> component:

    at t (http://localhost:3000/static/js/bundle.js:24618:8)
    at Chat (http://localhost:3000/static/js/bundle.js:6488:5)
    at Routes (http://localhost:3000/static/js/bundle.js:140732:5)
    at App (http://localhost:3000/static/js/bundle.js:107:5)
    at Router (http://localhost:3000/static/js/bundle.js:140665:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:140145:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react-dom.development.js:13218 Uncaught Error: Element ref was specified as a string (message) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://reactjs.org/link/refs-must-have-owner for more information.
    at coerceRef (react-dom.development.js:13218:1)
    at reconcileSingleElement (react-dom.development.js:14054:1)
    at reconcileChildFibers (react-dom.development.js:14112:1)
    at reconcileChildren (react-dom.development.js:16990:1)
    at finishClassComponent (react-dom.development.js:17511:1)
    at updateClassComponent (react-dom.development.js:17435:1)
    at beginWork (react-dom.development.js:19073:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
coerceRef @ react-dom.development.js:13218
reconcileSingleElement @ react-dom.development.js:14054
reconcileChildFibers @ react-dom.development.js:14112
reconcileChildren @ react-dom.development.js:16990
finishClassComponent @ react-dom.development.js:17511
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889

emregudur · Answer 6 · Fri Feb 25 2022 21:16:56 GMT+0800 (China Standard Time)

Hi, we tried to change components on react-chat-elements and you can see here.

We works on this problem and as soon as possible aim to fix this problem.

Vahid · Answer 7 · Fri Feb 25 2022 23:22:09 GMT+0800 (China Standard Time)

@emregudur Thank you very much. Anxiously waiting for the fix :)

emregudur · Answer 8 · Wed Mar 09 2022 22:44:04 GMT+0800 (China Standard Time)

Hi guys, this problem fixed on the new version. Checkout here pls click

Vahid · Answer 9 · Wed Mar 09 2022 22:58:54 GMT+0800 (China Standard Time)

Hi @emregudur Thank you very much. Super amazing.