使用import()动态导入实例化类对象时返回undefined问题

在React组件中使用import()动态导入实例化类对象后，读取其属性时返回undefined。组件通过useEffect动态导入../../core/models下的模型文件，模型文件以export default导出实例化的类对象，但执行console.log(model?.name)时输出undefined，控制台无报错说明模块解析正常。

组件代码 #

import { IModel } from '@/core/types'

// 省略部分代码

const [model, setModel] = useState<IModel | null>(null)

useEffect(() => {
    ;(async () => {
        const data: IModel = await import(`../../core/models/${instance.component.name}Model.ts`)
        setModel(_ => data)
    })()
}, [instance.component.name])

模型代码 #

import { IModel } from '@/core/types'

class ToDoListModel implements IModel {
    public name: string
    public isDropContainer: boolean
    public requiredProps: string[]

    private _dropBlacklist: string[]

    constructor() {
        this.name = 'ToDoList'
        this.isDropContainer = false
        this.requiredProps = []
        this._dropBlacklist = ['Test']
    }

    public isDragAllowed = (): boolean => {
        return true
    }

    public isDropAllowed = (component: IModel): boolean => {
        return this.isDropContainer && !this._dropBlacklist.includes(component.name)
    }
}

const model = new ToDoListModel()

export default model

问题原因与解决方法 #

问题出在动态导入的结果处理上：import()函数返回的是一个模块对象，默认导出的内容挂载在该对象的.default属性上，而非直接返回导出的实例对象。之前的代码直接将整个模块对象赋值给了model，所以访问model.name实际是在读取模块对象的name属性，自然返回undefined。

修改组件中的动态导入逻辑，取出模块对象的.default属性即可：

useEffect(() => {
    ;(async () => {
        // 先获取模块对象
        const module = await import(`../../core/models/${instance.component.name}Model.ts`)
        // 取出默认导出的实例对象
        const data: IModel = module.default
        setModel(_ => data)
    })()
}, [instance.component.name])

这样修改后，model就会指向正确的实例化类对象，访问model.name就能得到预期的'ToDoList'值。

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