VSCode Prettier is not working in webapp package

[sdrejkarz]

Describe the bug

VSCode has problem with formatting using prettier. The problem exists only in webapp/* folder.

I have removed prettier-plugin-tailwindcss from webapp/.prettierrc and formatting is working, but tailwind formatting not.

As a side note: webapp-core has the same plugin, but there is no error with formatting. CLI prettier -w working fine.

Steps to reproduce

1. Go to packages/webapp/src/shared/components/auth/validateOtpForm/validateOtpForm.component.tsx
2. Change formatting
3. Try to format with prettier
4. Nothing happened

System Info

VSCode Version: 1.89.0 (Universal)

Logs

["INFO" - 11:20:11] Formatting file://*/saas-boilerplate/packages/webapp/src/shared/components/auth/loginForm/__tests__/loginForm.component.spec.tsx
["INFO" - 11:20:11] Using config file at */saas-boilerplate/packages/webapp/.prettierrc
["INFO" - 11:20:11] PrettierInstance:
{
  "modulePath": "*/saas-boilerplate/node_modules/prettier/index.cjs",
  "importResolver": {},
  "callMethodResolvers": {},
  "currentCallMethodId": 31,
  "version": "3.1.0"
}
["INFO" - 11:20:11] Using ignore file (if present) at */saas-boilerplate/.prettierignore
["INFO" - 11:20:11] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 11:20:11] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 11:20:11] Prettier Options:
{
  "filepath": "*/saas-boilerplate/packages/webapp/src/shared/components/auth/loginForm/__tests__/loginForm.component.spec.tsx",
  "parser": "typescript",
  "useTabs": false,
  "tabWidth": 2,
  "endOfLine": "lf",
  "plugins": [
    "*/saas-boilerplate/node_modules/.pnpm/@trivago+prettier-plugin-sort-imports@4.3.0_prettier@3.1.0/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/index.js",
    "*/saas-boilerplate/node_modules/.pnpm/prettier-plugin-tailwindcss@0.5.7_@trivago+prettier-plugin-sort-imports@4.3.0_prettier@3.1.0__prettier@3.1.0/node_modules/prettier-plugin-tailwindcss/dist/index.mjs"
  ],
  "tailwindFunctions": [
    "cn"
  ],
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "es5",
  "importOrder": [
    "^(path|dns|fs)/?",
    "<THIRD_PARTY_MODULES>",
    "^(__generated__|__generated|@types|app|contexts|emails|fonts|images|mocks|modules|routes|shared|tests|theme|translations)/?",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}
["ERROR" - 11:20:11] Error formatting document.
["ERROR" - 11:20:11] ENOENT: no such file or directory, mkdir '/.nx/cache'
Error: ENOENT: no such file or directory, mkdir '/.nx/cache'
    at mkdirSync (node:fs:1400:3)
    at Module._load (*/saas-boilerplate/node_modules/.pnpm/nx@19.0.1_patch_hash=kp7dxlsgbdjha3gqw56znlzome/node_modules/nx/src/native/index.js:61:7)
    at Module.require (node:internal/modules/cjs/loader:1150:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at jiti (*/saas-boilerplate/node_modules/.pnpm/jiti@1.20.0/node_modules/jiti/dist/jiti.js:1:253185)
    at */saas-boilerplate/node_modules/.pnpm/nx@19.0.1_patch_hash=kp7dxlsgbdjha3gqw56znlzome/node_modules/nx/src/native/native-bindings.js:135:29
    at evalModule (*/saas-boilerplate/node_modules/.pnpm/jiti@1.20.0/node_modules/jiti/dist/jiti.js:1:255614)
    at jiti (*/saas-boilerplate/node_modules/.pnpm/jiti@1.20.0/node_modules/jiti/dist/jiti.js:1:253542)
    at */saas-boilerplate/node_modules/.pnpm/nx@19.0.1_patch_hash=kp7dxlsgbdjha3gqw56znlzome/node_modules/nx/src/native/index.js:73:21
    at evalModule (*/saas-boilerplate/node_modules/.pnpm/jiti@1.20.0/node_modules/jiti/dist/jiti.js:1:255614)
["INFO" - 11:20:11] Formatting completed in 33ms.

Validations

• [X] Follow our Code of Conduct.
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[sdrejkarz]

After removing .nx folder and run pnpm i & pnpm saas up

["ERROR" - 13:11:20] ENOENT: no such file or directory, open '*/saas-boilerplate/node_modules/.pnpm/@nx+react@19.0.1_@babel+traverse@7.24.6_@types+node@20.12.12_js-yaml@4.1.0_nx@19.0.1_patch_ha_ykodvdfyp4nrsthwu4xxvowcmy/node_modules/@nx/react/tailwind.js'
Error: ENOENT: no such file or directory, open '*/saas-boilerplate/node_modules/.pnpm/@nx+react@19.0.1_@babel+traverse@7.24.6_@types+node@20.12.12_js-yaml@4.1.0_nx@19.0.1_patch_ha_ykodvdfyp4nrsthwu4xxvowcmy/node_modules/@nx/react/tailwind.js'
    at Object.openSync (node:fs:605:3)
    at Object.func [as openSync] (node:electron/js2c/node_init:2:2214)
    at readFileSync (node:fs:473:35)
    at t.readFileSync (node:electron/js2c/node_init:2:9771)
    at jiti (*/saas-boilerplate/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:254411)
    at */saas-boilerplate/packages/webapp/tailwind.config.ts:3:17
    at evalModule (*/saas-boilerplate/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:256443)
    at jiti (*/saas-boilerplate/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:254371)
    at */saas-boilerplate/node_modules/.pnpm/tailwindcss@3.4.3_ts-node@10.9.2_@types+node@20.12.12_typescript@5.4.5_/node_modules/tailwindcss/lib/lib/load-config.js:52:30
    at loadConfig (*/saas-boilerplate/node_modules/.pnpm/tailwindcss@3.4.3_ts-node@10.9.2_@types+node@20.12.12_typescript@5.4.5_/node_modules/tailwindcss/lib/lib/load-config.js:54:6)

[sdrejkarz]

AFAIKS there is a problem with createGlobPatternsForDependencies. Somehow it's pointing to the wrong folder (./nx/cache), but I cannot find any logs while taiwind.config.ts is executing.

[yash-sharma01]

Any update on this issue?