如何识别合法JS类？React转Next.js实例化类报非构造函数错误

报错原因 #

你遇到的TypeError: UDFCompatibleDatafeed is not a constructor报错，核心原因是ES模块动态导入的返回值是模块命名空间对象，不是你默认导出的类本身：

• 你在udf-compatible-datafeed.js中使用的是export default导出类
• await import()执行完成后返回的是包含所有导出项的模块对象，默认导出的内容会挂载在该对象的default属性下
• 你直接把模块对象当做构造函数执行new操作，自然会抛出不是构造函数的报错。

如何判断JS值是否为可实例化的合法类/构造函数 #

你可以通过以下几个条件快速校验：

• 执行typeof 目标值，返回结果为function：类本质是构造函数的语法糖，本身属于函数类型
• 执行Object.prototype.toString.call(目标值)，返回结果为[object Function]：如果是你现在拿到的模块对象，返回结果会是[object Module]，直接就能区分
• 类/构造函数都存在prototype属性，且目标值.prototype.constructor === 目标值 恒成立。

报错修复方案 #

修改动态导入的代码，取模块对象的default属性即可，修改后的代码如下：

// 方式1：解构时重命名取default
const { default: UDFCompatibleDatafeed } = await import("./datafeeds/udf/src/udf-compatible-datafeed.js");

// 方式2：先拿模块对象再取属性
// const moduleObj = await import("./datafeeds/udf/src/udf-compatible-datafeed.js");
// const UDFCompatibleDatafeed = moduleObj.default;

console.log("UDFCompatibleDatafeed", UDFCompatibleDatafeed);
console.log("3...");

const widgetOptions = {
    //debug: true,
    symbol: this.props.symbol,
    // BEWARE: no trailing slash is expected in feed URL
    datafeed: new UDFCompatibleDatafeed(
        this.props.datafeedUrl,
        this.props.intradayUrl,
        this.props.realTimeUrl,
        this.props.enableLogging
    ),
    interval: this.props.interval,
};

修改完成后拿到的UDFCompatibleDatafeed就是你导出的类，可正常通过new实例化。

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