NextJS项目使用AmCharts4报错Unexpected token 'export'如何解决？

在NextJS项目中引入'@amcharts/amcharts4/core'及其他amcharts相关模块时，会触发SyntaxError: Unexpected token 'export'报错，该问题可通过动态导入方案解决，具体操作如下：

• 无需修改next.config.js配置，直接在使用amcharts的业务组件内，通过NextJS内置的dynamic方法导入amcharts模块，同时设置ssr: false禁用服务端渲染
• 导入示例代码：

import dynamic from 'next/dynamic';

// 按需导入需要的amcharts模块，全部关闭ssr
const am4core = dynamic(() => import('@amcharts/amcharts4/core'), { ssr: false });
const am4charts = dynamic(() => import('@amcharts/amcharts4/charts'), { ssr: false });
const am4themes_animated = dynamic(() => import('@amcharts/amcharts4/themes/animated'), { ssr: false });

• 所有图表初始化、实例配置逻辑均放在useEffect钩子中执行，确保代码仅在客户端侧运行，不会触发服务端编译阶段的语法校验错误

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