NextJS 中的 AmCharts - 语法错误：意外的标记“导出”

Question

当尝试在 NextJS 项目中使用'@amcharts/amcharts4/core'包和其他 amchart 模块时，我收到错误：

SyntaxError: Unexpected token 'export'

在阅读了大量有关它的帖子和信息后，我发现这个问题非常有帮助，这使我能够找到动态导入的解决方案，我将在下面分享我如何解决它的解决方案。

https://github.com/amcharts/amcharts4/issues/272

Answer 1

对我来说，这个问题的解决方案是使用 NextJS 动态导入，这样您就可以隔离组件内的 amcharts 代码，然后仅在客户端动态导入该组件，而不是在 SSR 期间。

// Create a psuedo component using dynamic import that will only be imported client-side
const Chart = dynamic(() => import('./ChartComponent'), {
  ssr: false
})

./ChartComponent其中应该包含所有 amcharts 导入，这些导入现在已被隔离，并且只会在客户端中导入，并且应该可以正常工作。

然后像往常一样渲染组件

return <Chart chartData={chartData} />

此处的动态导入文档：https ://nextjs.org/docs/advanced-features/dynamic-import