How to debug “[BABEL] Note: The code generator has deoptimised the styling of…”?

[AkimaLunar]

I have started on a new project (hence a very small codebase, few deps) and getting this Babel error on the dev server that makes it borderline unusable. The dev server takes ~10min to start up. Theoretically, nothing should be using Babel in my setup:

"devDependencies": {
    "@griffel/tag-processor": "^1.0.1",
    "@griffel/vite-plugin": "^0.1.1",
    "@microsoft/eslint-config-arbutus": "^0.0.4",
    "@playwright/test": "^1.41.2",
    "@storybook/addon-essentials": "^7.6.14",
    "@storybook/addon-interactions": "^7.6.14",
    "@storybook/addon-links": "^7.6.14",
    "@storybook/addon-onboarding": "^1.0.11",
    "@storybook/blocks": "^7.6.14",
    "@storybook/react": "^7.6.14",
    "@storybook/react-vite": "^7.6.14",
    "@storybook/test": "^7.6.14",
    "@types/node": "^20.11.17",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^7.0.1",
    "@typescript-eslint/parser": "^7.0.1",
    "@vitejs/plugin-react-swc": "^3.6.0",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "eslint-plugin-storybook": "^0.6.15",
    "hygen": "^6.2.11",
    "prettier": "^3.2.5",
    "storybook": "^7.6.14",
    "typescript": "^5.3.3",
    "vite": "^5.1.1",
    "vite-plugin-pwa": "^0.18.1"
}

I have vite, @vitejs/plugin-react-swc and vite-plugin-pwa. None of these have a dependency on Babel. Storybook needs Babel, but how would that bleed into Vite’s dev server?

Any ideas on how to debug this?

I don’t think a repro can be feasible in this case, without cloning the whole application. Hence posting this as a Q&A discussion. I saw that other people posted this issue, but the issues were closed because there was no repro.

I am not using any of the packages mentioned in those issues like @vitejs/plugin-legacy or @vitejs/plugin-react. vite-plugin-pwa doesn’t have a dep on Babel either.

---

Here is the exact error, for reference (removed username in path):

[BABEL] Note: The code generator has deoptimised the styling of .../app/node_modules/.vite/deps/chunk-KDWZNFJ2.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of .../app/node_modules/.vite/deps/chunk-KDWZNFJ2.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of .../app/node_modules/.vite/deps/chunk-KDWZNFJ2.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of .../app/node_modules/.vite/deps/chunk-KDWZNFJ2.js as it exceeds the max of 500KB.

[AkimaLunar]

Cause found, it was actually the @griffel/vite-plugin plugin. Posted this issue in the discussion there. Does vite-plugin have a dependency on Babel? #523.

[artemis-prime]

How is this an answer?? Please clarify if there is a solution or what ...