在Next.js中使用chartjs-adapter-date-fns时遇exports主定义缺失错误

原因分析 #

这个错误大多是Chart.js与chartjs-adapter-date-fns版本不兼容，或者Next.js严格的ES模块解析规则导致导入路径不匹配。

解决方案 #

1. 确保版本匹配 #

chartjs-adapter-date-fns的版本必须和Chart.js严格对应：

• 若使用Chart.js v3.x，适配器要安装v3.x版本
• 若使用Chart.js v2.x，适配器要安装v1.x版本

执行以下命令重新安装匹配版本（以v3稳定版为例）：

npm uninstall chart.js chartjs-adapter-date-fns
npm install chart.js@^3.9.1 chartjs-adapter-date-fns@^3.0.0

2. 调整导入方式适配Next.js #

Next.js的模块解析机制和普通项目不同，推荐两种调整方式：

方式一：动态导入适配器

在图表组件中，通过useEffect异步导入适配器，避免初始化阶段的模块解析错误：

import { useEffect } from 'react';
// 用chart.js/auto自动注册所有必要组件，包括时间轴模块
import Chart from 'chart.js/auto';

export default function TimeLineChart() {
  useEffect(() => {
    const initChart = async () => {
      // 异步导入适配器
      await import('chartjs-adapter-date-fns');
      
      const ctx = document.getElementById('time-chart');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['2024-01-01', '2024-01-02', '2024-01-03'], // 时间格式数据
          datasets: [{
            label: '数据趋势',
            data: [12, 19, 3],
            borderColor: '#36A2EB',
            tension: 0.1
          }]
        },
        options: {
          scales: {
            x: {
              type: 'time', // 启用时间轴
              time: {
                unit: 'day'
              }
            }
          }
        }
      });
    };

    initChart();
  }, []);

  return <canvas id="time-chart"></canvas>;
}

方式二：修改Chart.js导入路径

将import Chart from 'chart.js'替换为import Chart from 'chart.js/auto'，这个路径会自动注册所有Chart.js核心组件，包括时间轴所需模块，避免手动导入的路径问题。

3. 避免使用不稳定版本 #

尽量选择Chart.js的稳定版本（如v3.9.x），避免使用最新的beta版或开发版，这类版本可能存在exports配置的兼容性问题。

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