Convert all ReactDOM imports to import *

benchmark/browser/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { logReactMetrics } from './utils';
 

benchmark/server/scenarios/core.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import Benchmark from 'benchmark';
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { StylesProvider } from '@mui/styles';
 import ButtonBase from '@mui/material/ButtonBase';
 

benchmark/server/scenarios/docs.js

@@ -3,7 +3,7 @@ import Benchmark from 'benchmark';
 import fs from 'fs';
 import path from 'path';
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import Markdown from 'docs/data/material/getting-started/templates/blog/Markdown';
 import { createStore } from 'redux';

benchmark/server/scenarios/server.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import express from 'express';
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { SheetsRegistry } from 'jss';
 import { createTheme } from '@mui/material/styles';
 import {

benchmark/server/scenarios/styles.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import Benchmark from 'benchmark';
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import styledComponents, { ServerStyleSheet } from 'styled-components';
 import styledEmotion from '@emotion/styled';
 import { css } from '@emotion/react';

docs/data/material/components/use-media-query/use-media-query-pt.md

@@ -134,7 +134,7 @@ Finally, you need to provide an implementation of [matchMedia](https://developer
 For instance on the server-side:
 
 ```js
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import parser from 'ua-parser-js';
 import mediaQuery from 'css-mediaquery';
 import { ThemeProvider } from '@material-ui/core/styles';

docs/data/material/components/use-media-query/use-media-query-zh.md

@@ -136,7 +136,7 @@ Finally, you need to provide an implementation of [matchMedia](https://developer
 For instance on the server-side:
 
 ```js
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import parser from 'ua-parser-js';
 import mediaQuery from 'css-mediaquery';
 import { ThemeProvider } from '@mui/core/styles';

docs/data/material/components/use-media-query/use-media-query.md

@@ -144,7 +144,7 @@ Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate match
 For instance on the server-side:
 
 ```js
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import parser from 'ua-parser-js';
 import mediaQuery from 'css-mediaquery';
 import { createTheme, ThemeProvider } from '@mui/material/styles';

docs/data/material/experimental-api/classname-generator/classname-generator-pt.md

@@ -160,7 +160,7 @@ Import the initializer in `/src/index.js`.
 ```diff
 +import './MuiClassNameSetup';
  import * as React from 'react';
- import ReactDOM from 'react-dom';
+ import * as ReactDOM from 'react-dom';
  import App from './App';
 
  ReactDOM.render(<App />);

docs/data/material/experimental-api/classname-generator/classname-generator-zh.md

@@ -160,7 +160,7 @@ Import the initializer in `/src/index.js`.
 ```diff
 +import './MuiClassNameSetup';
  import * as React from 'react';
- import ReactDOM from 'react-dom';
+ import * as ReactDOM from 'react-dom';
  import App from './App';
 
  ReactDOM.render(<App />);

docs/data/material/experimental-api/classname-generator/classname-generator.md

@@ -160,7 +160,7 @@ Import the initializer in `/src/index.js`.
 ```diff
 +import './MuiClassNameSetup';
  import * as React from 'react';
- import ReactDOM from 'react-dom';
+ import * as ReactDOM from 'react-dom';
  import App from './App';
 
  ReactDOM.render(<App />);

docs/data/material/guides/server-rendering/server-rendering-pt.md

@@ -103,7 +103,7 @@ Vamos ver como isso é passado na função `renderFullPage`.
 ```jsx
 import express from 'express';
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
 import createEmotionServer from '@emotion/server/create-instance';
@@ -181,7 +181,7 @@ The client-side is straightforward. All we need to do is use the same cache conf
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
 import { CacheProvider } from '@emotion/react';

docs/data/material/guides/server-rendering/server-rendering-zh.md

@@ -107,7 +107,7 @@ With this we are creating a new Emotion cache instance and using this to extract
 ```jsx
 import express from 'express';
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { CacheProvider } from '@emotion/react';
@@ -150,7 +150,7 @@ app.use(handleRender);
 const port = 3000;
 app.listen(port); import express from 'express';
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import CssBaseline from '@mui/core/CssBaseline';
 import { ThemeProvider } from '@mui/core/styles';
 import createEmotionServer from '@emotion/server/create-instance';
@@ -220,7 +220,7 @@ The client-side is straightforward. All we need to do is use the same cache conf
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import CssBaseline from '@mui/core/CssBaseline';
 import { ThemeProvider } from '@mui/core/styles';
 import { CacheProvider } from '@emotion/react';

docs/data/material/guides/server-rendering/server-rendering.md

@@ -109,7 +109,7 @@ We will see how this is passed along in the `renderFullPage` function.
 ```jsx
 import express from 'express';
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { CacheProvider } from '@emotion/react';
@@ -186,7 +186,7 @@ Let's take a look at the client file:
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { CacheProvider } from '@emotion/react';

docs/data/styles/advanced/advanced-pt.md

@@ -363,7 +363,7 @@ export default function App() {
 This example returns a string of HTML and inlines the critical CSS required, right before it's used:
 
 ```jsx
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { ServerStyleSheets } from '@material-ui/styles';
 
 function render() {

docs/data/styles/advanced/advanced-zh.md

@@ -376,7 +376,7 @@ const jss = create({
 这个例子返回一个HTML字符串，并在使用前将所需的关键CSS内联。
 
 ```jsx
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { ServerStyleSheets } from '@mui/styles';
 
 function render() {

docs/data/styles/advanced/advanced.md

@@ -368,7 +368,7 @@ export default function App() {
 This example returns a string of HTML and inlines the critical CSS required, right before it's used:
 
 ```jsx
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { ServerStyleSheets } from '@mui/styles';
 
 function render() {

docs/data/styles/api/api-pt.md

@@ -115,7 +115,7 @@ export default function MyComponent(props) {
 Esta é uma classe auxiliar para manipular a renderização do lado do servidor. [You can follow this guide for a practical approach](/material-ui/guides/server-rendering/).
 
 ```jsx
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { ServerStyleSheets } from '@material-ui/styles';
 
 const sheets = new ServerStyleSheets();

docs/data/styles/api/api-zh.md

@@ -115,7 +115,7 @@ export default function MyComponent(props) {
 这是一个处理服务器端渲染的类助手（class helper）。 [你可以遵循本指南的实用方法](/material-ui/guides/server-rendering/)
 
 ```jsx
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { ServerStyleSheets } from '@mui/styles';
 
 const sheets = new ServerStyleSheets();

docs/data/styles/api/api.md

@@ -129,7 +129,7 @@ export default function MyComponent(props) {
 This is a class helper to handle server-side rendering. [You can follow this guide for a practical approach](/material-ui/guides/server-rendering/).
 
 ```jsx
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { ServerStyleSheets } from '@mui/styles';
 
 const sheets = new ServerStyleSheets();

docs/src/modules/components/AppSearch.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import PropTypes from 'prop-types';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';

docs/src/modules/components/DemoSandbox.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { create } from 'jss';

docs/src/modules/sandbox/CodeSandbox.test.js

@@ -53,7 +53,7 @@ describe('CodeSandbox', () => {
       },
       'index.js': {
         content:
-          "import * as React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n  <React.StrictMode>\n    <StyledEngineProvider injectFirst>\n      <Demo />\n    </StyledEngineProvider>\n  </React.StrictMode>\n);",
+          "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n  <React.StrictMode>\n    <StyledEngineProvider injectFirst>\n      <Demo />\n    </StyledEngineProvider>\n  </React.StrictMode>\n);",
       },
     });
   });
@@ -101,7 +101,7 @@ describe('CodeSandbox', () => {
       },
       'index.tsx': {
         content:
-          "import * as React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n  <React.StrictMode>\n    <StyledEngineProvider injectFirst>\n      <Demo />\n    </StyledEngineProvider>\n  </React.StrictMode>\n);",
+          "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n  <React.StrictMode>\n    <StyledEngineProvider injectFirst>\n      <Demo />\n    </StyledEngineProvider>\n  </React.StrictMode>\n);",
       },
       'tsconfig.json': {
         content:

docs/src/modules/sandbox/CodeSandbox.ts

@@ -66,7 +66,7 @@ const createJoyTemplate = (demo: {
     },
     [`index.${ext}`]: {
       content: `import * as React from 'react';
-import ReactDOM from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import { StyledEngineProvider } from '@mui/joy/styles';
 import App from './App';
 

docs/src/modules/sandbox/CreateReactApp.ts

@@ -23,7 +23,7 @@ export const getHtml = ({ title, language }: { title: string; language: string }
 export const getRootIndex = (product?: 'joy-ui' | 'base') => {
   if (product === 'joy-ui') {
     return `import * as React from 'react';
-import ReactDOM from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import { StyledEngineProvider, CssVarsProvider } from '@mui/joy/styles';
 import Demo from './demo';
 
@@ -39,7 +39,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
   }
   if (product === 'base') {
     return `import * as React from 'react';
-import ReactDOM from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import Demo from './demo';
 
 ReactDOM.createRoot(document.querySelector("#root")).render(
@@ -49,7 +49,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
 );`;
   }
   return `import * as React from 'react';
-import ReactDOM from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import { StyledEngineProvider } from '@mui/material/styles';
 import Demo from './demo';
 

docs/src/modules/sandbox/StackBlitz.test.js

@@ -36,7 +36,7 @@ describe('StackBlitz', () => {
         'demo.js':
           'import * as React from \'react\';\nimport Stack from \'@mui/material/Stack\';\nimport Button from \'@mui/material/Button\';\n\nexport default function BasicButtons() {\n  return (\n    <Stack spacing={2} direction="row">\n      <Button variant="text">Text</Button>\n      <Button variant="contained">Contained</Button>\n      <Button variant="outlined">Outlined</Button>\n    </Stack>\n  );\n}\n',
         'index.js':
-          "import * as React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n  <React.StrictMode>\n    <StyledEngineProvider injectFirst>\n      <Demo />\n    </StyledEngineProvider>\n  </React.StrictMode>\n);",
+          "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n  <React.StrictMode>\n    <StyledEngineProvider injectFirst>\n      <Demo />\n    </StyledEngineProvider>\n  </React.StrictMode>\n);",
       },
       dependencies: {
         react: 'latest',
@@ -67,7 +67,7 @@ describe('StackBlitz', () => {
         'demo.tsx':
           'import * as React from \'react\';\nimport Stack from \'@mui/material/Stack\';\nimport Button from \'@mui/material/Button\';\n\nexport default function BasicButtons() {\n  return (\n    <Stack spacing={2} direction="row">\n      <Button variant="text">Text</Button>\n      <Button variant="contained">Contained</Button>\n      <Button variant="outlined">Outlined</Button>\n    </Stack>\n  );\n}\n',
         'index.tsx':
-          "import * as React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n  <React.StrictMode>\n    <StyledEngineProvider injectFirst>\n      <Demo />\n    </StyledEngineProvider>\n  </React.StrictMode>\n);",
+          "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n  <React.StrictMode>\n    <StyledEngineProvider injectFirst>\n      <Demo />\n    </StyledEngineProvider>\n  </React.StrictMode>\n);",
         'tsconfig.json':
           '{\n  "compilerOptions": {\n    "target": "es5",\n    "lib": [\n      "dom",\n      "dom.iterable",\n      "esnext"\n    ],\n    "allowJs": true,\n    "skipLibCheck": true,\n    "esModuleInterop": true,\n    "allowSyntheticDefaultImports": true,\n    "strict": true,\n    "forceConsistentCasingInFileNames": true,\n    "module": "esnext",\n    "moduleResolution": "node",\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "noEmit": true,\n    "jsx": "react"\n  },\n  "include": [\n    "src"\n  ]\n}\n',
       },

examples/base-cra-tailwind-ts/src/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 

examples/material-cra-styled-components-ts/src/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import CssBaseline from '@mui/material/CssBaseline';
 import App from './App';
 

examples/material-cra-styled-components/src/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import CssBaseline from '@mui/material/CssBaseline';
 import App from './App';
 import * as serviceWorker from './serviceWorker';

examples/material-express-ssr/client.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { CacheProvider } from '@emotion/react';

examples/material-express-ssr/server.js

@@ -1,6 +1,6 @@
 import express from 'express';
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { CacheProvider } from '@emotion/react';

examples/material-preact/src/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import App from './App';
 
 ReactDOM.render(

examples/material-vite-ts/src/main.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import { ThemeProvider } from '@emotion/react';
 import { CssBaseline } from '@mui/material';
 import theme from './theme';

packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-actual.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import PropTypes from 'prop-types';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';

packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import PropTypes from 'prop-types';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';

packages/mui-lab/src/TabContext/TabContext.test.js

@@ -1,6 +1,6 @@
 // @ts-check
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { expect } from 'chai';
 import { createRenderer } from 'test/utils';
 import TabContext, { getPanelId, getTabId, useTabContext } from './TabContext';

packages/mui-styles/src/StylesProvider/StylesProvider.test.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { expect } from 'chai';
 import { create, SheetsRegistry } from 'jss';
 import { createMount, strictModeDoubleLoggingSupressed } from 'test/utils';

test/e2e/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import * as DomTestingLibrary from '@testing-library/dom';

test/regressions/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import webfontloader from 'webfontloader';
 import TestViewer from './TestViewer';