Alias Resolution for ES Modules Fails to Infer index.ts – Causes EISDIR Error in my app

[viniciussantos45]

Current Behavior

Vite is attempting to load the directory directly instead of resolving to index.ts. This results in the error:

[vite:load-fallback] Could not load C:\Users\Vinicius\Documents\Projetos\folder\my-app\apps\web-extension\src\services\auth (imported by src/lib/axios.ts): EISDIR: illegal operation on a directory, read

Expected Behavior

When importing from an alias that points to a directory (e.g. "@/web-extension/services/auth"), Vite should automatically resolve to the index.ts file inside that directory. This behavior works for relative imports (e.g. ../services/auth), but fails when using our alias configuration.

GitHub Repo

No response

Steps to Reproduce

1. Project Structure:

   my-app/
     apps/
       web-extension/
         src/
           assets/
             styles/
               tailwind.css
           services/
             auth/
               index.ts
           lib/
             axios.ts
           pages/
             newtab/
               index.tsx
         vite.config.base.ts
      tsconfig.base.json
    
   

2. tsconfig.base.json:

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/web-extension/*": ["apps/web-extension/src/*"]
       }
     },
     "exclude": ["node_modules", "dist", "tmp", ".nx"]
   }

3. Vite Configuration (vite.config.base.ts):

    import { ManifestV3Export } from "@crxjs/vite-plugin";
    import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
    import react from "@vitejs/plugin-react";
    import { resolve } from "path";
    import { BuildOptions, defineConfig, searchForWorkspaceRoot } from "vite";
    import { crxI18n, stripDevIcons } from "./custom-vite-plugins";
    import devManifest from "./manifest.dev.json";
    import manifest from "./manifest.json";
    import pkg from "./package.json";
    
    const isDev = process.env.__DEV__ === "true";
    // set this flag to true, if you want localization support
    const localize = false;
    
    export const baseManifest = {
      ...manifest,
      version: pkg.version,
      ...(isDev ? devManifest : ({} as ManifestV3Export)),
      ...(localize
        ? {
            name: "__MSG_extName__",
            description: "__MSG_extDescription__",
            default_locale: "en",
          }
        : {}),
    } as ManifestV3Export;
    
    export const baseBuildOptions: BuildOptions = {
      sourcemap: isDev,
      emptyOutDir: !isDev,
    };
    
    export default defineConfig({
      plugins: [
        nxViteTsPaths(),
        react(),
        stripDevIcons(isDev),
        crxI18n({ localize, src: "./src/locales" }),
      ],
      resolve: {
        alias: {
          "@/web-extension/": `${searchForWorkspaceRoot(process.cwd())}/apps/web-extension/src`,
        },
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
      },
      publicDir: resolve(__dirname, "public"),
    });

4. project.json

   {
  "name": "web-extension",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/web-extension/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "nx:run-commands",
      "options": {
        "cwd": "apps/web-extension",
        "commands": [
          "vite build --config vite.config.chrome.ts"
        ]
      },
      "configurations": {
        "chrome": {
          "commands": [
            "vite build --config vite.config.chrome.ts"
          ]
        },
        "firefox": {
          "commands": [
            "vite build --config vite.config.firefox.ts"
          ]
        }
      }
    },
    "serve": {
      "executor": "nx:run-commands",
      "options": {
        "cwd": "apps/web-extension",
        "commands": [
          "nodemon --config nodemon.chrome.json"
        ]
      },
      "configurations": {
        "chrome": {
          "commands": [
            "nodemon --config nodemon.chrome.json"
          ]
        },
        "firefox": {
          "commands": [
            "nodemon --config nodemon.firefox.json"
          ]
        }
      },
      "dependsOn": []
    }
  },
  "tags": []
}

5. Usage in Code:

   In src/lib/axios.ts, we import the module like so:

   import { refreshToken } from "@/web-extension/services/auth";

   Since the folder services/auth contains an index.ts, the expected behavior is for Vite to resolve it automatically. Instead, it fails with the EISDIR error shown above.

Nx Report

Node           : 23.6.0
OS             : win32-x64
Native Target  : x86_64-windows
pnpm           : 9.15.3

nx                 : 19.6.4
@nx/js             : 19.6.4
@nx/jest           : 19.6.4
@nx/linter         : 19.6.4
@nx/eslint         : 19.6.4
@nx/workspace      : 19.6.4
@nx/devkit         : 19.6.4
@nx/eslint-plugin  : 19.6.4
@nx/nest           : 19.6.4
@nx/node           : 19.6.4
@nx/react          : 19.6.4
@nrwl/tao          : 19.6.4
@nx/vite           : 19.6.4
@nx/web            : 19.6.4
@nx/webpack        : 19.6.4
typescript         : 5.5.4
---------------------------------------
Community plugins:
nestjs-prisma : 0.23.0

Failure Logs

[vite:load-fallback] Could not load C:\Users\Vinicius\Documents\Projetos\folder\my-app\apps\web-extension\src\services\auth (imported by src/lib/axios.ts): EISDIR: illegal operation on a directory, read

Package Manager Version

9.15.3

Operating System

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

Additional Information

When building our Vite-based application in our NX monorepo (specifically in our “web-extension” project), importing from an alias that points to a directory (which contains an index.ts) fails during build. Instead of automatically resolving to index.ts, Vite attempts to load the directory, causing the following error:

[vite:load-fallback] Could not load C:\Users\Vinicius\Documents\Projetos\folder\my-app\apps\web-extension\src\services\auth (imported by src/lib/axios.ts): EISDIR: illegal operation on a directory, read

This error occurs even though our tsconfig.base.json maps "@/web-extension/*" to "apps/web-extension/src/*", and relative imports (e.g. ../services/auth) work as expected. This suggests that when using aliases, the expected fallback to index.ts is not happening.

Workarounds Tried

• Explicit Import: Importing using "@/web-extension/services/auth/index.ts" works but is not desirable.
• Relative Imports: Using relative paths like ../services/auth works, but it breaks consistency in our monorepo.
• Custom Plugin: We implemented a custom Vite plugin (indexResolverPlugin) that checks if the resolved module is a directory and appends index.ts or index.js. However, this doesn’t fully address the issue when using our alias in an NX context.
• Changing Alias Resolution: Adjusting the alias to use process.cwd() instead of __dirname avoids duplication in some cases, but the issue with the EISDIR error persists for alias-based imports.

Proposed Solution / Request

We would like guidance or a fix so that Vite correctly resolves directory aliases to their corresponding index.ts (or index.js) file in an NX monorepo setup. The resolution should behave the same as with relative imports without requiring manual modification of each import statement.

Any help or suggestions on how to resolve this alias resolution issue in this specific context would be greatly appreciated.