Chart.js This method is not implemented: Check that a complete date adapter is provided. error with chartjs-adapter-date-fns included

Question

Chart.js time line graph does not render, and instead throws an error when x axis is set to type: time as is noted in all the docs, note that I'm using 4.1.2 and react-chartjs-2 wrapper around chart.js

import React from 'react';

import 'chartjs-adapter-date-fns';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  TimeScale,
} from 'chart.js';

import { Line } from 'react-chartjs-2';

ChartJS.register(LinearScale, PointElement, LineElement, Title, Tooltip, Legend, TimeScale, CategoryScale);

export const Test = () => {
  const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  const options = {
    scales: {
      x: {
        type: 'time',
      },
    },
  };
  const dataset = {
    labels,
    datasets: [
      {
        label: 'Dataset 1',
        data: labels.map(() => Math.floor(Math.random() * 1000)),
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
      {
        label: 'Dataset 2',
        data: labels.map(() => Math.floor(Math.random() * 1000)),
        borderColor: 'rgb(53, 162, 235)',
        backgroundColor: 'rgba(53, 162, 235, 0.5)',
      },
    ],
  };
  return <Line options={options} data={dataset} />;
};

However it does render when the options are changed to the following:

  const options = {
    responsive: true,
    adapters: {
      type: 'time',
    },
  }

I can't find anywhere in the docs that it says to use the adapters.time option. Why does this work? How can I get it to work the way it does in the docs.

Answer 1

Do you know whether your project is using CommonJS (CJS) or ECMAScript modules (ESM)?

I'm wondering if you're running into the dual package hazard with Chart.js - it contains separate CJS and ESM versions, and it has global state (its registry of date/time adapters), and this registry does not appear to be shared between its CJS and ESM versions.

As a result, if your project is using the CJS version of Chart.js, while the adapter you're using is using the ESM version of Chart.js (or vice versa), things won't work.

chartjs-adapter-date-fns appears to be using the ESM version. (See here.)

This similar question appears to be related (although it doesn't have a confirmed answer, so I'm not positive that that's what's going on),