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

[wnmolit]

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)

[emregudur]

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

[wnmolit]

here

I see. I'm not sure why is not working on my side. I installed the libraries to their latest version.

Maybe I need to reinstall the packages and try again. I'll let you know if I already solved the issue. Thanks!

[wnmolit]

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.

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

[vahid-neuralinc]

Same on my side just like @wnmolit.

[wnmolit]

Same on my side just like @wnmolit.

Good relief. I thought I'm the only one receiving this error XD I tried to convert all of my class components into functional components, but still the same error. I think the problem is the version of react-dom from react-chat-elements.

[emregudur]

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

[vahid-neuralinc]

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.

[wnmolit]

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)

My codes are the same as above.

[rubintaipi1]

same here and i just installed the package

[vahid-neuralinc]

Looks like the culprit is packge.json in react-chat-elements:

"react-icons": "^2.2.5",

react-icons v2.2.5 requires react v 16.x.

react-icons requires an update to latest version i.e. 4.3.1 any version above 2.2.5 which requires react 17.

[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

[NathanC]

I'm getting the same issue (Invalid hook call). I tried cloning the repo and updating react-icons myself, but then I had some issues with the react-progress-bar.js dependency (which looks like it hasn't been updated in years).

Has anyone been able to solve this, except for using yarn?

[vahid-neuralinc]

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

[emregudur]

Hi, we works on typescript-migration branch. And also we trying migrate to typescript this project. On this branch updated all dependencies for lastest react version. I believe to these works fix to this issue too.

[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