从模块导入的 Webpack 类不是构造函数

Posted 2023-02-19

【中文标题】从模块导入的 Webpack 类不是构造函数

【英文标题】：Webpack imported class from module is not a constructor

【发布时间】：2017-05-31 06:04:21

【问题描述】：

我有一个 angular2 包库（称为 A），我使用 npm install 从另一个不同的 angular2 项目（称为 B）导入它。 A 中的所有服务和组件似乎都适用于 B 项目，它们被很好地导入和使用。 但是，只有简单的类定义是行不通的。即我有一个定义如下的类

export class JustAClass
    public Title:string;
    constructor(title:string)
        this.Title = title;
    

    getTitleLong():string
        return 'Long '+this.Title;
    

并在 index.d.ts 中导出它。

从 './components/test/just' 导出 JustAClass ；

在项目 B 我可以看到 just.d.ts 文件如下：

export declare class JustAClass 
    Title: string;
    constructor(title: string);
    getTitleLong(): any;

我使用 webswtorm，当我在项目 B 的文件中使用此类时，它给了我智能并知道将我指向文件定义：

import  JustAClass  from 'my-project-lib-A';

@Component(
    templateUrl: 'orders.html'
)
export class SomePage 
    

    constructor() 

        var d = new JustAClass('aaaa'); // this is undefiend in run time
        console.log(d.getTitleLong());

    

我得到它'JustAClass' undefined ，webpack 抛出一个错误：

WEBPACK_IMPORTED_MODULE_2_my-project-lib-A.JustAClass 不是构造函数

如果重要的话，我将 ionic2 用作项目 B。

【问题讨论】：

你导入的项目是否包含编译后的typescript文件到js文件？或者您是否直接使用导入项目中的打字稿文件？请分享导入项目的tsconfig.json和package.json。

嘿，你搞定了吗？我有同样的情况:)

很久以前我不记得了

我认为问题在于该类是从 .d.ts 文件中导出的。编译后 .d.ts 文件不会发出代码，因此该类不存在，并且您会收到一条错误消息，指出它不是构造函数。

【参考方案1】：

如果有人偶然发现这一点，对我有用的可能解决方案之一是删除导入的类和导入器之间的循环依赖。似乎 webpack 通过将导入的类替换为 undefined 或一些类似的构造来解决循环依赖，这会导致运行时异常。