6

I'd like to block imports directly from the root of a dependency (@material-ui/icons) in my application, as well as enforce tree-shaking.

Valid - import AccessAlarmIcon from "@material-ui/icons/AccessAlarm";

Invalid - import AccessAlarmIcon from "@material-ui/icons/";

Material-ui has a good guide on setting up tree-shaking, but it does not enforce the no-root rule above.

rules: {
    "no-restricted-imports": [
      "error",
      {
        "patterns": ["@material-ui/*/*/*", "!@material-ui/core/test-utils/*"],
        "message": "Tree-shaking is enforced for @material-ui, import dependencies "
      }
    ]
}

Will just adding "@material-ui/*" as a pattern solve my issue?

Vel
  • 9,027
  • 6
  • 34
  • 66
Yanis
  • 81
  • 5

1 Answers1

1

The following no-restricted-imports rule blocks imports from @material-ui/icons as described in the Material UI Guide.

rules: {
"no-restricted-imports": [
  "error",
  {
    "paths": ["@material-ui/icons"],
    "patterns": ["@material-ui/*/*/*", "!@material-ui/core/test-utils/*"],
  }
]

}

"patterns": ["@material-ui/icons", "!@material-ui/icons/*"] did not have the desired effect and imports from @material-ui/icons/* were also blocked. Here is a description of the cause Eslint no-restricted-imports only restrict importing from a package root?

mfe
  • 11
  • 1