ESM Import Failure in v4.0.1 - "Component" export not found

[hnviradiya]

🐛 Bug Report: ESM Import Failure in v4.0.1 - "Component" export not found

Environment

• vue-facing-decorator version: 4.0.1 (regression from 3.0.4)
• Vue version: 3.5.18
• Node.js version: 22.12.0
• TypeScript version: 5.8.3
• Project setup: ESM ("type": "module" in package.json)
• Build tools: NestJS + Vite
• OS: Windows 11

Problem Description

After upgrading from vue-facing-decorator v3.0.4 to v4.0.1, ESM imports fail at runtime with:

SyntaxError: The requested module 'vue-facing-decorator' does not provide an export named 'Component'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:180:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:263:5)

This occurs despite:

• ✅ TypeScript compilation succeeding
• ✅ Exports being correctly declared in package.json
• ✅ Same code working perfectly in v3.0.4

Root Cause Analysis

The issue is in the v4.0.1 package configuration:

1. Package declares "type": "commonjs" but ships ESM files with export statements
2. ESM export resolution conflict: When Node.js tries to resolve the ESM import in a "type": "module" project, it fails due to package type mismatch
3. v3.0.4 worked perfectly with identical project configuration

Expected Behavior

import { Component, toNative, Vue } from 'vue-facing-decorator';

Should work in ESM projects just like it did in v3.0.4.

Actual Behavior

Runtime error during module resolution, despite successful TypeScript compilation.

Minimal Reproduction

Project Setup

package.json (relevant parts):

{
  "type": "module",
  "dependencies": {
    "vue-facing-decorator": "4.0.1",
    "vue": "3.5.18"
  }
}

Component File

import { Component, toNative, Vue } from 'vue-facing-decorator';

@Component({})
class TestComponent extends Vue {
  data = 'test';
}

export default toNative(TestComponent);

Error Output

C:\Projects\test\component.ts:1
import { Component, toNative, Vue } from 'vue-facing-decorator';
         ^
SyntaxError: The requested module 'vue-facing-decorator' does not provide an export named 'Component'

Investigation Results

CommonJS Exports Work

node -e "console.log(Object.keys(require('vue-facing-decorator')))"
# Output: ['ComponentBase', 'Component', 'Setup', 'Ref', 'Watch', 'Prop', ...]

ESM Imports Fail

node --input-type=module -e "import('vue-facing-decorator').then(mod => console.log(Object.keys(mod)))"
# SyntaxError: Unexpected token 'export'

Package Configuration Issue

The problem is in node_modules/vue-facing-decorator/package.json:

{
  "type": "commonjs",  // ← This conflicts with ESM files
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js", 
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",  // ← ESM file with export statements  
      "require": "./dist/cjs/index.js"
    }
  }
}

The ESM files at dist/esm/index.js contain export statements:

export { ComponentBase, ComponentBase as Component } from './component';
export { decorator as Setup } from './option/setup';
// ... more exports

But since the package declares "type": "commonjs", Node.js treats these as CommonJS files and fails to parse the export statements.

Version Comparison

v3.0.4 (Working)

• ✅ ESM imports work correctly
• ✅ All decorators available
• ✅ No module resolution issues

v4.0.1 (Broken)

• ❌ ESM imports fail at runtime
• ❌ Module resolution errors
• ✅ TypeScript compilation still works (uses .d.ts files)

Changelog Investigation

From the v4.0.0-beta.1 changelog:

• "Output into new dist structure" - Output ESM into dist/esm, CommonJS into dist/cjs

This restructuring introduced the packaging bug where ESM files are incorrectly configured.

Temporary Workarounds

1. Revert to v3.0.4 (recommended):

   npm install vue-facing-decorator@3.0.4

2. Use CommonJS require (not viable in ESM projects):

   const { Component, toNative, Vue } = require('vue-facing-decorator');

3. Exclude decorator files from build and use plain objects (loses decorator benefits)

Suggested Fix

The package should either:

1. Set "type": "module" in package.json, or
2. Rename ESM files to .mjs extension, or
3. Fix the exports configuration to properly handle dual CommonJS/ESM packages

Reference: Node.js Dual CommonJS/ES module packages

Related Issues

• Affects any project using "type": "module" in package.json

Impact

This regression is blocking upgrades for projects using:

• Modern ESM configuration ("type": "module")
• NestJS with TypeScript
• Vue 3 + SSR setups
• Any Node.js project configured for native ESM

The workaround of reverting to v3.0.4 works perfectly, confirming this is a v4-specific packaging issue.

Additional Context

Our project successfully uses vue-facing-decorator for Vue SSR email templates in a NestJS backend. The upgrade to v4.0.1 was attempted to get the latest features, but the ESM compatibility regression forced us to revert.

Would appreciate a fix in v4.1+ to restore ESM compatibility that worked in v3.x.

[hnviradiya]

issue-reproduction.zip

npm install

Test v4.0.1 (fails)

npm run test:v4

Test v3.0.4 (works)

npm run test:v3