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

[cosmin220304]

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?

[cosmin220304]

Same error for MessageBox component

[faseehjaved]

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.

Is there some solution for different react versions?

[emregudur]

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-neuralinc]

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]

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-neuralinc]

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

[emregudur]

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

[vahid-neuralinc]

Hi @emregudur Thank you very much. Super amazing.