Failed to resolve import "@mui/x-charts/PieChart" from "src/components/Pie/Pie.jsx". Does the file exist?

Question

I have used piechirt in pie.jsx component

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;

this is my 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"

I have tried to use pie chart using material ui .but it give me this error

[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

According to your package.json, @mui/x-charts does not exist in your dependencies.

You should install MUI X Charts by running command:

npm install @mui/x-charts if you are using npm,

or

yarn add @mui/x-charts if you are using yarn.