search

yarnpkg / berry

📦🐈 Active development trunk for Yarn ⚒
https://yarnpkg.com
BSD 2-Clause "Simplified" License
7.37k stars 1.1k forks source link

[Bug?]: `yarn run start` with `react-scripts` takes 90s to start on a small project #5454

Open milosrs opened 1 year ago

milosrs commented 1 year ago

Self-service

Describe the bug

Yarn v3.5.1 is taking a really long time to start up a project with react scripts. I'm not sure if the root cause is react-scripts but we have tried other package managers. For example, pnpm takes only 30s to start the project.

I have tried different compression levels, different options for caching. Nothing helps. I have also tried switching to nodeLinker: node-modules, but the behavior is the same.

To reproduce

.yarnrc.yml

compressionLevel: mixed

enableColors: true

enableGlobalCache: true

enableHyperlinks: true

nodeLinker: pnp

plugins:
    - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
      spec: 'https://mskelton.dev/yarn-outdated/v3'
    - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
      spec: '@yarnpkg/plugin-typescript'

pnpEnableEsmLoader: false

yarnPath: .yarn/releases/yarn-3.5.1.cjs

Not full package.json but the parts that you will need:

{
    "dependencies": {
        "@azure/msal-browser": "^2.36.0",
        "@azure/msal-react": "^1.5.6",
        "@deck.gl/layers": "^8.9.9",
        "@deck.gl/react": "^8.9.9",
        "@egjs/hammerjs": "^2.0.17",
        "@emotion/react": "^11.10.5",
        "@emotion/styled": "^11.10.5",
        "@material-ui/core": "^4.12.4",
        "@material-ui/icons": "^4.11.3",
        "@mui/base": "^5.0.0-beta.0",
        "@mui/icons-material": "^5.11.16",
        "@mui/lab": "^5.0.0-alpha.127",
        "@mui/material": "^5.12.1",
        "@mui/system": "^5.12.3",
        "@mui/x-date-pickers": "^6.2.1",
        "@react-querybuilder/material": "6.3.0",
        "@react-three/drei": "^9.65.5",
        "@react-three/fiber": "^8.12.2",
        "@reduxjs/toolkit": "^1.9.5",
        "@remix-run/router": "^1.6.1",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^14.0.0",
        "@testing-library/user-event": "^14.4.3",
        "CBuffer": "^2.2.0",
        "axios": "^1.3.6",
        "component-emitter": "^1.3.0",
        "d3-request": "^1.0.6",
        "d3-scale": "^4.0.2",
        "dayjs": "^1.11.7",
        "deck.gl": "^8.9.9",
        "fast-deep-equal": "^3.1.3",
        "gapi-script": "^1.2.0",
        "history": "^5.3.0",
        "jwt-decode": "^3.1.2",
        "lodash": "^4.17.21",
        "mapbox-gl": "^2.14.1",
        "maplibre-gl": "^2.4.0",
        "materialui-daterange-picker": "^1.1.92",
        "notistack": "^3.0.1",
        "postcss-normalize": "^10.0.1",
        "react": "^18.2.0",
        "react-checkbox-tree": "^1.8.0",
        "react-dom": "^18.2.0",
        "react-draggable": "^4.4.5",
        "react-idle-timer": "^5.6.2",
        "react-map-gl": "^7.0.23",
        "react-player": "^2.12.0",
        "react-querybuilder": "6.3.0",
        "react-redux": "^8.0.5",
        "react-resizable": "^3.0.5",
        "react-router-dom": "^6.10.0",
        "react-scripts": "5.0.1",
        "react-social-login-buttons": "^3.6.1",
        "react-sparklines": "^1.7.0",
        "storybook": "^7.0.7",
        "three": "latest",
        "ts-pattern": "^4.2.2",
        "typescript": "^5.0.4",
        "uuid": "^9.0.0",
        "vis-data": "^7.1.6",
        "vis-timeline": "^7.7.2",
        "vis-util": "^5.0.3",
        "web-vitals": "^3.3.1",
        "worker-loader": "^3.0.8"
    },
    "scripts": {
        "format": "prettier -w \"src/**/*.{ts,tsx,css,scss}\"",
        "lint": "eslint './src/**.{ts,tsx,js,jsx}' --format visualstudio",
        "stylelint": "npx stylelint '**/*.{css,sass,scss}'",
        "lint:fix": "eslint -c eslint.config.js 'src/**/*.{ts,tsx,js,jsx}' --fix",
        "stylelint:fix": "npx stylelint '**/*.{css,sass,scss,css}' --fix",
        "format:check": "prettier --single-quote --list-different \"src/**/*.{ts,tsx,scss,css}\"",
        "predeploy": "yarn run format && yarn run lint:fix && yarn run stylelint:fix",
        "git-info": "node src/gitInfo.js",
        "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
        "start:local": "yarn run git-info && sh -ac '. ./.env.development.local; react-scripts start'",
        "build": "sh -ac '. ./.env${REACT_APP_ENV}; yarn react-scripts build'",
        "build:dev": "yarn git-info && REACT_APP_ENV=.development.v2 yarn build",
        "build-dev-v2": "yarn run git-info && REACT_APP_ENV=.development.v2 yarn build",
        "build:magna": "yarn git-info && REACT_APP_ENV=.production.magna yarn build",
        "build:valeo": "yarn git-info && REACT_APP_ENV=.production.valeo yarn build",
        "build:staging": "yarn run git-info && REACT_APP_ENV=.staging yarn build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "storybook": "storybook dev",
        "build-storybook": "storybook build"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ],
        "overrides": [
            {
                "files": [
                    "**/*.stories.*"
                ],
                "rules": {
                    "import/no-anonymous-default-export": "off"
                }
            }
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all",
            "not safari < 10",
            "not chrome < 51",
            "not android < 5",
            "not ie < 12"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@eslint/eslintrc": "^2.0.3",
        "@react-spring/core": "^9.7.2",
        "@storybook/addon-actions": "^7.0.7",
        "@storybook/addon-essentials": "^7.0.7",
        "@storybook/addon-interactions": "^7.0.7",
        "@storybook/addon-links": "^7.0.7",
        "@storybook/addon-mdx-gfm": "^7.0.7",
        "@storybook/addon-postcss": "^2.0.0",
        "@storybook/cli": "latest",
        "@storybook/node-logger": "^7.0.7",
        "@storybook/preset-create-react-app": "^7.0.7",
        "@storybook/react": "^7.0.7",
        "@storybook/react-webpack5": "^7.0.7",
        "@storybook/testing-library": "^0.1.0",
        "@testing-library/dom": "^9.2.0",
        "@types/d3-request": "^1.0.6",
        "@types/d3-scale": "^4.0.3",
        "@types/gapi": "^0.0.44",
        "@types/hammerjs": "^2.0.41",
        "@types/jest": "^29.5.1",
        "@types/jwt-decode": "^3.1.0",
        "@types/lodash": "^4.14.194",
        "@types/mapbox-gl": "^2.7.10",
        "@types/maplibre-gl": "^1.14.0",
        "@types/node": "latest",
        "@types/offscreencanvas": "^2019.7.0",
        "@types/react": "^18.0.38",
        "@types/react-dom": "^18.0.0",
        "@types/react-map-gl": "^6.1.3",
        "@types/react-redux": "^7.1.25",
        "@types/react-resizable": "^3.0.4",
        "@types/react-sparklines": "^1.7.2",
        "@types/three": "latest",
        "@typescript-eslint/eslint-plugin": "^5.59.0",
        "@typescript-eslint/eslint-plugin-tslint": "^5.59.0",
        "@typescript-eslint/parser": "^5.59.0",
        "axios-mock-adapter": "^1.21.4",
        "babel-plugin-named-exports-order": "^0.0.2",
        "body-parser": "^1.20.2",
        "csstype": "^3.1.2",
        "d3-dsv": "^3.0.1",
        "d3-time": "^3.1.0",
        "eslint": "^8.39.0",
        "eslint-config-prettier": "^8.8.0",
        "eslint-config-react-app": "^7.0.1",
        "eslint-plugin-es": "^4.1.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jest": "^27.1.6",
        "eslint-plugin-jsx-a11y": "^6.6.1",
        "eslint-plugin-prefer-arrow": "^1.2.3",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.31.11",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-unused-imports": "^2.0.0",
        "fsevents": "^2.3.2",
        "hammerjs": "^2.0.8",
        "jest": "^29.3.1",
        "mime": "^3.0.0",
        "moment": "^2.29.4",
        "postcss": "^8.4.23",
        "postcss-scss": "^4.0.6",
        "prettier": "^2.8.8",
        "prettier-plugin-organize-imports": "^3.2.1",
        "prop-types": "^15.8.1",
        "qs": "^6.11.2",
        "redux": "^4.2.1",
        "sass": "^1.62.0",
        "sass-loader": "^13.2.2",
        "scheduler": "^0.23.0",
        "stylelint": "^15.6.0",
        "stylelint-config-prettier-scss": "^0.0.1",
        "stylelint-config-sass-guidelines": "^10.0.0",
        "stylelint-config-standard": "^33.0.0",
        "stylelint-config-standard-scss": "^9.0.0",
        "sugarss": "^4.0.1",
        "supports-color": "^9.3.1",
        "webpack": "^5.80.0"
    },
    "packageManager": "yarn@3.5.1"
}

Environment

System:
    OS: Linux 5.19 Ubuntu 22.04 LTS 22.04 (Jammy Jellyfish)
    CPU: (4) x64 AMD EPYC 7R13 Processor
  Binaries:
    Node: 18.12.1 - /tmp/xfs-dec5e1bd/node
    Yarn: 3.5.1 - /tmp/xfs-dec5e1bd/yarn
    npm: 8.19.2 - /usr/local/bin/npm

Additional context

This is my output when running yarn.


➤ YN0000: ┌ Resolution step
➤ YN0002: │ @deck.gl/geo-layers@npm:8.9.15 [99393] doesn't provide @loaders.gl/gltf (pc199a), requested by @luma.gl/experimental
➤ YN0002: │ @deck.gl/geo-layers@npm:8.9.15 [99393] doesn't provide @loaders.gl/images (p01704), requested by @luma.gl/experimental
➤ YN0002: │ @deck.gl/geo-layers@npm:8.9.15 [99393] doesn't provide @luma.gl/engine (paf62e), requested by @luma.gl/experimental
➤ YN0002: │ @deck.gl/geo-layers@npm:8.9.15 [99393] doesn't provide @luma.gl/gltools (p93a54), requested by @luma.gl/experimental
➤ YN0002: │ @deck.gl/geo-layers@npm:8.9.15 [99393] doesn't provide @luma.gl/shadertools (pf1ccc), requested by @luma.gl/experimental
➤ YN0002: │ @deck.gl/geo-layers@npm:8.9.15 [99393] doesn't provide @luma.gl/webgl (p28510), requested by @luma.gl/experimental
➤ YN0002: │ @deck.gl/mesh-layers@npm:8.9.15 [99393] doesn't provide @loaders.gl/images (pe9386), requested by @luma.gl/experimental
➤ YN0002: │ @deck.gl/mesh-layers@npm:8.9.15 [99393] doesn't provide @luma.gl/engine (pce307), requested by @luma.gl/experimental
➤ YN0002: │ @deck.gl/mesh-layers@npm:8.9.15 [99393] doesn't provide @luma.gl/gltools (pf388d), requested by @luma.gl/experimental
➤ YN0002: │ @deck.gl/mesh-layers@npm:8.9.15 [99393] doesn't provide @luma.gl/webgl (p0bf9a), requested by @luma.gl/experimental
➤ YN0002: │ @storybook/addon-postcss@npm:2.0.0 doesn't provide webpack (pb2910), requested by css-loader
➤ YN0002: │ @storybook/addon-postcss@npm:2.0.0 doesn't provide webpack (pec374), requested by postcss-loader
➤ YN0002: │ @storybook/addon-postcss@npm:2.0.0 doesn't provide webpack (pe4518), requested by style-loader
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.12 [67bdf] doesn't provide react-refresh (pf782a), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.12 [67bdf] doesn't provide typescript (p78ba6), requested by @storybook/react-docgen-typescript-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.12 [67bdf] doesn't provide webpack (p09c0c), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.12 [67bdf] doesn't provide webpack (p1d6d2), requested by @storybook/react-docgen-typescript-plugin
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @loaders.gl/core (pd7a49), requested by @deck.gl/carto
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @loaders.gl/core (p60c4a), requested by @deck.gl/geo-layers
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @loaders.gl/core (pbf98c), requested by @deck.gl/layers
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @luma.gl/constants (p65042), requested by @deck.gl/extensions
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @luma.gl/constants (pfec9d), requested by @deck.gl/google-maps
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @luma.gl/core (p1040c), requested by @deck.gl/aggregation-layers
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @luma.gl/core (pa31c6), requested by @deck.gl/extensions
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @luma.gl/core (p65dec), requested by @deck.gl/geo-layers
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @luma.gl/core (p70827), requested by @deck.gl/google-maps
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @luma.gl/core (pbf04c), requested by @deck.gl/layers
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @luma.gl/core (pdba96), requested by @deck.gl/mesh-layers
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @math.gl/core (p8d4ab), requested by @deck.gl/extensions
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @math.gl/core (p25e96), requested by @deck.gl/google-maps
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @math.gl/web-mercator (pe8522), requested by @deck.gl/extensions
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide @types/react (pa05dd), requested by @deck.gl/react
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide gl-matrix (p38940), requested by @deck.gl/extensions
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide react (p3df33), requested by @deck.gl/react
➤ YN0002: │ deck.gl@npm:8.9.15 doesn't provide react-dom (p47dbb), requested by @deck.gl/react
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [67bdf] doesn't provide @babel/plugin-syntax-flow (p2165e), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [67bdf] doesn't provide @babel/plugin-transform-react-jsx (p70d40), requested by eslint-plugin-flowtype
➤ YN0002: │ notistack@npm:3.0.1 [67bdf] doesn't provide csstype (p4f3e4), requested by goober
➤ YN0002: │ my-project@workspace:. doesn't provide @babel/core (pde5db), requested by @storybook/preset-create-react-app
➤ YN0002: │ my-project@workspace:. doesn't provide @deck.gl/core (pcc7f0), requested by @deck.gl/layers
➤ YN0002: │ my-project@workspace:. doesn't provide @deck.gl/core (p94869), requested by @deck.gl/react
➤ YN0002: │ my-project@workspace:. doesn't provide @loaders.gl/core (pc0481), requested by @deck.gl/layers
➤ YN0002: │ my-project@workspace:. doesn't provide @luma.gl/core (p2c36f), requested by @deck.gl/layers
➤ YN0060: │ my-project@workspace:. provides @types/react (p4e5ca) with version 18.2.6, which doesn't satisfy what @material-ui/icons requests
➤ YN0060: │ my-project@workspace:. provides @types/react (p77d74) with version 18.2.6, which doesn't satisfy what @material-ui/core and some of its descendants request
➤ YN0002: │ my-project@workspace:. doesn't provide browserslist (pfc71b), requested by postcss-normalize
➤ YN0002: │ my-project@workspace:. doesn't provide keycharm (p1f38e), requested by vis-timeline
➤ YN0002: │ my-project@workspace:. doesn't provide propagating-hammerjs (pe5ae4), requested by vis-timeline
➤ YN0060: │ my-project@workspace:. provides react (pfcaa5) with version 18.2.0, which doesn't satisfy what @material-ui/icons requests
➤ YN0060: │ my-project@workspace:. provides react (pebff7) with version 18.2.0, which doesn't satisfy what @material-ui/core and some of its descendants request
➤ YN0060: │ my-project@workspace:. provides react (pfea06) with version 18.2.0, which doesn't satisfy what materialui-daterange-picker requests
➤ YN0060: │ my-project@workspace:. provides react-dom (p6257c) with version 18.2.0, which doesn't satisfy what @material-ui/icons requests
➤ YN0060: │ my-project@workspace:. provides react-dom (p90391) with version 18.2.0, which doesn't satisfy what @material-ui/core and some of its descendants request
➤ YN0060: │ my-project@workspace:. provides react-dom (p21c80) with version 18.2.0, which doesn't satisfy what materialui-daterange-picker requests
➤ YN0060: │ my-project@workspace:. provides stylelint (ped757) with version 15.6.2, which doesn't satisfy what stylelint-config-prettier-scss and some of its descendants request
➤ YN0002: │ my-project@workspace:. doesn't provide tslint (pab5af), requested by @typescript-eslint/eslint-plugin-tslint
➤ YN0060: │ my-project@workspace:. provides typescript (pe8bf8) with version 5.0.4, which doesn't satisfy what react-scripts and some of its descendants request
➤ YN0002: │ my-project@workspace:. doesn't provide xss (p479b3), requested by vis-timeline

This is my output when starting the project:

danielrsantana commented 9 months ago

Any news on this one?

Running on 4.0.2, React 18.2.0 and it's taking even longer than 90 seconds.

{
 (...),
  "scripts": {
    "start": "yarn react-scripts start",
    (...),
  },
  "dependencies": {
    "@auth0/auth0-react": "^2.2.4",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.0",
    "@mui/lab": "^5.0.0-alpha.156",
    "@mui/material": "^5.15.0",
    "@mui/styles": "^5.15.0",
    "@mui/system": "^5.15.0",
    "@mui/x-date-pickers": "^6.18.5",
    "axios": "^1.6.2",
    "chart.js": "^4.4.1",
    "clsx": "^2.0.0",
    "date-fns": "^2.30.0",
    "depcheck": "^1.4.7",
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "nanoid": "^5.0.4",
    "nprogress": "^0.2.0",
    "react": "^18.2.0",
    "react-audio-voice-recorder": "^2.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-custom-scrollbars-2": "^4.5.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^2.0.3",
    "react-router-dom": "^6.21.0",
    "react-scripts": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.23.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-syntax-flow": "^7.23.3",
    "@babel/plugin-transform-react-jsx": "^7.23.4",
    "@types/node": "^20.10.4",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "env-cmd": "^10.1.0",
    "eslint": "^8.55.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^3.1.1",
    "typescript": "^5.2.9"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "packageManager": "yarn@4.0.2"
}