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

wnmolit · 2022-03-09T15:43:20Z

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)

The text was updated successfully, but these errors were encountered:

emregudur · 2022-03-09T18:14:13Z

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 · 2022-03-10T02:42:32Z

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 · 2022-03-10T03:14:36Z

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 · 2022-03-10T03:42:28Z

Same on my side just like @wnmolit.

wnmolit · 2022-03-10T04:10:13Z

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 · 2022-03-10T12:38:47Z

Hi guys, i published for [email protected]. Can you try again on react-chat-elements latest version?

vahid-neuralinc · 2022-03-10T13:04:42Z

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 · 2022-03-10T13:19:03Z

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 · 2022-03-19T04:00:08Z

same here and i just installed the package

vahid-neuralinc · 2022-03-19T08:13:17Z

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 · 2022-03-21T03:18:49Z

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 [email protected]
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 · 2022-03-29T03:13:31Z

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 · 2022-03-29T06:14:10Z

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

emregudur · 2022-03-29T09:09:53Z

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 · 2022-04-01T20:07:08Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

wnmolit commented Mar 9, 2022

emregudur commented Mar 9, 2022

wnmolit commented Mar 10, 2022

wnmolit commented Mar 10, 2022

vahid-neuralinc commented Mar 10, 2022

wnmolit commented Mar 10, 2022

emregudur commented Mar 10, 2022

vahid-neuralinc commented Mar 10, 2022 •

edited

Loading

wnmolit commented Mar 10, 2022 •

edited

Loading

rubintaipi1 commented Mar 19, 2022 •

edited

Loading

vahid-neuralinc commented Mar 19, 2022

vahid-neuralinc commented Mar 21, 2022 •

edited

Loading

NathanC commented Mar 29, 2022

vahid-neuralinc commented Mar 29, 2022

emregudur commented Mar 29, 2022

petar-varga commented Apr 1, 2022 •

edited

Loading

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

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

Comments

wnmolit commented Mar 9, 2022

emregudur commented Mar 9, 2022

wnmolit commented Mar 10, 2022

wnmolit commented Mar 10, 2022

vahid-neuralinc commented Mar 10, 2022

wnmolit commented Mar 10, 2022

emregudur commented Mar 10, 2022

vahid-neuralinc commented Mar 10, 2022 • edited Loading

wnmolit commented Mar 10, 2022 • edited Loading

rubintaipi1 commented Mar 19, 2022 • edited Loading

vahid-neuralinc commented Mar 19, 2022

vahid-neuralinc commented Mar 21, 2022 • edited Loading

NathanC commented Mar 29, 2022

vahid-neuralinc commented Mar 29, 2022

emregudur commented Mar 29, 2022

petar-varga commented Apr 1, 2022 • edited Loading

vahid-neuralinc commented Mar 10, 2022 •

edited

Loading

wnmolit commented Mar 10, 2022 •

edited

Loading

rubintaipi1 commented Mar 19, 2022 •

edited

Loading

vahid-neuralinc commented Mar 21, 2022 •

edited

Loading

petar-varga commented Apr 1, 2022 •

edited

Loading