Next.js动态导入@amcharts/amcharts5多导出包读取Root属性报错如何解决

问题根源 #

next/dynamic 是Next.js专门为动态导入React组件设计的API，本质是React.lazy的高阶封装，它的返回值是一个可直接在JSX中渲染的React组件对象，而非你导入的第三方JS模块本身的导出内容。所以你尝试用dynamic返回的对象取Root属性、或者解构导出项的写法自然会返回undefined。

解决方案 #

方案1：使用原生ES动态import()语法（推荐） #

直接在客户端执行的生命周期（如useEffect）中调用原生的import()加载amcharts模块，拿到模块导出内容后再初始化图表：

Pages Router写法

import { useEffect, useRef } from 'react'

export default function ChartPage() {
  const chartContainerRef = useRef(null)

  useEffect(() => {
    let root
    // 异步加载模块并初始化图表
    const initAmChart = async () => {
      const am5 = await import('@amcharts/amcharts5')
      // 此时可正常调用模块下所有导出项
      root = am5.Root.new(chartContainerRef.current)
      // 剩余图表初始化逻辑...
    }
    initAmChart()

    // 组件卸载时销毁实例避免内存泄漏
    return () => {
      if (root) root.dispose()
    }
  }, [])

  return <div ref={chartContainerRef} style={{ width: '100%', height: '500px' }} />
}

App Router写法

只需在组件顶部添加'use client'指令，其余逻辑和Pages Router一致：

'use client'
import { useEffect, useRef } from 'react'

export default function ChartPage() {
  // 同上逻辑
}

方案2：封装图表组件后动态导入整个组件 #

如果希望逻辑更内聚，可以把所有amcharts相关逻辑封装成独立的React组件，再用next/dynamic导入这个组件：

1. 首先新建独立图表组件components/Am5Chart.jsx：

// App Router下这里也要加'use client'
import { useEffect, useRef } from 'react'
import * as am5 from '@amcharts/amcharts5'

export default function Am5Chart() {
  const containerRef = useRef(null)
  useEffect(() => {
    const root = am5.Root.new(containerRef.current)
    // 图表初始化逻辑...
    return () => root.dispose()
  }, [])
  return <div ref={containerRef} style={{ width: '100%', height: '500px' }} />
}

2. 在业务页面中动态导入该组件：

import dynamic from 'next/dynamic'

// 关闭SSR即可
const Am5Chart = dynamic(() => import('@/components/Am5Chart'), { ssr: false })

export default function Page() {
  return (
    <div>
      <h1>数据看板</h1>
      <Am5Chart />
    </div>
  )
}

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