[core] Enforce namespace import for ReactDOM (mui#36208)

.eslintrc.js

@@ -167,8 +167,27 @@ module.exports = {
       ...baseStyleRules['no-restricted-syntax'],
       {
         message:
-          "Do not import default from React. Use a namespace import (import * as React from 'react';) instead.",
-        selector: 'ImportDeclaration[source.value="react"] ImportDefaultSpecifier',
+          "Do not import default or named exports from React. Use a namespace import (import * as React from 'react';) instead.",
+        selector:
+          'ImportDeclaration[source.value="react"] ImportDefaultSpecifier, ImportDeclaration[source.value="react"] ImportSpecifier',
+      },
+      {
+        message:
+          "Do not import default or named exports from ReactDOM. Use a namespace import (import * as ReactDOM from 'react-dom';) instead.",
+        selector:
+          'ImportDeclaration[source.value="react-dom"] ImportDefaultSpecifier, ImportDeclaration[source.value="react-dom"] ImportSpecifier',
+      },
+      {
+        message:
+          "Do not import default or named exports from ReactDOM. Use a namespace import (import * as ReactDOM from 'react-dom/client';) instead.",
+        selector:
+          'ImportDeclaration[source.value="react-dom/client"] ImportDefaultSpecifier, ImportDeclaration[source.value="react-dom/client"] ImportSpecifier',
+      },
+      {
+        message:
+          "Do not import default or named exports from ReactDOMServer. Use a namespace import (import * as ReactDOM from 'react-dom/server';) instead.",
+        selector:
+          'ImportDeclaration[source.value="react-dom/server"] ImportDefaultSpecifier, ImportDeclaration[source.value="react-dom/server"] ImportSpecifier',
       },
     ],
 

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/joy/getting-started/templates/order-dashboard/useScript.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 
 export type UseScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
 
@@ -19,7 +19,7 @@ function getScriptNode(src: string) {
 }
 
 function useScript(src: string): UseScriptStatus {
-  const [status, setStatus] = useState<UseScriptStatus>(() => {
+  const [status, setStatus] = React.useState<UseScriptStatus>(() => {
     if (typeof window === 'undefined') {
       // SSR Handling - always return 'loading'
       return 'loading';
@@ -28,7 +28,7 @@ function useScript(src: string): UseScriptStatus {
     return cachedScriptStatuses[src] ?? 'loading';
   });
 
-  useEffect(() => {
+  React.useEffect(() => {
     const cachedScriptStatus = cachedScriptStatuses[src];
     if (cachedScriptStatus === 'ready' || cachedScriptStatus === 'error') {
       // If the script is already cached, set its status immediately

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 * as ReactDOM 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';
@@ -309,7 +309,7 @@ export default function AppSearch() {
         </Shortcut>
       </SearchButton>
       {isOpen &&
-        createPortal(
+        ReactDOM.createPortal(
           <DocSearchModal
             initialQuery={initialQuery}
             appId={'TZGZ85B9TB'}

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/base-cra-ts/src/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import App from './App';
 
 const rootElement = document.getElementById('root');
-const root = createRoot(rootElement!);
+const root = ReactDOM.createRoot(rootElement!);
 
 root.render(<App />);

examples/joy-cra-ts/src/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import App from './App';
 
 const rootElement = document.getElementById('root');
-const root = createRoot(rootElement!);
+const root = ReactDOM.createRoot(rootElement!);
 
 root.render(<App />);