Using Chart.js with SvelteKit

Question

I'm trying to use Chart.js with SvelteKit. In development mode everything works fine, but when I try to build the project I get the following error.

Directory import 'C:\directory\node_modules\chart.js\auto' is not supported resolving ES modules imported from C:\directory\.svelte-kit\output\server\app.js

Did you mean to import chart.js/auto/auto.js?

Importing the Chart.js module with an exact path is not a good idea, and only introduces more errors.

I am using @sveltejs/adapter-netlify as my adapter in svelte.config.js, but I get the same error if I run the preview of my build.

I also added the following options to svelte.config.js, but it doesn't seem to make any difference either way:

vite: {
            build: {
                rollupOptions: {
                    // make sure to externalize deps that shouldn't be bundled
                    // into your library
                    external: ['chart.js/auto/auto.js'],
                    output: {
                        // Provide global variables to use in the UMD build
                        // for externalized deps
                        globals: {
                            'chart.js/auto/auto.js': 'chart.js/auto/auto.js'
                        }
                    }
                }
            }
        }

Error log when deploying to Netlify:

3:24:33 PM: Build ready to start
3:24:35 PM: build-image version: 8925038cf853b22d6397cdcb9904ac88b66bb383 (focal)
3:24:35 PM: build-image tag: v4.5.0
3:24:35 PM: buildbot version: f344a535fc9e872014eaaa404a4e12d2d8b86d78
3:24:35 PM: Fetching cached dependencies
3:24:35 PM: Starting to download cache of 136.1MB
3:24:37 PM: Finished downloading cache in 1.606266802s
3:24:37 PM: Starting to extract cache
3:24:41 PM: Finished extracting cache in 4.473142472s
3:24:41 PM: Finished fetching cache in 6.116179516s
3:24:41 PM: Starting to prepare the repo for build
3:24:42 PM: Preparing Git Reference refs/heads/main
3:24:42 PM: Parsing package.json dependencies
3:24:43 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'build' versus 'build/' in the Netlify UI
3:24:43 PM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'functions' versus 'functions/' in the Netlify UI
3:24:43 PM: Starting build script
3:24:43 PM: Installing dependencies
3:24:43 PM: Python version set to 2.7
3:24:43 PM: Started restoring cached node version
3:24:46 PM: Finished restoring cached node version
3:24:46 PM: v14.18.1 is already installed.
3:24:47 PM: Now using node v14.18.1 (npm v6.14.15)
3:24:47 PM: Started restoring cached build plugins
3:24:47 PM: Finished restoring cached build plugins
3:24:47 PM: Attempting ruby version 2.7.2, read from environment
3:24:48 PM: Using ruby version 2.7.2
3:24:48 PM: Using PHP version 8.0
3:24:48 PM: Started restoring cached node modules
3:24:48 PM: Finished restoring cached node modules
3:24:49 PM: Started restoring cached go cache
3:24:49 PM: Finished restoring cached go cache
3:24:49 PM: go version go1.16.5 linux/amd64
3:24:49 PM: go version go1.16.5 linux/amd64
3:24:49 PM: Installing missing commands
3:24:49 PM: Verify run directory
3:24:50 PM: ​
3:24:50 PM: ────────────────────────────────────────────────────────────────
3:24:50 PM:   Netlify Build                                                 
3:24:50 PM: ────────────────────────────────────────────────────────────────
3:24:50 PM: ​
3:24:50 PM: ❯ Version
3:24:50 PM:   @netlify/build 20.0.4
3:24:50 PM: ​
3:24:50 PM: ❯ Flags
3:24:50 PM:   baseRelDir: true
3:24:50 PM:   buildId: 61adc8c1c88a4a0008c5b01a
3:24:50 PM:   deployId: 61adc8c1c88a4a0008c5b01c
3:24:51 PM: ​
3:24:51 PM: ❯ Current directory
3:24:51 PM:   /opt/build/repo
3:24:51 PM: ​
3:24:51 PM: ❯ Config file
3:24:51 PM:   /opt/build/repo/netlify.toml
3:24:51 PM: ​
3:24:51 PM: ❯ Context
3:24:51 PM:   production
3:24:51 PM: ​
3:24:51 PM: ────────────────────────────────────────────────────────────────
3:24:51 PM:   1. build.command from netlify.toml                            
3:24:51 PM: ────────────────────────────────────────────────────────────────
3:24:51 PM: ​
3:24:51 PM: $ npm run build
3:24:51 PM: > [email protected] build /opt/build/repo
3:24:51 PM: > svelte-kit build
3:24:51 PM: vite v2.6.14 building for production...
3:24:51 PM: transforming...
3:24:56 PM: ✓ 84 modules transformed.
3:24:56 PM: rendering chunks...
3:24:57 PM: .svelte-kit/output/client/_app/manifest.json                                                            8.36 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/__layout.svelte-cac045cc.js                                        5.08 KiB / gzip: 1.73 KiB
3:24:57 PM: .svelte-kit/output/client/_app/error.svelte-ba46ba0d.js                                                 1.56 KiB / gzip: 0.75 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/premium/__layout.reset.svelte-2ab60c03.js                          0.65 KiB / gzip: 0.43 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/index.svelte-f1e6e79e.js                                           4.15 KiB / gzip: 1.84 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/premium/index.svelte-1f09ccb8.js                                   6.45 KiB / gzip: 2.45 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/user/index.svelte-4540218a.js                                      1.13 KiB / gzip: 0.65 KiB
3:24:57 PM: .svelte-kit/output/client/_app/start-33c9ad71.js                                                        22.99 KiB / gzip: 7.65 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/user/__layout.reset.svelte-444d0531.js                             5.27 KiB / gzip: 2.08 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/token.svelte-e8b71991.js                                           7.24 KiB / gzip: 2.87 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/search.svelte-00334be0.js                                          7.16 KiB / gzip: 2.52 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/user/create/__layout.reset.svelte-90e4157e.js                      0.65 KiB / gzip: 0.43 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/user/billing.svelte-8902aa64.js                                    2.04 KiB / gzip: 1.04 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/user/settings.svelte-9938bb36.js                                   5.94 KiB / gzip: 2.11 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/user/login/__layout.reset.svelte-87befaf9.js                       0.65 KiB / gzip: 0.43 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/user/create/index.svelte-1e298fd7.js                               4.49 KiB / gzip: 1.87 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/singletons-12a22614.js                                            0.05 KiB / gzip: 0.06 KiB
3:24:57 PM: .svelte-kit/output/client/_app/pages/user/login/index.svelte-d48b156e.js                                3.78 KiB / gzip: 1.72 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/ButtonRounded-ed78fbd5.js                                         1.28 KiB / gzip: 0.67 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/Button-e4d3dad2.js                                                5.92 KiB / gzip: 2.18 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/ButtonText-74f772aa.js                                            2.24 KiB / gzip: 0.86 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/NFTCards-cc59c6cf.js                                              3.11 KiB / gzip: 1.28 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/Switch-0273f5ad.js                                                2.00 KiB / gzip: 0.85 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/InfoCard-c1a98ef5.js                                              5.47 KiB / gzip: 2.01 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/PageHeading-2b615589.js                                           0.53 KiB / gzip: 0.37 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/FormInput-389a0a2f.js                                             8.30 KiB / gzip: 1.77 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/navigation-fe2f9ec4.js                                            0.25 KiB / gzip: 0.20 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/ButtonRounded-24c01e11.css                                        0.26 KiB / gzip: 0.18 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/Button-67df1856.css                                               0.88 KiB / gzip: 0.43 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/start-61d1577b.css                                                0.16 KiB / gzip: 0.15 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/ButtonText-8790089b.css                                           0.32 KiB / gzip: 0.20 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/InfoCard-ad1800f9.css                                             1.50 KiB / gzip: 0.48 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/index.svelte-acacf904.css                                   1.63 KiB / gzip: 0.57 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/GradientBorderButton.svelte_svelte_type_style_lang-d3095c45.css   0.98 KiB / gzip: 0.40 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/token.svelte-23d487df.css                                   1.91 KiB / gzip: 0.51 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/user/billing.svelte-515cd28f.css                            0.54 KiB / gzip: 0.24 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/user/create/index.svelte-fcad784c.css                       0.36 KiB / gzip: 0.21 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/user/settings.svelte-4ebeb417.css                           0.53 KiB / gzip: 0.25 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/user/login/index.svelte-f8608a1a.css                        0.82 KiB / gzip: 0.25 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/user/__layout.reset.svelte-c3ec2e5c.css                     1.86 KiB / gzip: 0.58 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/FormInput-d750b459.css                                            0.99 KiB / gzip: 0.32 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/search.svelte-21d42eff.css                                  3.42 KiB / gzip: 0.71 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/NFTCards-112c327b.css                                             1.49 KiB / gzip: 0.47 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/PageHeading-0c3149c2.css                                          0.05 KiB / gzip: 0.07 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/Switch-81f9464c.css                                               1.97 KiB / gzip: 0.56 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/__layout.svelte-0f2b0a9a.css                                2.88 KiB / gzip: 0.98 KiB
3:24:57 PM: .svelte-kit/output/client/_app/assets/pages/premium/index.svelte-f0689d62.css                           3.73 KiB / gzip: 0.94 KiB
3:24:57 PM: .svelte-kit/output/client/_app/chunks/vendor-c3e5c243.js                                                191.25 KiB / gzip: 66.80 KiB
3:24:57 PM: vite v2.6.14 building SSR bundle for production...
3:24:57 PM: transforming...
3:24:58 PM: ✓ 92 modules transformed.
3:24:58 PM: Generated an empty chunk: "set"
3:24:58 PM: rendering chunks...
3:24:58 PM: .svelte-kit/output/server/app.js                              0.10 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/app-00ca8699.js              58.43 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/index.json-db38f111.js       1.13 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/db-eeaf94c9.js               0.47 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/index-dca41fe0.js            1.16 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/set-8d79a3ed.js              0.00 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/index.json-6850269e.js       1.66 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/jwt-fa86d9e3.js              1.14 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/index.json-24c5617b.js       1.67 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/__layout-9f83baa1.js         4.19 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/ButtonRounded-00c09ceb.js    1.46 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/Button-54857337.js           4.77 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/ButtonText-73b2ca59.js       1.60 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/error-c92bdfb1.js            0.75 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/index-201dd528.js            4.37 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/NFTCards-9275b953.js         3.33 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/__layout.reset-4574f9ea.js   0.29 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/index-fb55d445.js            7.38 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/FormInput-d4bb3521.js        6.82 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/InfoCard-d7f59b6d.js         4.39 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/search-0888ea42.js           8.70 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/Switch-6fac4d24.js           3.14 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/PageHeading-e0206301.js      0.55 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/token-9b7a397c.js            5.84 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/__layout.reset-a6e393f5.js   4.59 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/index-dee18e21.js            0.78 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/settings-2d15e578.js         4.91 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/billing-b3277575.js          1.80 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/__layout.reset-5ed4ab33.js   0.29 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/index-eb70b726.js            2.94 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/__layout.reset-ed9e1203.js   0.29 KiB
3:24:58 PM: .svelte-kit/output/server/chunks/index-e793ee3f.js            2.94 KiB
3:24:58 PM: Run npm run preview to preview your production build locally.
3:24:58 PM: 
3:24:58 PM: > Using @sveltejs/adapter-netlify
3:25:00 PM: Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/opt/build/repo/node_modules/chart.js/auto' is not supported resolving ES modules imported from /opt/build/repo/.svelte-kit/output/server/chunks/token-9b7a397c.js
3:25:00 PM: Did you mean to import chart.js/auto/auto.js?
3:25:00 PM:     at new NodeError (internal/errors.js:322:7)
3:25:00 PM:     at finalizeResolution (internal/modules/esm/resolve.js:304:17)
3:25:00 PM:     at moduleResolve (internal/modules/esm/resolve.js:731:10)
3:25:00 PM:     at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
3:25:00 PM:     at Loader.resolve (internal/modules/esm/loader.js:89:40)
3:25:00 PM:     at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
3:25:00 PM:     at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
3:25:00 PM:     at link (internal/modules/esm/module_job.js:75:36)
3:25:00 PM: > 500 /token (linked from /search)
3:25:00 PM: Error: 500 /token (linked from /search)
3:25:00 PM:     at file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index4.js:86:11
3:25:00 PM:     at visit (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index4.js:222:5)
3:25:00 PM:     at async visit (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
3:25:00 PM:     at async visit (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
3:25:00 PM:     at async prerender (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index4.js:303:6)
3:25:00 PM:     at async Object.prerender (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index4.js:368:4)
3:25:00 PM:     at async adapt (file:///opt/build/repo/node_modules/@sveltejs/adapter-netlify/index.js:48:4)
3:25:00 PM:     at async adapt (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index4.js:393:2)
3:25:00 PM:     at async file:///opt/build/repo/node_modules/@sveltejs/kit/dist/cli.js:896:5
3:25:00 PM: npm ERR! code ELIFECYCLE
3:25:00 PM: npm ERR! errno 1
3:25:00 PM: npm ERR! [email protected] build: `svelte-kit build`
3:25:00 PM: npm ERR! Exit status 1
3:25:00 PM: npm ERR!
3:25:00 PM: npm ERR! Failed at the [email protected] build script.
3:25:00 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
3:25:00 PM: npm ERR! A complete log of this run can be found in:
3:25:00 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-12-06T08_25_00_957Z-debug.log
3:25:00 PM: ​
3:25:00 PM: ────────────────────────────────────────────────────────────────
3:25:00 PM:   "build.command" failed                                        
3:25:00 PM: ────────────────────────────────────────────────────────────────
3:25:00 PM: ​
3:25:00 PM:   Error message
3:25:00 PM:   Command failed with exit code 1: npm run build
3:25:00 PM: ​
3:25:00 PM:   Error location
3:25:00 PM:   In build.command from netlify.toml:
3:25:00 PM:   npm run build
3:25:00 PM: ​
3:25:00 PM:   Resolved config
3:25:00 PM:   build:
3:25:00 PM:     command: npm run build
3:25:00 PM:     commandOrigin: config
3:25:00 PM:     environment:
3:25:00 PM:       - NODE_VERSION
3:25:00 PM:       - VITE_JWT_SECRET
3:25:00 PM:     publish: /opt/build/repo/build
3:25:00 PM:     publishOrigin: config
3:25:00 PM:   functionsDirectory: /opt/build/repo/functions
3:25:01 PM: Caching artifacts
3:25:01 PM: Started saving node modules
3:25:01 PM: Finished saving node modules
3:25:01 PM: Started saving build plugins
3:25:01 PM: Finished saving build plugins
3:25:01 PM: Started saving pip cache
3:25:01 PM: Finished saving pip cache
3:25:01 PM: Started saving emacs cask dependencies
3:25:01 PM: Finished saving emacs cask dependencies
3:25:01 PM: Started saving maven dependencies
3:25:01 PM: Finished saving maven dependencies
3:25:01 PM: Started saving boot dependencies
3:25:01 PM: Finished saving boot dependencies
3:25:01 PM: Started saving rust rustup cache
3:25:01 PM: Finished saving rust rustup cache
3:25:01 PM: Started saving go dependencies
3:25:01 PM: Finished saving go dependencies
3:25:01 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
3:25:01 PM: Creating deploy upload records
3:25:01 PM: Failing build: Failed to build site
3:25:01 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
3:25:01 PM: Finished processing build request in 26.480304007s

Answer 1

Vite causes this. It's both SvelteKit's greatest strength and weakest link.

Just add these lines to the config object within your svelte.config.js file and you should be fine :

const config = {
    kit: {
        // ...
        vite: {
            ssr:{
                noExternal: ['chart.js']
            }
        }
    }
    
};