ES Modules Directory Import Not Supported

🐛 Build Error: ES Modules Directory Import Not Supported

Problem Description

pnpm build fails with ES Modules directory import error when building the project.

Error Details

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/path/to/devtools/packages/ui/theme' is not supported resolving ES modules imported from /path/to/devtools/packages/ui/uno.config.ts

Steps to Reproduce

1. Clone the repository
2. Run pnpm install
3. Run pnpm build
4. Observe the build failure

Expected vs Actual Behavior

Expected: The build should complete successfully without errors.

Actual: Build fails with directory import error due to missing file extensions in TypeScript import statements.

Environment Information

• Node.js: v23.11.0
• pnpm: 10.7.0
• OS: Mac OS 15.5

Root Cause Analysis

ES Modules require explicit file extensions in import statements, but some imports in the codebase are missing .ts extensions, particularly in the UI package's theme configuration.

Proposed Solution

1. Update TypeScript Configuration

Add the following options to tsconfig.json:

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "noEmit": true
  }
}

2. Fix Import Statements

Update import statements to include explicit .ts extensions where needed, especially in:

• packages/ui/theme/ directory imports
• Related TypeScript module imports

Impact

This affects the build pipeline and prevents successful compilation of the packages. The issue is related to ES Modules import resolution in TypeScript configuration.

Start by running pnpm build after installing dependencies to reproduce the failure. Inspect packages/ui/uno.config.ts, the packages/ui/theme/ directory, and the relevant tsconfig.json settings; done means the build completes without the reported directory-import error.