chart.js not working with newest sveltekit / vite package

[Cluster2a]

Describe the bug

Chat.js is throwing the following error when running with vite 3.0.0 / sveltekit 1.0.0-next.374

(node:173691) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
Cannot use import statement outside a module
/home/alex/Downloads/chartTest/node_modules/.pnpm/chart.js@3.8.0/node_modules/chart.js/auto/auto.esm.js:1
import {Chart, registerables} from '../dist/chart.esm.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)

The exact same code was working with:
@sveltejs/kit: 1.0.0-next.372
vite: 2.9.14

Reproduction

• clone Repository https://github.com/Cluster2a/chartjsError
• pnpm install
• pnpm run dev

Logs

(node:173691) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
Cannot use import statement outside a module
/home/alex/Downloads/chartTest/node_modules/.pnpm/chart.js@3.8.0/node_modules/chart.js/auto/auto.esm.js:1
import {Chart, registerables} from '../dist/chart.esm.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900KS CPU @ 4.00GHz
    Memory: 2.53 GB / 15.54 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.4.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.60 
    @sveltejs/kit: 1.0.0-next.374 => 1.0.0-next.374 
    svelte: ^3.49.0 => 3.49.0 
    vite: ^3.0.0 => 3.0.0

Severity

blocking an upgrade

Additional Information

No response

[benmccann]

This is because Chart.js uses extension values that are invalid in Node.js, so Node.js is crashing. It should be .mjs instead of .esm.js. I'm surprised it worked in Vite 2. This should be possible to fix in Chart.js. As a workaround, you could probably add Chart.js to noExternal.

[benmccann]

I've sent chartjs/Chart.js#10479 to Chart.js. At this point, there's nothing to do on the SvelteKit side, so I'm going to close this.

[Cluster2a]

@benmccann, i added noExternal to my vite.config.js:

I still get the error - am I doing something wrong? I am not quite sure if I should put it into the svelte.config.js.

[bastiaanv]

@Cluster2a the noExternal should be:

{
  noExternal: ['chart.js']
}

And not:

{
  noExternal: ['Chart.js']
}

[Cluster2a]

noExternal: ['chart.js']

Thanks - I tried it, but it's not working. Still getting this error.

[benmccann]

It looks like it needs to be the following in Vite 3:

	ssr: {
		noExternal: ['chart.js/**']
	}

Having to put the /** is a bit annoying. We'll discuss to see if there's a better way

[Cluster2a]

It looks like it needs to be the following in Vite 3:

	ssr: {
		noExternal: ['chart.js/**']
	}

Having to put the /** is a bit annoying. We'll discuss to see if there's a better way

This one was new to me - it's working! Thanks a lot for your incredible work on this project!

[benmccann]

No problem. Thanks for taking the time to put together a reproduction. Hopefully the /** will only be needed for a couple days. There's a fix out in Vite so that it will not be required: vitejs/vite#9146

[Masatoshi]

await import seems to work.

<script lang="ts">
let chartCanvas: HTMLCanvasElement;
import { onMount } from 'svelte';
let chartCanvas: HTMLCanvasElement;
onMount(async () => {
	const { Chart, registerables } = await import('chart.js');
	Chart.register(...registerables);
	const config = {
		type: 'bar',
		-- snip --
	}
	const ctx = chartCanvas.getContext('2d');
	if (ctx) new Chart(ctx, config);
});
</script>

<canvas bind:this={chartCanvas}  />

package.json

"devDependencies": {
	"@sveltejs/kit": "1.0.0-next.483",
	"vite": "3.1.1",

"dependencies": {
	"chart.js": "^3.9.1",

no need to add any line to vite.config.ssr.

[ehildebrandtrojo]

No problem. Thanks for taking the time to put together a reproduction. Hopefully the /** will only be needed for a couple days. There's a fix out in Vite so that it will not be required: vitejs/vite#9146

@benmccann I just ran into this today and still had to change import { ... } from 'chart.js' to import { ... } from 'chart.js/dist/chart.mjs' and update the vite config file with ssr: { noExternal: ['chart.js/**'] } in order to get the build run to work despite me having the latest vite version (3.1.4)

I looked at the post you linked and it has been resolved. Is there something I'm doing wrong which still requires me to make those changes?