"Invalid hook call. Hooks can only be called inside of the body of a function component" when using ChatList and MessageList components
See original GitHub issueI 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)
Issue Analytics
- State:
- Created 2 years ago
- Comments:15 (3 by maintainers)
Top Results From Across the Web
Invalid hook call. Hooks can only be called inside of the body ...
I had this issue when I used npm link to install my local library, which I've built using cra . I found the...
Read more >Invalid Hook Call Warning - React
Hooks can only be called inside the body of a function component. There are three common reasons you might be seeing it: You...
Read more >Invalid hook call. Hooks can only be called inside the body of ...
The error "Invalid hook call. Hooks can only be called inside the body of a function component" occurs for multiple reasons, having a...
Read more >Invalid hook call. Hooks can only be called inside of the body ...
Error : Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one...
Read more >Invalid hook call. Hooks can only be called ... - Datainfinities
Hooks can only be called inside the body of a function component”, check the version of react-dom we are using in the project....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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:
“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
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