NextJS 中的 AmCharts - SyntaxError: Unexpected token 'export'

【问题标题】：AmCharts in NextJS - SyntaxError: Unexpected token 'export'NextJS 中的 AmCharts - SyntaxError: Unexpected token 'export'
【发布时间】：2021-10-08 17:20:46
【问题描述】：

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

SyntaxError: Unexpected token 'export'

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

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

【问题讨论】：

标签： reactjs typescript next.js amcharts amcharts4

【解决方案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

【讨论】：