require() of ES Module not supported

[danxcraig]

Using:

├── @sveltejs/[email protected]
├── [email protected]
├── [email protected]    
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Importing and registering:

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);

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 ([...]/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50619:21)
    at async eval (/src/routes/about/+page.svelte:17:31)
    at async instantiateModule ([...]/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50548:9)

I've tried:

• Self research/google
• Downgrading to different combinations of Chart.js and Data Labels.
• "type": "module" in package.json
• uninstall/install