I have added use-count-up using yarn add use-count-up command but while building the app, it isn't running, same with any other package I try to install. My editor can pick up the documentation after the installation, but build failing.
PS C:\Users\sahas\WebstormProjects\folio> yarn install
➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 331ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 699ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 1s 369ms
PS C:\Users\sahas\WebstormProjects\folio> yarn start
Port 5173 is in use, trying another one...
VITE v5.0.4 ready in 1428 ms
➜ Local: http://localhost:5174/
➜ Network: use --host to expose
➜ press h + enter to show help
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\sahas\WebstormProjects\folio\.cache\vite-app\deps\@mui_joy.js?v=ed69177c as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\sahas\WebstormProjects\folio\.cache\vite-app\deps\chunk-2UYIKYGW.js?v=584f1ded as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\sahas\WebstormProjects\folio\.cache\vite-app\deps\@mui_icons-material.js?v=d654077a as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\sahas\WebstormProjects\folio\.cache\vite-app\deps\@mui_material.js?v=55ff3892 as it exceeds the max of 500KB.
^C^C
PS C:\Users\sahas\WebstormProjects\folio> ^C
PS C:\Users\sahas\WebstormProjects\folio> yarn add use-count-up
➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + use-count-up@npm:3.0.1, use-elapsed-time@npm:3.0.2
➤ YN0000: └ Completed in 0s 255ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 477ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0008: │ root@workspace:. must be rebuilt because its dependency tree changed
➤ YN0000: └ Completed in 12s 261ms
➤ YN0000: · Done with warnings in 13s 148ms
PS C:\Users\sahas\WebstormProjects\folio> yarn start
VITE v5.0.4 ready in 1045 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Error: The following dependencies are imported but could not be resolved:
use-count-up (imported by C:/Users/sahas/WebstormProjects/folio/app/components/DonutChart/DonutChart.tsx)
Are they installed?
at file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:64613:23
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:64020:38
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\sahas\WebstormProjects\folio\.cache\vite-app\deps\@mui_joy.js?v=73ee76c2 as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\sahas\WebstormProjects\folio\.cache\vite-app\deps\chunk-2UYIKYGW.js?v=506dd1f3 as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\sahas\WebstormProjects\folio\.cache\vite-app\deps\@mui_icons-material.js?v=e63e8347 as it exceeds the max of 500KB.
7:40:24 pm [vite] Pre-transform error: Failed to resolve import "use-count-up" from "components\DonutChart\DonutChart.tsx". Does the file exist?
7:40:24 pm [vite] Internal server error: Failed to resolve import "use-count-up" from "components\DonutChart\DonutChart.tsx". Does the file exist?
Plugin: vite:import-analysis
File: C:/Users/sahas/WebstormProjects/folio/app/components/DonutChart/DonutChart.tsx:2:27
17 | var _s = $RefreshSig$();
18 | import { CircularProgress, Typography } from "@mui/joy";
19 | import { useCountUp } from "use-count-up";
| ^
20 | const DonutChart = ({ value }) => {
21 | _s();
at formatError (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:62895:46)
at TransformContext.error (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:62889:19)
at normalizeUrl (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:61165:33)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:61315:47
at async Promise.all (index 4)
at async TransformContext.transform (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:61236:13)
at async Object.transform (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:63190:30)
at async loadAndTransform (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:48947:29)
at async viteTransformMiddleware (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:58543:32)
7:43:59 pm [vite] Internal server error: Failed to resolve import "use-count-up" from "components\DonutChart\DonutChart.tsx". Does the file exist?
Plugin: vite:import-analysis
File: C:/Users/sahas/WebstormProjects/folio/app/components/DonutChart/DonutChart.tsx:2:27
17 | var _s = $RefreshSig$();
18 | import { CircularProgress, Typography } from "@mui/joy";
19 | import { useCountUp } from "use-count-up";
| ^
20 | const DonutChart = ({ value }) => {
21 | _s();
at formatError (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:62895:46)
at TransformContext.error (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:62889:19)
at normalizeUrl (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:61165:33)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:61315:47
at async Promise.all (index 4)
at async TransformContext.transform (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:61236:13)
at async Object.transform (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:63190:30)
at async loadAndTransform (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:48947:29)
at async viteTransformMiddleware (file:///C:/Users/sahas/WebstormProjects/folio/.yarn/__virtual__/vite-virtual-c8ee08b8d1/3/AppData/Local/Yarn/Berry/cache/vite-npm-5.0.4-2cf5907a33-10.zip/node_modules/vite/dist/node/chunks/dep-4RECYSE1.js:58543:32) (x2)
s
package.json & yarn.lock got modified after installation like this
I have added use-count-up using
yarn add use-count-up
command but while building the app, it isn't running, same with any other package I try to install. My editor can pick up the documentation after the installation, but build failing.Here is the screenshots
Code
installation log
package.json & yarn.lock got modified after installation like this
package.json