Skip to content

Conversation

@mj12albert
Copy link
Member

@mj12albert mj12albert commented Feb 15, 2023

Closes #36198

This PR updates the eslint no-restricted-syntax rule to enforce import * as ReactDOM (react-dom, react-dom/client, react-dom/server) and give an error for:

  • default imports (import ReactDOM from 'react-dom')
  • named imports (import { createPortal } from 'react-dom')

Example lint step: https://app.circleci.com/pipelines/github/mui/material-ui/91534/workflows/63fb99e1-8ccd-4c53-9106-401ead3f8c2d/jobs/485842/parallel-runs/0/steps/0-108

@mj12albert mj12albert added the internal Behind-the-scenes enhancement. Formerly called “core”. label Feb 15, 2023
.eslintrc.js Outdated
{
message:
"Do not import default from ReactDOM. Use a namespace import (import * as ReactDOM from 'react-dom';) instead.",
selector: 'ImportDeclaration[source.value="react-dom"] ImportDefaultSpecifier',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

selector: 'ImportDeclaration[source.value=/^react-dom(\\u002F(server|client))?$/] ImportDefaultSpecifier' – this could work with only one additional entry using a regex but its clearer to separate out all the error messages

@mj12albert mj12albert marked this pull request as ready for review February 15, 2023 16:23
@mj12albert mj12albert requested a review from a team February 15, 2023 16:23
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 15, 2023
@mj12albert mj12albert force-pushed the core/react-dom-import branch from 12edb1f to 14845dd Compare February 15, 2023 19:29
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 15, 2023
@@ -1,7 +1,7 @@
import * as React from 'react';
import { createPortal } from 'react-dom';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd replace lines like this one with a namespace import as well to be consistent.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I missed these kinds of imports, let me see if eslint can find them too

@mj12albert mj12albert force-pushed the core/react-dom-import branch from 14845dd to 88c3d1c Compare February 16, 2023 11:10
Copy link
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Looks good!

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 16, 2023
@mj12albert mj12albert force-pushed the core/react-dom-import branch from b823dc5 to 6ebf94e Compare February 16, 2023 17:09
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 16, 2023
@mj12albert mj12albert merged commit 03c2b26 into mui:master Feb 16, 2023
@mj12albert mj12albert deleted the core/react-dom-import branch February 16, 2023 18:18
@@ -1,10 +1,10 @@
import { createContext } from 'react';
import * as React from 'react';
Copy link
Member

@oliviertassinari oliviertassinari Feb 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This case is interesting. I think that the initial problem was that:

import ReactDOMServer from 'react-dom/server';

is wrong because React plans to no longer export default facebook/react#18102.

This change goes after something else but why not.

@oliviertassinari oliviertassinari added the scope: code-infra Involves the code-infra product (https://www.notion.so/mui-org/5562c14178aa42af97bc1fa5114000cd). label Jul 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

internal Behind-the-scenes enhancement. Formerly called “core”. scope: code-infra Involves the code-infra product (https://www.notion.so/mui-org/5562c14178aa42af97bc1fa5114000cd).

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[core] Update and enforce import * as ReactDOM

4 participants