Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

chart.js not working with newest sveltekit / vite package

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Comments:10 (4 by maintainers)

Top GitHub Comments

3reactions

benmccanncommented, Jul 15, 2022

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: https://github.com/vitejs/vite/pull/9146

3reactions

benmccanncommented, Jul 14, 2022

I’ve sent https://github.com/chartjs/Chart.js/pull/10479 to Chart.js. At this point, there’s nothing to do on the SvelteKit side, so I’m going to close this.

Top Results From Across the Web

Chart.js import not working when building app - Stack Overflow

Im trying to run vite dev and when using chart.js its giving me this error message, not sure what do (note: im using...

Svelte Charts: Quick Charts in SvelteKit with Chart.js

Svelte Charts: how quickly and easily you can add customised charts to your SvelteKit, Astro or other Svelte apps with Chart.js.

@carbon/charts-svelte - npm

Start using @carbon/charts-svelte in your project by running `npm i @carbon/charts-svelte`. There are 2 other projects in the npm registry ...

Server-Side Rendering - Vite

SSR specifically refers to front-end frameworks (for example React, Preact, Vue, and Svelte) that support running the same application in Node.js, ...

What's new in Svelte: June 2022

The Svelte team has been hard at work contributing to the Vite 3 release to make the integration between SvelteKit and Vite smoother...