Next.js动态导入具名导出类报not a constructor错误如何解决

问题根因 #

• next/dynamic是Next.js专门封装用于动态导入React组件的工具，它的返回值是包装后的React组件对象，不是你导入模块里的原始JS类，因此无法作为构造函数执行new操作，这是报错的核心原因。
• 你编写的导入回调取值逻辑有误：import()返回的是Promise对象，不能直接在Promise实例上取模块导出的属性，需要等待Promise resolve后再取值。

修复方案 #

方案1：使用原生ES动态导入（适用于非组件的普通类/工具导入） #

你要导入的是数据供给类，不属于React组件，直接使用原生import()语法即可，无需借助next/dynamic：

// 示例：在组件挂载时异步导入并实例化
import { useEffect } from 'react'

function YourComponent() {
  useEffect(() => {
    const loadDatafeed = async () => {
      // 等待模块加载完成
      const datafeedModule = await import("./datafeeds/udf/src/udf-compatible-datafeed.js")
      // 取具名导出的类
      const UDFCompatibleDatafeed = datafeedModule.UDFCompatibleDatafeed
      // 正常实例化使用
      const datafeedInstance = new UDFCompatibleDatafeed(/* 你的入参 */)
      // 后续执行datafeed的初始化逻辑
    }
    loadDatafeed()
  }, [])

  // 组件其他逻辑
  return <div>TradingView 容器</div>
}

如果类的使用时机不在组件生命周期内，也可以在触发对应逻辑的回调函数中执行上述异步导入逻辑。

方案2：如果该类配套了React组件需要动态导入 #

如果你是要导入基于该类封装的React组件，可以继续使用next/dynamic，同时关闭服务端渲染（TradingView相关的组件通常依赖浏览器API，无法在服务端运行）：

import dynamic from 'next/dynamic'

// 导入封装好的TradingView组件，关闭ssr
const TradingView = dynamic(() => import('./your-trading-view-component'), {
  ssr: false
})

// 直接在组件中使用即可，类的初始化逻辑封装在组件内部
function YourPage() {
  return <TradingView />
}

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