react-chat-elements: "Invalid hook call. Hooks can only be called inside of the body of a function component" when using ChatList and MessageList components

Screen Shot 2022-03-09 at 11 29 41 PM

I got an error after installing the latest version of this library.

I have the following packages:

"react-chat-elements": "^11.0.0" "react": "^17.0.2" "react-dom": "^17.0.2" "next": "^12.0.1"

Here is my functional component:

import React, { useState } from "react";
import {
    Grid,
    Button
} from "semantic-ui-react";
import { 
    ChatList,
    MessageList
} from "react-chat-elements";

const Row = Grid.Row;
const Column = Grid.Column;

import style from "styles/main.module.scss";
import "react-chat-elements/dist/main.css";

const Chat = (props) => {

    const [chatSessionArray, setChatSessionArray] = useState([
        {
            avatar: "/static/images/ic_sample.png",
            alt: "avatar",
            title: "Group 1",
            date: new Date(),
            unread: 0
        },
        {
            avatar: "/static/images/ic_sample.png",
            alt: "avatar",
            title: "Group 2",
            date: new Date(),
            unread: 0
        }
    ]);

    const [chatMessageArray, setChatMessageArray] = useState([
        {
            position: "right",
            type: "text",
            text: "sample message 1",
            date: new Date()
        }
    ]);

    const messageListReferance = React.useRef();

    return (
        <div
            className={ style.chatContainer }>
            <Grid
                divided="vertically">
                <Row
                    columns={ 2 }>
                    <Column
                        width={ 4 }
                        className={ style.chatSession }>
                        {
                            chatSessionArray != 0
                                ? (
                                    <ChatList
                                        dataSource={ chatSessionArray }/>
                                )
                                : ""
                            
                        }
                    </Column>
                    <Column
                        width={ 12 }
                        className={ style.chatMessages }>
                        {
                            chatMessageArray.length != 0
                                ? (
                                    <MessageList
                                        referance={ messageListReferance }
                                        toBottomHeight={ "100%" }
                                        dataSource={ chatMessageArray }/>
                                )
                                : ""
                        }
                    </Column>
                </Row>
            </Grid>
        </div>
    );

}

export default Chat;

Full stack error, in case you need:

Unhandled Runtime Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Call Stack
resolveDispatcher
node_modules/react-chat-elements/node_modules/react/cjs/react.development.js (1465:0)
useState
node_modules/react-chat-elements/node_modules/react/cjs/react.development.js (1496:0)
f
node_modules/react-chat-elements/dist/main.js (1:25870)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (14985:0)
mountIndeterminateComponent
node_modules/react-dom/cjs/react-dom.development.js (17811:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (19049:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (3994:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4056:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (23964:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (22776:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (22707:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (22670:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (22293:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (11327:0)
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js (468:0)
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js (11276:0)
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js (11322:0)
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js (11309:0)
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js (22438:0)
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js (26020:0)
Object.hydrate
node_modules/react-dom/cjs/react-dom.development.js (26086:0)
renderReactElement
node_modules/next/dist/client/index.js (515:30)
doRender
node_modules/next/dist/client/index.js (831:4)
_callee$
node_modules/next/dist/client/index.js (408:18)
tryCatch
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (45:15)
Generator.invoke [as _invoke]
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (274:0)
Generator.prototype.<computed> [as next]
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (97:0)
asyncGeneratorStep
node_modules/next/dist/client/index.js (30:28)
_next
node_modules/next/dist/client/index.js (48:16)
eval
node_modules/next/dist/client/index.js (53:12)
new Promise
<anonymous>
eval
node_modules/next/dist/client/index.js (45:15)
_render
node_modules/next/dist/client/index.js (427:19)
render
node_modules/next/dist/client/index.js (430:19)
_callee$
node_modules/next/dist/client/index.js (394:8)
tryCatch
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (45:15)
Generator.invoke [as _invoke]
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (274:0)
Generator.prototype.<computed> [as next]
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (97:0)
asyncGeneratorStep
node_modules/next/dist/client/index.js (30:28)
_next
node_modules/next/dist/client/index.js (48:16)

About this issue

Original URL
State: open
Created 2 years ago
Comments: 15 (3 by maintainers)

Most upvoted comments

Ok guys, I have some good news, the issue is with the module when installed via npm, if I use yarn, I am able to install and run it, more invalid hook errors when used yarn.

what I did was:

npm uninstall react-chat-elements or yarn remove react-chat-elements
rm -rf node-modules/
rm package-lock.json
rm yarn.lock (if u have yarn.lock)
npm cache clean --force
yarn cache clean --force
yarn add react-chat-elements@11.0.1
yarn install
edited package.json and replaced

“start”: “react-scripts start”,

with

“start”: “GENERATE_SOURCEMAP=false react-scripts start”,

PS: THOUGH THIS SHOULD NOT BE NEEDED, BUT THAT IS HOW MY CURRENT PACKAGE.JSON LOOKS LIKE

yarn start

vahid-neuralinc on Mar 23, 2022

Is there any way to get this to work via npm? Tried various versions and getting the same error as others have noted. Haven’t tried yarn yet.

EDIT: I have tried the solution posted by @vahid-neuralinc and it seems like it does work now (thank you so much by the way). I have tested MessageList component by using the readme.md example

petar-varga on Apr 2, 2022

@NathanC You should try yarn instead of npm. Please refer to the steps above, in my previous comment.

vahid-neuralinc on Mar 29, 2022

same here and i just installed the package

rubintaipi1 on Mar 19, 2022

Hi @emregudur, My react dom version is 17.0.2 already. Still the same error.

Below is my code:

` import { Page } from ‘…/…/elements/page/page.element’; import { MessageList } from ‘react-chat-elements’; import { createRef, useState } from ‘react’;

export let Chat = (props) => { // const changeRoute = useNavigate(); const messageListReferance = createRef();
let navigate = (routeName) => {
    // changeRoute(routeName);
}

return (
    <Page.PageShell>
        <div className='chatwindow'>
            <div className="widget-container">
            <MessageList
                referance={messageListReferance}
                className='message-list'
                lockable={true}
                toBottomHeight={'100%'}
                dataSource={[
                    {
                        position: 'right',
                        type: 'text',
                        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
                        date: new Date(),
                    }
                ]} />
            </div>
        </div>
    </Page.PageShell>
);
}; `

My package.json looks like this:

“dependencies”: { “@emotion/react”: “^11.7.1”, “@emotion/styled”: “^11.6.0”, “@reduxjs/toolkit”: “^1.7.1”, “@testing-library/jest-dom”: “^5.16.1”, “@testing-library/react”: “^12.1.2”, “@testing-library/user-event”: “^13.5.0”, “emotion-rgba”: “^0.0.9”, “react”: “^17.0.2”, “react-anime”: “^4.1.1”, “react-chat-elements”: “^11.0.1”, “react-dom”: “^17.0.2”, “react-redux”: “^7.2.6”, “react-router-dom”: “^6.2.1”, “react-scripts”: “5.0.0”, “react-slide-routes”: “^2.0.0”, “web-vitals”: “^2.1.2” },

I also have deleted npm_modules folder, and package-lock files several times.

Still same error. All of my class components are converted to functional components and the libraries are all updated to latest version (react and react-dom 17.0.2) Screen Shot 2022-03-10 at 9 11 20 PM Screen Shot 2022-03-10 at 9 18 01 PM

My codes are the same as above.

wnmolit on Mar 10, 2022

Hi guys, i published for react-dom@17.0.2. Can you try again on react-chat-elements latest version?

emregudur on Mar 10, 2022

Same on my side just like @wnmolit.

vahid-neuralinc on Mar 10, 2022

Hi @wnmolit, I checked your code. I tried your code on the clean project and I am not getting an error, working fine. You can see here

Hi @emregudur ! I still received the same error above after I reinstalled all the libraries on the project.

And I noticed that when I run npm ls react-dom, there is mismatched version of react-dom from react-chat-elements library.

Screen Shot 2022-03-10 at 11 11 23 AM

Do you think it is fall under warning number 1? You might have mismatching versions of React and renderer (such as React DOM)

wnmolit on Mar 10, 2022