Vite抱怨Material UI图标无法解析

Question

我将我的项目从 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;

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

Answer 1

我收到有关本地文件的错误。相同的消息：

以下依赖项已导入但无法解析。

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