Support React 19

[T4rk1n]

Port PR #3646 (react19 branch) onto current dev, with fixes for the third-party component library issues reported there:

• Add React 19.2.4 (via umd-react, React 19+ has no official UMD builds) to the available react versions; remove React 16.
• New react-shim.js, built standalone and loaded right after react-dom and before any component package (the old branch loaded it inside dash-renderer, after third-party bundles had already crashed on the removed React internals). It stubs ReactCurrentOwner, redirects the legacy 'react.element' $$typeof symbol so libraries that pre-bundled a React <=18 jsx-runtime don't hit React error Creating a spectrum plot with callback #525, and provides window.ReactJSXRuntime.
• Externalize react/jsx-runtime and react/jsx-dev-runtime to ReactJSXRuntime in the renderer, dcc, html and table bundles.
• Use umd-react@19.2.4 rather than 19.2.0, which silently bundles React 19.1.0.
• CI: run main, html and dcc test jobs against React 18.3.1 and 19.2.4; keep Percy pinned to 18.3.1.

[AnnMarieW]

Hi @T4rk1n
Nice to see this PR! Here's some early feedback from testing.

I ran a few minimal apps using this branch with React 19 enabled.

• The latest versions of DMC and DBC now render without errors, so the issues reported in PR 3646 appear to be resolved.
• I tried a few components from DBC, and everything I tested worked correctly. (Comprehensive testing is still needed.)
• With the current DMC build, I found a number of issues, even though there are no console errors. Components that use popovers (Select, DatePicker, Menu, etc.) render their dropdowns in the top-left corner of the page. Slider responds to keyboard input but cannot be dragged with the mouse. Carousel does not change slides, and RichTextEditor crashes the browser.
• I rebuilt DMC with webpack changes similar to those in this PR (adding the react/jsx-runtime and react/jsx-dev-runtime externals), and those components worked correctly.

[T4rk1n]

• I rebuilt DMC with webpack changes similar to those in this PR (adding the react/jsx-runtime and react/jsx-dev-runtime externals), and those components worked correctly.

Yea this is a gotcha of the current shim, if you use features from jsx-runtime you need to put it in externals. Think might need to do the same in DBC and other libraries.

[AnnMarieW]

Yea this is a gotcha of the current shim, if you use features from jsx-runtime you need to put it in externals. Think might need to do the same in DBC and other libraries.

Another issue is that the new DMC build is not compatible with previous dash versions. The app (running default React 18 and dash 4.3) doesn't render - and has this error message:
Cannot read properties of undefined (reading 'jsx')

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
23.3% Duplication on New Code

See analysis details on SonarQube Cloud

[T4rk1n]

Yea this is a gotcha of the current shim, if you use features from jsx-runtime you need to put it in externals. Think might need to do the same in DBC and other libraries.

Another issue is that the new DMC build is not compatible with previous dash versions. The app (running default React 18 and dash 4.3) doesn't render - and has this error message: Cannot read properties of undefined (reading 'jsx')

I made it backward compatible but need webpack config in libraries for the full support.

Can refer to dcc webpack config for how to adapt the JSXRuntime:

dash/components/dash-core-components/webpack.config.js

Lines 10 to 48 in 0548848

	// Externalized react/jsx-runtime. Newer Dash provides window.ReactJSXRuntime
	// (see dash-renderer/src/react-shim.js) backed by the React version loaded on
	// the page; the inline fallback keeps this bundle working on older Dash,
	// which does not define the global. Keep in sync with react-shim.js.
	const jsxRuntimeExternal = `var (window.ReactJSXRuntime || (window.ReactJSXRuntime = (function (React) {
	function jsx(type, config, maybeKey) {
	var props = {};
	var children = null;
	if (config != null) {
	if (config.key !== undefined) {
	props.key = '' + config.key;
	}
	for (var propName in config) {
	if (
	Object.prototype.hasOwnProperty.call(config, propName) &&
	propName !== 'key' &&
	propName !== '__self' &&
	propName !== '__source'
	) {
	if (propName === 'children') {
	children = config[propName];
	} else {
	props[propName] = config[propName];
	}
	}
	}
	}
	if (maybeKey !== undefined) {
	props.key = '' + maybeKey;
	}
	if (children === null || children === undefined) {
	return React.createElement(type, props);
	}
	return Array.isArray(children)
	? React.createElement.apply(React, [type, props].concat(children))
	: React.createElement(type, props, children);
	}
	return {jsx: jsx, jsxs: jsx, jsxDEV: jsx, Fragment: React.Fragment};
	})(window.React)))`;

[AnnMarieW]

@T4rk1n

I made it backward compatible but need webpack config in libraries for the full support.

I tried this in DMC and it worked great - Thanks!