ESLint: '@material-ui/core/Button' 导入被限制使用

Question

I'm writing a React 16 application, I'm using material-ui components.

I import Button like this:

import Button from '@material-ui/core/Button';

just like it says in the official documentation: https://material-ui.com/components/buttons/

WebStorm show an error saying:

ESLint: '@material-ui/core/Button' import is restricted from being used. This loads CommonJS version of the package. To fix replace with: import { Button } from "@material-ui/core";(no-restricted-imports)

When I change the import to:

import {Button} from '@material-ui/core';

the message error goes away. The code works in both instances.

I want to know why I need to change the import for the error to disappear. why can't I just use the same code suggested by material-ui.com itself.

The template I'm using uses this .eslintrc.js

"use strict";

const fs = require("fs");
const path = require("path");

const restrictedPaths = [
  { name: "react-bootstrap" },
  { name: "@material-ui/core" }
].map(pkg =>
  fs
    .readdirSync(path.dirname(require.resolve(`${pkg.name}/package.json`)))
    .map(component => ({
      name: `${pkg.name}/${component}`,
      message: `This loads CommonJS version of the package. To fix replace with: import { ${component} } from "${pkg.name}";`
    }))
);

// TODO: Wait for https://github.com/facebook/create-react-app/pull/7036 to enable rules in react-scripts.

module.exports = {
  extends: "eslint-config-react-app",
  rules: {
    // "no-script-url": "warn",
    "jsx-a11y/anchor-is-valid": "warn",
    "no-restricted-imports": ["error", { paths: [].concat(...restrictedPaths) }]
  }
};

Answer 1

When you specify the full path to the file you want to import, then you import this file. When you use the import {Button} from '@material-ui/core' , you let node choose the file it wants to use for this import. The package.json of a module may specify different entry points for a single @material-ui/core , depending on if working with CommonJS or ES modules .