Next.js 12 集成 amCharts 5 构建报Unexpected token 'export'错误如何解决

错误原因 #

该报错是因为amCharts 5仅提供ES模块(ESM)格式的产物，而Next.js默认在服务端渲染构建阶段使用CommonJS规范加载依赖，无法识别ESM的export语法导致的。

完整报错日志如下：

Build error occurred
/home/****/public_html/****/node_modules/@amcharts/amcharts5/index.js:1
export { Root } from "./.internal/core/Root";
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.9504 (/home/****/public_html/****/.next/server/pages/veve/market/components/TradingChart/PrimaryChart.js:69:18)
    at __webpack_require__ (/home/****/public_html/****/.next/server/webpack-runtime.js:25:42)
    at Object.8707 (/home/****/public_html/****/.next/server/chunks/8707.js:15:77) {
  type: 'SyntaxError'
}

解决方案 #

方案1：禁用图表组件的服务端渲染（优先推荐） #

amCharts本身依赖浏览器DOM API，就算服务端加载成功也无法正常渲染，因此直接关闭图表组件的服务端渲染是最高效的处理方式：

• 若使用Next.js 13+ App Router：在你的图表组件（本次报错对应的PrimaryChart.js）顶部第一行添加'use client'指令，确保组件仅在客户端环境加载。
• 若使用Pages Router或添加指令后仍报错：使用next/dynamic动态导入图表组件，显式关闭SSR选项：

import dynamic from 'next/dynamic';

// 动态导入图表组件，禁用服务端渲染
const PrimaryChart = dynamic(() => import('@/pages/veve/market/components/TradingChart/PrimaryChart'), {
  ssr: false,
  loading: () => <p>图表加载中...</p>
});

后续在页面中正常使用PrimaryChart组件即可。

方案2：配置转译amCharts依赖 #

如果你需要保留组件的服务端渲染逻辑，可以修改next.config.js配置，指定Next.js构建时转译amCharts依赖：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 其余现有配置保持不变
  transpilePackages: ['@amcharts/amcharts5', '@amcharts/amcharts5-geodata'] // 若使用了amCharts地理数据依赖也加入列表
}

module.exports = nextConfig

修改配置后重新执行构建即可。

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