Skip to content

Fix the Fluent theme IIFE on React 19 and follow up on renderWebChat() - #5971

Open
Eugene (OEvgeny) wants to merge 11 commits into
mainfrom
OEvgeny/fix-react-19-follow-ups
Open

Eugene (OEvgeny) wants to merge 11 commits into
mainfrom
OEvgeny/fix-react-19-follow-ups

Conversation

@OEvgeny

@OEvgeny Eugene (OEvgeny) commented Oct 23, 2026 •

Copy link
Copy Markdown
Collaborator

Related to #5552 and #5850: the IIFE build of the Fluent theme crashes on load when the page uses React 19.

Changelog Entry

Fixed

  • Fixed the IIFE build of the Fluent theme crashing on load with React 19, in PR #5971, by @OEvgeny

Description

The Fluent theme IIFE bundled React DOM 16.8.6 (via renderWebChat(), which it does not export) and evaluated it against window.React, which throws on React 19; it now uses window.ReactDOM, like window.React. Also folds in #5963's review comments, a docs fix, and React 19 tests.

Design

  • Map react-dom to the page's ReactDOM in the IIFE tsup plugin, like react; tree-shaking cannot drop it, the bundled module runs on load.

Specific Changes

  • renderWebChat.tsx: split the render schema into legacyReactDOMSchema and reactRootSchema, name ReactDOM.createRoot() in the error
  • fluent-theme/tsup.config.ts, src/external.umd/react-dom.ts: IIFE builds resolve react-dom to window.ReactDOM
  • react19/fluentTheme.iife.html: snapshot 1, Fluent theme on React 19 shows a sent message and the reply
  • docs/HOSTING.md: remove react-dom/client from the baseline import map, it is never built
  • renderWebChat.spec.tsx: an error from root.render() is thrown synchronously
  • react19/codeBlockCopyButton.html: snapshot 1, the copy button shows "Copied" on React 19
  • react19/*.html: expect ReactDOM.version; the React 18 root test spies with jest-mock
  • I have added tests and executed them locally
  • I have added .changelog/<PR#>-<slug>.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

Eugene Olonov added 11 commits October 23, 2026 13:44
The IIFE build bundled React DOM 16.8.6 (through renderWebChat() of botframework-webchat) and evaluated it on load against window.React, which crashes with React 19. Like "react", "react-dom" now resolves to window.ReactDOM; the bundled copy was only used by renderWebChat(), which the IIFE build does not export.
static/react-dom.baseline/client.js is never built (React 16 has no react-dom/client), and renderWebChat() does not import react-dom/client: on React 19, the host passes a root from createRoot().
…build

Ported from #5955: the page creates its own root with createRoot() and renders <ReactWebChat> with React 19.
Comment thread packages/fluent-theme/tsup.config.ts
@OEvgeny
Eugene (OEvgeny) marked this pull request as ready for review October 23, 2026 22:53
Copilot AI balanced review requested due to automatic review settings October 23, 2026 22:53

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants