microsoft
Upgrading botframework-webchat from 4.13.0 to 4.15.2 gives error in console when running dev build
Please view our Technical Support Guide before filing a new issue.
Version
botframework-webchat NPM package version 4.15.2
Describe the bug
We have created a chatbot based on the React web chat component as per the sample 06.recomposing-ui/a.minimizable-web-chat that works fine.
After upgrading the botframework-webchat npm package from 4.13.0 to 4.15.2, when clicking the minimised chat icon to open the web chat the following error is displayed in the browser dev tools console:
Warning: Cannot update a component ('ActivityAcknowledgementComposer') while rendering a different component ('InternalTranscriptScrollable'). To locate the bad setState() call inside 'InternalTranscriptScrollable', follow the stack trace as described in https://reactjs.org/link/setstate-in-render
The call stack is lengthy but according to the article linked to in the message, the relevant part is just after the React frames
ie (anonymous) @ActivityAcknowledgementComposer.tsx:145 (anonymous) @BasicTranscript.tsx:681
This is in Edge/Chrome/FireFox on Windows 10.
The error is only displayed for dev builds, where NODE_ENV = production the error does not occur.
Steps to reproduce
- Start React project locally
- Click on minimised web chat icon
- The WebChat component renders and displays messages
- The error message is shown in the console
Expected behavior
No React errors in the console when running a development build.
##Additional context The functionality of the web chat UI seems to be unaffected.
@DaveM77, thank you for mentioning this. I will attempt a repro and get back to you with what I find.
@DaveM77, this is related to a known bug in the node v16+ runtime. If you downgrade to v14, this should resolve the issue for you. Please change the version, try again, and let me know the results.
Hi @stevkan, just tried downgrading node to 14.19.3 in a fresh environment and getting the same error message. Is there a particular minor version required?
It looks like I perhaps changed both the Node and React versions at the same time and didn't notice. It does look like the problem exists with Node v14.19.3. That being said, there is a bug in Node/npm that can surface using v16+. So, it's good that you remain on v14, if you can.
The issue you reference in your original post looks, from what I can tell, to be related to the React version. If I downgrade to v16.8.6, the issue goes away. I tested this several times, to be sure. I also tried going with the v16.14.0, the last version published before version 17, and it broke there.
So, in short, I can repro this problem with a workaround solution appearing to be to downgrade React to v16.8.6 in order to mitigate.
@compulim, this appears to be a bug. Can you look into this further, please?
Downgrading React to 16.8.6 resolved the issue. Thanks for your help with this.
@compulim Faced the same issue: Due to Node 14 goes end of life on April 30, 2023, the Node upgraded to LTS v.18 so, it was required to upgrade botframework-webchat from 4.9.1 to 4.15.7 latest and the same above error appeared once chat bot initiated. UI functionality is affected, the chat bot doesn't work as expected
Below the environment is: Node: 18.14.0 npm: 9.3.1 botframework-webchat: "4.15.7", react: 16.13.1
@compulim - I am facing similar issue after updating node v16. "botframework-webchat": "^4.15.7", "react": "^16.8.6", "react-dom": "^16.8.6" when the application loads initially, I see console error and bot doesn't load. Could you please let me know if I am missing anything. I appreciate your help!
I'm facing this issue too. Due to this the component doesn't work when React StrictMode is used.
Any update about this (or any workaround)?
I'm facing this issue too and the conversation call gets canceled.
dependencies: "botframework-directlinejs": "^0.15.4", "botframework-webchat": "^4.15.9", "botframework-webchat-api": "^4.15.9", "react": "^18.2.0",
It works fine without <React.StrictMode>
Is this being worked on?
This error occurs for me even tho I don't have strict mode on. However, I have ActivityAcknowledgementComposer2 and InternalTranscriptScrollable2 so maybe they are rendered twice for some reason. I don't know if this has anything to do with the issue. This error occurs when the first message is sent from user to bot.
For me, the bot session continues to function after this error, perhaps because I have implemented the minimizable chat with the "loaded" state block so this error occurs after "convesations" call has finished.
Setup: "botframework-directlinejs": "^0.15.5", "botframework-webchat": "^4.15.9", "react": "^18.2.0", "typescript": "^5.2.2", "vite": "^4.4.4",
I can confirm that the error does not occure when NODE_ENV is set to production. In development mode the error ist still present, even in the latest version 4.16.0. React/react-dom version is 18.2.0
