microsoft / microsoft/BotFramework-WebChat

Upgrading botframework-webchat from 4.13.0 to 4.15.2 gives error in console when running dev build

Open
#4,300 14 comments 2 reactions 1 assignee View on GitHub

@compulim is already working on this.

Since May 26, 2022.

Bot Services bug customer-replied-to customer-reported ExemptFromDailyDRIReport needs-team-attention
Dominant language
HTML
Stars
1.8k
Forks
1.6k
Avg merge
22h 58m
Merged PRs (30d)
2

Description

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:

image

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
image

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

  1. Start React project locally
  2. Click on minimised web chat icon
  3. The WebChat component renders and displays messages
  4. 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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.