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

Question

我正在編寫一個 React 16 應用程序，我正在使用 material-ui 組件。

我像這樣導入按鈕：

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

就像官方文檔中所說的那樣： https://material-ui.com/components/buttons/

WebStorm 顯示錯誤消息：

ESLint: '@material-ui/core/Button' 導入被限制使用。 這將加載 package 的 CommonJS 版本。 修復替換為： import { Button } from "@material-ui/core";(no-restricted-imports)

當我將導入更改為：

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

消息錯誤消失。 該代碼在這兩種情況下都有效。

我想知道為什么我需要更改導入以使錯誤消失。 為什么我不能只使用 material-ui.com 本身建議的相同代碼。

我正在使用的模板使用這個.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

當您指定要導入的文件的完整路徑時，您將導入此文件。 當您使用import {Button} from '@material-ui/core'時，您讓節點選擇要用於此導入的文件。 模塊的package.json可以為單個@material-ui/core指定不同的入口點，具體取決於是使用CommonJS還是ES 模塊。