无法解决从“src/components/Pie/Pie.jsx”导入“@mui/x-charts/PieChart”的问题。文件存在吗？

Question

我在pie.jsx组件中使用了piechirt

pie.jsx

import { PieChart } from '@mui/x-charts/PieChart';

const Pie = () => {
    return (
        <div>
  
    <PieChart
      series={[
        {
          data: [
            { id: 0, value: 10, label: 'series A' },
            { id: 1, value: 15, label: 'series B' },
            { id: 2, value: 20, label: 'series C' },
          ],
        },
      ]}
      width={400}
      height={200}
    />
  


        </div>
    );
};

export default Pie;

这是我的package.json：

 "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/icons-material": "^5.15.18",
    "@mui/material": "^5.15.18",
    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
    "@mui/types": "^7.2.14",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3",
    "styled-components": "^6.1.11",
    "sweetalert": "^2.1.2"

我尝试使用 Material ui 来使用饼图。但它给了我这个错误

[plugin:vite:import-analysis] Failed to resolve import "@mui/x-charts/PieChart" from "src/components/Pie/Pie.jsx". Does the file exist?
C:/projectfolder/Donation-Camping-Assin-8/src/components/Pie/Pie.jsx:1:49
15 |    window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
16 |  }
17 |  import { PieChart } from "@mui/x-charts/PieChart";
   |                            ^
18 |  const Pie = () => {
19 |    return /* @__PURE__ */ jsxDEV("div", { children: /* @__PURE__ */ jsxDEV(
    at formatError (file:///C:/projectfolder/Donation-Camping-Assin-8/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:50792:46)
    at TransformContext.error (file:///C:/projectfolder/Donation-Camping-Assin-8/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:50786:19)
    at normalizeUrl (file:///C:/projectfolder/Donation-Camping-Assin-8/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:65901:33)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///C:/projectfolder/Donation-Camping-Assin-8/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:66056:47
    at async Promise.all (index 3)
    at async TransformContext.transform (file:///C:/projectfolder/Donation-Camping-Assin-8/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:65977:13)
    at async Object.transform (file:///C:/projectfolder/Donation-Camping-Assin-8/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:51101:30)
    at async loadAndTransform (file:///C:/projectfolder/Donation-Camping-Assin-8/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:53842:29

Answer 1

根据您的package.json，

@mui/x-charts

在您的依赖项中不存在。

您应该通过运行命令来安装 MUI X Charts：

npm install @mui/x-charts

如果您使用npm，

或

yarn add @mui/x-charts

如果您使用的是纱线。