reactjs - NextJS 中的 AmCharts - 语法错误 : Unexpected token 'export'

Question

尝试在 NextJS 项目中使用 '@amcharts/amcharts4/core' 包和其他 amchart 模块时出现错误:

语法错误:意外的 token “导出”

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

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