How to resolve an ERR_REQUIRE_ESM issue when using with Sveltekit

[danxcraig]

I'm using:

├── @sveltejs/kit@1.0.0-next.429
├── chart.js@4.1.1
├── chartjs-plugin-datalabels@2.2.0    
├── svelte-chartjs@3.1.0
├── svelte@3.49.0
├── typescript@4.7.4
└── vite@3.0.9

I'm importing and registering this way:

import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js';
import { Pie } from 'svelte-chartjs';
import ChartDataLabels from 'chartjs-plugin-datalabels';

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, ChartDataLabels);

On page load, I receive the following 500 error:

require() of ES Module ...\node_modules\chart.js\helpers\helpers.js from ...\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js not supported.

Instead change the require of helpers.js in ...\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js to a dynamic import() which is available in all CommonJS modules.

Error [ERR_REQUIRE_ESM]: require() of ES Module ...\node_modules\chart.js\helpers\helpers.js from ...\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js not supported.

Instead change the require of helpers.js in...\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js to a dynamic import() which is available in all CommonJS modules.

    at ...\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js:9:89
    at Object.<anonymous> (...\node_modules\chartjs-plugin-datalabels\dist\chartjs-plugin-datalabels.js:12:3)
    at async Promise.all (index 0)
    at async nodeImport (file:///.../node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50619:21)
    at async eval (/src/routes/about/+page.svelte:17:31)
    at async instantiateModule (file:///.../node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50548:9)

I have not had any trouble with chart.js. This issue only occurs when importing and registering ChartDataLabels. Is there anything I can try to resolve this?

[Whobeu]

This MIGHT be related to an issue I just figured out trying to get chartjs-plugin-datalabels to work as an ESM in Node.js v20. My modules are all .mjs and I had issues with the chartjs-plugin-datalabels.js being loaded instead of the chartjs-plugin-datalabels.esm.js module. I eventually landed on:

import ChartDataLabels from "chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js"

However that threw the following error:

SyntaxError: Cannot use import statement outside a module

Eventually I found a suggestion on a website about all of the CommonJS/ESM issues found in Node.js that said to put a one-liner package.json in a directory of modules that is having problems:

{
   "type": "module"
}

Bingo, problem solved! HOWEVER, this one-liner package.json will disable CommonJS support so if you are supporting both CommonJS and ESM modules you will need to create separate repositories for them.