Vite抱怨素材UI图标无法解析答案

【问题标题】：Vite complains that material UI icons can not be resolvedVite抱怨素材UI图标无法解析
【发布时间】：2022-07-09 07:25:43
【问题描述】：

我将我的项目从 CRA 迁移到 Vite。

当我运行 npm run dev 时，我收到此错误：

The following dependencies are imported but could not be resolved:

  @mui/icons-material/Article (imported by /Blog/Admin/Exports.jsx)
  @mui/icons-material/Comment (imported by /Social/Admin/Comment/View.jsx)
  @mui/icons-material/TextSnippet (imported by /Contents/Admin/Page/List.jsx)
  @mui/icons-material/FindInPage (imported by /Contents/Admin/Page/List.jsx)
  @mui/icons-material/AccountTree (imported by /Taxonomy/Admin/Hierarchy/Manage.jsx)
  @mui/icons-material/LocalOffer (imported by /Taxonomy/Admin/Tag/Manage.jsx)
  @mui/icons-material/NoteAlt (imported by /Forms/Admin/Form/List.jsx)
  @mui/icons-material/EventNote (imported by /Logs/Admin/Exports.jsx)
  @mui/icons-material/Navigation (imported by /Navigation/Admin/Exports.jsx)
  @mui/icons-material/Abc (imported by /Contents/Admin/Exports.jsx)
  @mui/icons-material/Fingerprint (imported by /Entities/Admin/Exports.jsx)
  @mui/icons-material/Support (imported by /Ticketing/Admin/Exports.jsx)
  @mui/icons-material/Shuffle (imported by /Entities/Admin/EntityType/List.jsx)
  @mui/icons-material/Delete (imported by /Logs/Admin/List.jsx)
  @mui/icons-material/Search (imported by /Contents/Admin/Image/List.jsx)
  @mui/icons-material/Done (imported by /Ticketing/Admin/Ticket/List.jsx)
  @mui/icons-material/SyncAlt (imported by /Accounts/Admin/User/List.jsx)
  @mui/icons-material/Error (imported by /Logs/Admin/List.jsx)
  @mui/icons-material/ListAlt (imported by /Contents/Admin/Section/List.jsx)
  @mui/icons-material/Message (imported by /Ticketing/Admin/Ticket/List.jsx)
  @mui/icons-material/Link (imported by /Navigation/Admin/LinkGroup/List.jsx)
  @mui/icons-material/Bolt (imported by /Contents/Admin/Section/List.jsx)

Are they installed?

即使我运行 npm install 然后运行 npm run dev 我也会看到此消息。

我手动进入node_modules/@mui/icons-material和cat Article.js：

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon"));

var _jsxRuntime = require("react/jsx-runtime");

var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
  d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"
}), 'Article');

exports.default = _default;

所以它就在那里。我不知道为什么它无法解决。有什么想法吗？

【问题讨论】：

标签： reactjs material-ui vite

【解决方案1】：

不知道这是否会有所帮助，但它就在这里。我收到有关本地文件的错误。相同的消息：以下依赖项已导入但无法解析。

我的解决方法是在我的文件名前添加“./”。所以“index.js”变成了“./index.js”。

希望对您有所帮助。

【讨论】：