Possible to have a "time" Scale when using Chart.js via ESM with no npm or bundler?

[frou]

Chart.js can be used in a self-contained JavaScript file served verbatim to the user's browser, when Chart.js is imported as ESM from an absolute URL:

import { Chart, registerables } from "https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.esm.js"

Chart.register(...registerables)

new Chart(/* ... */)

However, as we know, the base Chart.js library alone won't be enough if we configure a "time" Scale:

Error: This method is not implemented: Check that a complete date adapter is provided.

...and so something like https://github.com/chartjs/chartjs-adapter-date-fns needs to be involved.

---

Can chartjs-adapter-date-fns similarly be successfully imported in the browser as ESM from an absolute URL?

(If so, after importing it, presumably there will be an additional line of code needed to make Chart aware of the date adapter?).

[frou]

I have found a way to get this working, but only by making a copy of the file chartjs-adapter-date-fns.esm.js into one's own repo and doing some minor surgery on it:

diff --git a/chartjs-adapter-date-fns.esm.js b/setup-date-adapter.js
index b829e10..7f579b4 100644
--- a/chartjs-adapter-date-fns.esm.js
+++ b/setup-date-adapter.js
@@ -4,8 +4,7 @@
  * (c) 2021 chartjs-adapter-date-fns Contributors
  * Released under the MIT license
  */
-import { _adapters } from 'chart.js';
-import { toDate, parse, parseISO, isValid, format, addYears, addQuarters, addMonths, addWeeks, addDays, addHours, addMinutes, addSeconds, addMilliseconds, differenceInYears, differenceInQuarters, differenceInMonths, differenceInWeeks, differenceInDays, differenceInHours, differenceInMinutes, differenceInSeconds, differenceInMilliseconds, startOfYear, startOfQuarter, startOfMonth, startOfWeek, startOfDay, startOfHour, startOfMinute, startOfSecond, endOfYear, endOfQuarter, endOfMonth, endOfWeek, endOfDay, endOfHour, endOfMinute, endOfSecond } from 'date-fns';
+import { toDate, parse, parseISO, isValid, format, addYears, addQuarters, addMonths, addWeeks, addDays, addHours, addMinutes, addSeconds, addMilliseconds, differenceInYears, differenceInQuarters, differenceInMonths, differenceInWeeks, differenceInDays, differenceInHours, differenceInMinutes, differenceInSeconds, differenceInMilliseconds, startOfYear, startOfQuarter, startOfMonth, startOfWeek, startOfDay, startOfHour, startOfMinute, startOfSecond, endOfYear, endOfQuarter, endOfMonth, endOfWeek, endOfDay, endOfHour, endOfMinute, endOfSecond } from 'https://cdn.jsdelivr.net/npm/date-fns@2.28.0/esm/index.js';

 const FORMATS = {
   datetime: 'MMM d, yyyy, h:mm:ss aaaa',
@@ -20,7 +19,8 @@ const FORMATS = {
   year: 'yyyy'
 };

-_adapters._date.override({
+export default function(chartJsAdapters) {
+chartJsAdapters._date.override({
   _id: 'date-fns', // DEBUG

   formats: function() {
@@ -106,4 +106,4 @@ _adapters._date.override({
     default: return time;
     }
   }
-});
+})};

---

Then, the code from my opening post becomes:

import {
  Chart,
  registerables as chartRegisterables,
  _adapters as chartAdapters,
} from "https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.esm.js"

import setupDateAdapter from "./setup-date-adapter.js"

Chart.register(...chartRegisterables)

setupDateAdapter(chartAdapters)

new Chart(/* ... */)