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

Posted 2023-02-22

【中文标题】ESLint: \'@material-ui/core/Button\' 导入被限制使用

【英文标题】：ESLint: '@material-ui/core/Button' import is restricted from being usedESLint: '@material-ui/core/Button' 导入被限制使用

【发布时间】：2020-10-24 01:50:01

【问题描述】：

我正在编写一个 React 16 应用程序，我正在使用 material-ui 组件。

我这样导入按钮：

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

正如官方文档中所说：https://material-ui.com/components/buttons/

WebStorm 显示错误提示：

ESLint: '@material-ui/core/Button' 导入被限制使用。这会加载包的 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) ]
  
;

【参考方案1】：

当您指定要导入的文件的完整路径时，您将导入此文件。当您使用import Button from '@material-ui/core' 时，您让节点选择它要用于此导入的文件。模块may specify different entry points 的package.json 用于单个@material-ui/core，取决于是使用CommonJS 还是ES 模块。