microsoft / microsoft/BotFramework-WebChat

React 19 compatibility: Deprecated react-dom APIs need migration to support React 19

Open
#5,552 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Unrelated

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

The BotFramework-WebChat package is using deprecated React APIs that were removed in React 19, causing compilation errors when users try to upgrade their React applications from version 18 to 19. The package uses react-dom.render and react-dom.unmountComponentAtNode which are no longer available in React 19.

Do you see any errors in console log?
ERROR in ./node_modules/botframework-webchat-component/dist/botframework-webchat-component.mjs
export 'render' (imported as 'ab') was not found in 'react-dom'
export 'unmountComponentAtNode' (imported as 'HE') was not found in 'react-dom'
How to reproduce the issue?
  1. Create a new React 19 project or upgrade existing React 18 project to React 19
  2. Install @microsoft/omnichannel-chat-widget package (which depends on BotFramework-WebChat)
  3. Import and use the LiveChatWidget component in your React 19 application
  4. Run the development server or build the project
  5. See compilation errors related to missing react-dom.render and react-dom.unmountComponentAtNode exports
What do you expect?

The BotFramework-WebChat package should work seamlessly with React 19 without any compilation errors, allowing users to upgrade their React applications to the latest version and use all React 19 features and improvements.

What actually happened?

The package fails to compile when used with React 19 due to the use of deprecated APIs that were removed in React 19. This forces users to either:

  • Stay on React 18 (missing out on React 19 improvements)
  • Remove the chat widget functionality entirely
  • Fork and maintain their own version of the package
Do you have any screenshots or recordings to repro the issue?

N/A - This is a compilation error, not a visual issue.

Adaptive Card JSON
N/A - This issue is not related to Adaptive Cards.
Additional context

This is a critical blocking issue for React 19 adoption. The problem stems from React 19's removal of legacy APIs:
Root Cause:

  • React 19 removed react-dom.render and react-dom.unmountComponentAtNode APIs
  • BotFramework-WebChat still uses these deprecated APIs
  • This affects all dependent packages like @microsoft/omnichannel-chat-widget

Technical Details:

  • The package needs to be updated to use React 19 compatible APIs:
  • Replace react-dom.render with createRoot from react-dom/client
  • Replace react-dom.unmountComponentAtNode with root.unmount()

Impact:

  • Blocks React 18→19 upgrades for all projects using this package
  • Affects dependent packages and their users
  • Prevents access to React 19 features and improvements

Package Versions:

  • React: 19.1.1
  • React DOM: 19.1.1
  • @microsoft/omnichannel-chat-widget: 1.8.2 (which depends on BotFramework-WebChat)

References:

This issue affects all users who want to upgrade to React 19 and use BotFramework-WebChat or any dependent packages in their applications.

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.

Research direction

Search the Web Chat packages for react-dom.render and react-dom.unmountComponentAtNode, then inspect the surrounding mount and unmount lifecycle. Use the React 19 reproduction described in the issue to verify that the package compiles without those exports while preserving widget mounting and cleanup.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
developer-experience, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.