Unable to add packages using Yarn

[shashwata27]

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

import { CircularProgress, Typography } from "@mui/joy";
import { useCountUp } from "use-count-up";

const DonutChart = ({ value }: { value: number }) => {
  const { value: value2 } = useCountUp({
    isCounting: true,
    duration: 1,
    start: 0,
    end: value,
  });

  return (
    <CircularProgress
      size="lg"
      determinate
      // value={value2 as number}
      value={value}
      sx={{
        "--CircularProgress-size": "120px",
        "--CircularProgress-progressThickness": "14px",
        "--CircularProgress-progressColor": "#51bc51",
        "--CircularProgress-trackThickness": "5px",
        "--CircularProgress-trackColor": "#ff0000",
      }}
    >
      <Typography>
        {/*{value2 as number}%*/}
        {value}
      </Typography>
    </CircularProgress>
  );
};

export default DonutChart;

installation log

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

package.json

{
  "name": "root",
  "version": "0.0.0",
  "private": true,
  "packageManager": "yarn@4.0.2",
  "type": "module",
  "workspaces": [
    "app",
    "edge",
    "scripts"
  ],
  "scripts": {
    "postinstall": "husky install && node ./scripts/postinstall.js",
    "start": "yarn workspace app start",
    "lint": "eslint --cache --report-unused-disable-directives .",
    "test": "vitest",
    "build": "yarn workspaces foreach -tiA run build",
    "deploy": "yarn workspace edge deploy"
  },
  "devDependencies": {
    "@emotion/babel-plugin": "^11.11.0",
    "@emotion/eslint-plugin": "^11.11.0",
    "@types/eslint": "^8.44.8",
    "@typescript-eslint/eslint-plugin": "^6.13.1",
    "@typescript-eslint/parser": "^6.13.1",
    "eslint": "^8.55.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "graphql": "^16.8.1",
    "happy-dom": "^12.10.3",
    "husky": "^8.0.3",
    "prettier": "^3.1.0",
    "react": "^18.2.0",
    "relay-config": "^12.0.1",
    "typescript": "~5.3.2",
    "vite": "~5.0.4",
    "vitest": "~0.34.6"
  },
  "prettier": {
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": false,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "trailingComma": "all",
    "bracketSpacing": true,
    "bracketSameLine": false,
    "arrowParens": "always",
    "endOfLine": "lf"
  },
  "dependencies": {
    "use-count-up": "^3.0.1"
  }
}

[koistya]

@shashwata27 you need to remove it from the root (/package.json) workspace and add it tothe app (/app/package.json) workspace instead:

$ yarn remove use-count-up
$ yarn workspace app add use-count-up