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

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)

[vahid-neuralinc]

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

[petar-varga]

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