Skip to content

WebChat 4.19.1 crashes when React strict mode is enabled #5859

Description

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Others or unrelated

Which area does this issue affect?

Development experience

Which theme pack does this issue affect?

I did not test it on other theme packs

What is the public URL for the website?

No response

Please describe the bug

After upgrading botframework-webchat in my React 19 app from 4.18.2 to 4.19.1 I got this error in the console when running my app locally:

NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "webchat-x2s4v--code-block-copy-button" has already been used with this registry

It's related to the React strict mode doing the double mounting of components. When I disabled the strict mode the app worked normally.

Github Copilot analyzed it like this:

It calls customElements.define() during render-derived initialization without checking whether the generated tag is already registered. React Strict Mode exposes it by replaying the mount in development.

CustomElementsComposer unconditionally invokes customElements.define() for its generated code-block tags.

I'm using the Composer to render the web chat which is probably related.

Do you see any errors in console log?

NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "webchat-x2s4v--code-block-copy-button" has already been used with this registry

How to reproduce the issue?

  1. In React app wrap the app with Strict-component
  2. Install WebChat 4.19.1
  3. Render the webchat using Composer-component
  4. Run the app locally (for example 'npm run dev')
  5. Open the local site in the browser (any browser will do)

What do you expect?

I expected the WebChat to load normally.

What actually happened?

WebChat didn't load and console had the error mentioned.

Do you have any screenshots or recordings to repro the issue?

No response

Adaptive Card JSON

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bot ServicesRequired for internal Azure reporting. Do not delete. Do not change color.bugIndicates an unexpected problem or an unintended behavior.customer-reportedRequired for internal Azure reporting. Do not delete.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions