Next.js构建报错：chart.js未定义exports主入口问题求助

核心原因 #

这个错误源于Next.js在SSR（服务器端渲染）阶段的模块解析逻辑，与chart.js的package.json导出规则不兼容——开发环境是客户端渲染所以无问题，构建时触发了服务器端的模块校验机制。

解决方案 #

1. 让Next.js转译chart.js包

在项目根目录的next.config.js中添加transpilePackages配置，强制Next.js转译chart.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['chart.js'],
}

module.exports = nextConfig

添加后重新执行构建，该配置会让Next.js处理chart.js的模块导出逻辑，避免解析错误。

2. 动态导入chart.js相关组件（禁用SSR）

如果转译无效，将使用chart.js的组件改为动态导入，跳过服务器端渲染：

import dynamic from 'next/dynamic'

// 替换成你的chart组件实际路径
const YourChartComponent = dynamic(() => import('../components/YourChartComponent'), {
  ssr: false,
})

export default function YourPage() {
  return <YourChartComponent />
}

开发环境不受影响，构建时服务器端不会处理该组件，自然不会触发导出错误。

3. 修正chart.js的导入方式

确保使用chart.js官方推荐的导入路径，不要直接导入内部未声明导出的文件：

// 正确导入方式
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)

避免类似import 'chart.js/dist/chart.js'这类直接导入dist目录的写法，这类路径通常不在chart.js的exports定义范围内。

额外排查项 #

• 升级Next.js到最新稳定版（如13.x或14.x），旧版本的模块解析逻辑可能存在兼容性问题。
• 检查项目根目录的package.json，如果有"type": "module"字段，确保所有导入都使用ES模块语法，不要混用require。

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