Skip to content

ES Modules Directory Import Not Supported #907

Open
@daichi1998928

Description

@daichi1998928

🐛 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions