SPFx 1.24.0: Coexistence of React 17 and React 18 solutions and library components

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx 1.24.0-beta.3

Issue description

SPFx 1.24.0 introduces support for React 18.3.1. I am currently evaluating this upgrade for our SPFx solutions and would like to clarify the intended compatibility and coexistence model.

We use SPFx library components in several solutions. Existing SPFx solutions and their corresponding library components are currently based on React 17.x. When upgrading one of our solutions to React 18.3.1, we would also upgrade all library components consumed by that solution. We do not intend to load a React 17 library component into a React 18 solution.

However, existing React 17 SPFx solutions may remain installed and continue to use their React 17 library components. At the same time, newly developed or upgraded SPFx solutions may use React 18.3.1 and corresponding React 18 library components.

Third-party SPFx solutions and library components may also continue to use React 17 for some time.

Questions

• Will React 17 and React 18 SPFx solutions be able to coexist after the final release of SPFx 1.24.0?
• Can a React 17 solution using React 17 library components and a React 18 solution using React 18 library components be installed in the same tenant and site collection?
• Can both types of solutions be used on the same modern SharePoint page?
• Does SPFx ensure that each solution and its library components receive the appropriate React major version at runtime?
• Are there any restrictions regarding application customizers or other extensions based on different React versions running on the same page?
• Is any special configuration, packaging, or versioning required for library components to support this coexistence scenario?

Could you clarify whether this is a supported scenario in the final version of SPFx 1.24.0 and whether there are any recommended migration or packaging considerations?