Webpack 5中使用TypeScript命名空间遇TS2307错误的解决方案咨询

The Root Cause of Your TS2307 Error #

First off, let's clear this up: Webpack 5 does support TypeScript namespaces—your issue isn't about lack of support, it's about incorrect import syntax.

Looking at your code:

• In Enum.ts, you're using export namespace MyCLabs which exports a named namespace object, not a default export.
• But in test.ts, you're trying to import it as a default with import MyCLabs from "...";—this mismatch is what's triggering the TS2307 "cannot find module" error.

Fixing the Immediate Namespace Issue #

To make your current code work, adjust the import in test.ts to use a named import instead of a default import:

// test.ts
import { MyCLabs } from "src/model/generated/MyCLabs/Enum/Enum";
let test : MyCLabs.Enum.Enum.Enum = new MyCLabs.Enum.Enum.Enum();

This correctly references the named namespace exported from your Enum.ts file.

Better Alternative: Use ES Modules + Directory Structure (Instead of Namespaces) #

While namespaces work, they're a legacy TypeScript feature designed before ES modules became standard. For modern projects using Webpack, ES modules combined with directory-based organization is the recommended approach—especially when dealing with dozens of duplicate class names. Here's how to implement it:

1. Restructure Your Files to Match "Namespace" Hierarchy

Treat directories as your logical "namespaces". For example:

src/
  model/
    generated/
      MyCLabs/
        Enum/
          Enum.ts  // Contains the MyCLabs-specific Enum class
      AnotherLib/
        Enum/
          Enum.ts  // Contains the AnotherLib-specific Enum class

2. Export Classes Directly (No Namespaces)

In each Enum.ts, export the class directly instead of wrapping it in a namespace:

// src/model/generated/MyCLabs/Enum/Enum.ts
export class Enum {
  value : null;
  key : null;
  cache : null;
  instances : null;
  constructor(obj : Enum) { Object.assign(this,obj); }
}

3. Import with Renaming to Avoid Conflicts

When importing duplicate class names, use TypeScript's as keyword to give them unique aliases:

// test.ts
import { Enum as MyCLabsEnum } from "src/model/generated/MyCLabs/Enum/Enum";
import { Enum as AnotherLibEnum } from "src/model/generated/AnotherLib/Enum/Enum";

let test1 = new MyCLabsEnum();
let test2 = new AnotherLibEnum();

4. (Optional) Use Index Files for Cleaner Imports

To simplify imports, add an index.ts file in each "namespace" directory to re-exports:

// src/model/generated/MyCLabs/Enum/index.ts
export { Enum } from "./Enum";

Now you can import with a shorter path:

import { Enum as MyCLabsEnum } from "src/model/generated/MyCLabs/Enum";

Why This Is Better Than Namespaces #

• Aligns with standard ES module behavior, which Webpack handles natively (no extra translation needed).
• Directory structure makes logical grouping visible at a glance, unlike nested namespaces which can get unwieldy.
• Avoids common pitfalls with namespace-ES module interoperability (like the import mismatch that caused your original error).

内容的提问来源于stack exchange，提问作者slushpuppy