[core] Use React 18's JSX runtime for v5.x UMD builds (#44815)

Author: DiegoAndai

examples/material-ui-via-cdn/index.html

@@ -5,10 +5,10 @@
     <title>My page</title>
     <meta name="viewport" content="initial-scale=1, width=device-width" />
     <script
-      src="https://unpkg.com/react@^18.0.0/umd/react.development.js"
+      src="https://unpkg.com/react@^18.3.1/umd/react.development.js"
       crossorigin="anonymous"
     ></script>
-    <script src="https://unpkg.com/react-dom@^18.0.0/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-dom@^18.3.1/umd/react-dom.development.js"></script>
     <script
       src="https://unpkg.com/@mui/material@5/umd/material-ui.development.js"
       crossorigin="anonymous"

packages/mui-material/package.json

@@ -58,6 +58,8 @@
   "devDependencies": {
     "@mui-internal/test-utils": "workspace:^",
     "@mui/internal-babel-macros": "workspace:^",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-replace": "^5.0.5",
     "@testing-library/dom": "^10.3.1",
     "@testing-library/user-event": "^14.5.2",
@@ -76,11 +78,10 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.21.3",
+    "react18": "npm:react@^18.3.1",
     "rollup": "^3.29.4",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.2",
     "sinon": "^15.2.0"
   },

packages/mui-material/scripts/rollup.config.mjs

@@ -3,12 +3,13 @@ import * as url from 'url';
 import path from 'path';
 import zlib from 'zlib';
 import { promisify } from 'util';
-import nodeResolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import replace from '@rollup/plugin-replace';
 import nodeGlobals from 'rollup-plugin-node-globals';
 import { terser } from 'rollup-plugin-terser';
+import { createRequire } from 'module';
 
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 
@@ -117,6 +118,10 @@ const nestedFolder = {
       return resolveNestedImport('mui-system', importee);
     }
 
+    if (importee.indexOf('react/jsx-runtime') === 0) {
+      return createRequire(import.meta.url).resolve('react18/jsx-runtime');
+    }
+
     return undefined;
   },
 };
@@ -136,25 +141,6 @@ const babelOptions = {
 const commonjsOptions = {
   ignoreGlobal: true,
   include: /node_modules/,
-  namedExports: {
-    'node_modules/prop-types/index.js': [
-      'elementType',
-      'bool',
-      'func',
-      'object',
-      'oneOfType',
-      'element',
-    ],
-    'node_modules/react/jsx-runtime.js': ['jsx', 'jsxs'],
-    'node_modules/react-is/index.js': [
-      'ForwardRef',
-      'isFragment',
-      'isLazy',
-      'isMemo',
-      'Memo',
-      'isValidElementType',
-    ],
-  },
 };
 const nodeOptions = {
   extensions: ['.js', '.tsx', '.ts'],

packages/mui-material/test/umd/run.js

@@ -50,7 +50,7 @@ async function createApp() {
     'utf8',
   );
   index = index.replace(
-    'https://unpkg.com/@mui/material@latest/umd/material-ui.development.js',
+    'https://unpkg.com/@mui/material@5/umd/material-ui.development.js',
     umdPath,
   );
   index = index.replace(