ENOENT error when processing files for @nx/vite/plugin while building a Keycloak theme with keycloakify in an Nx monorepo

[ashen780]

Current Behavior

When I run the build or development command, I encounter the following error:

`An error occurred while processing files for the @nx/vite/plugin plugin.

• apps/portal/vite.config.ts: ENOENT: no such file or directory, scandir '/Users/.../node_modules/.pnpm/nx@20.4.2_@swc-node+register@1.9.2_@swc+core@1.5.29_@swc+helpers@0.5.13__@swc+types@0.1_d5e5c61938dfdd1ae4abd4223fef45ca/node_modules/.bin'
  `

Expected Behavior

I expect the Nx build process to correctly process files without throwing an ENOENT error. Specifically, creating a Keycloak theme using Keycloakify should build and serve without any file system errors.

GitHub Repo

No response

Steps to Reproduce

1. Create an Nx Monorepo:
   • Use the Nx CLI to create a new workspace:

     npx create-nx-workspace@latest my-workspace

2. Add Keycloakify Dependencies:
   • In your workspace’s package.json, add:

     "dependencies": {
       "@keycloakify/email-native": "~260007.0.0",
       "keycloakify": "11.8.14"
     }

   • Then install dependencies using your package manager (e.g., pnpm).
3. Generate a Keycloak Theme:
   • Follow Keycloakify instructions to create a new Keycloak theme within the Nx monorepo.
4. Configure the Build:
   • Ensure that the Keycloak theme build is integrated with Nx (e.g., configure vite.config.ts in the respective app).
5. Run the Build/Development Command:
   • Execute the appropriate command (e.g., nx serve [your-app-name] or nx build [your-app-name]).
   • Notice the error indicating that the .bin directory is missing within the pnpm-managed node_modules structure.

Nx Report

Node           : 22.13.1
OS             : linux-x64
Native Target  : x86_64-linux
pnpm           : 10.4.1

nx                     : 20.4.2
@nx/js                 : 20.4.2
@nx/jest               : 20.4.2
@nx/eslint             : 20.4.2
@nx/workspace          : 20.4.2
@nx/cypress            : 20.4.2
@nx/devkit             : 20.4.2
@nx/eslint-plugin      : 20.4.2
@nx/module-federation  : 20.4.2
@nx/nest               : 20.4.2
@nx/next               : 20.4.2
@nx/node               : 20.4.2
@nx/plugin             : 20.4.2
@nx/react              : 20.4.2
@nx/storybook          : 20.4.2
@nx/vite               : 20.4.2
@nx/web                : 20.4.2
@nx/webpack            : 20.4.2
typescript             : 5.7.3
---------------------------------------
Registered Plugins:
@nx/next/plugin
@nx/cypress/plugin
@nx/eslint/plugin
@nx/jest/plugin
@nx/vite/plugin
@nx/webpack/plugin
@nx/js/typescript
@nx/storybook/plugin

Failure Logs

user@LAPTOP:~/code/$ pnpm nx run backend:serve:development

 NX   Failed to process project graph.

An error occurred while processing files for the @nx/vite/plugin plugin.
  - apps/portal/vite.config.ts: ENOENT: no such file or directory, scandir '/home/.../node_modules/.pnpm/nx@20.4.2_@swc-node+register@1.9.2_@swc+core@1.5.29_@swc+helpers@0.5.13__@swc+types@0.1_d5e5c61938dfdd1ae4abd4223fef45ca/node_modules/.bin'

Package Manager Version

pnpm --version 10.4.1

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

• Workaround:
  After encountering the error, I added a postinstall script to create the missing .bin directory. This script, which is executed using ts-node, creates the directory as a workaround, and the build works as expected afterward.

  postinstall script entry in package.json:

  "postinstall": "ts-node scripts/fix-vite-dir.ts"

  scripts/fix-vite-dir.ts:

  const fs = require('fs');
  const path = require('path');
  
  const dirPath = path.join(
    __dirname,
    '..',
    'node_modules',
    '.pnpm',
    'nx@20.4.2_@swc-node+register@1.9.2_@swc+core@1.5.29_@swc+helpers@0.5.13__@swc+types@0.1_d5e5c61938dfdd1ae4abd4223fef45ca',
    'node_modules',
    '.bin',
  );
  
  // todo: support for macOS and Windows if needed
  
  if (!fs.existsSync(dirPath)) {
    fs.mkdirSync(dirPath, { recursive: true });
    console.log(`Created directory: ${dirPath}`);
  } else {
    console.log(`Directory already exists: ${dirPath}`);
  }

  This workaround resolves the ENOENT error by ensuring the required directory exists.

• The error appears to be related to the interaction between pnpm’s node_modules structure, the specific Nx version used, and the Keycloakify packages (@keycloakify/email-native and keycloakify).