kit: Unable to `build` (or `preview`) a project that runs fine with `dev`

Describe the bug

Unable to build (or preview) a project that runs fine with dev.

My project (converted from a Svelte / Snowpack project) runs properly with npm run dev, but fails when npm run building using @sveltejs/adapter-static or when using npm run preview with no adapter installed.

Minimal demo repo at https://github.com/simonwiles/kit-tonejs-piano.

Logs

> ~TODO~@0.0.1 build
> svelte-kit build

vite v2.3.8 building for production...
transforming (27) node_modules/@tonejs/piano/build/piano/Salamander.js(node:59986) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /home/simon/tmp/kit-tonejs/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
✓ 988 modules transformed.
.svelte-kit/output/client/_app/manifest.json                    1.21kb
.svelte-kit/output/client/_app/layout.svelte-b687b8cd.js        0.50kb / brotli: 0.30kb
.svelte-kit/output/client/_app/error.svelte-dd4ef804.js         1.19kb / brotli: 0.57kb
.svelte-kit/output/client/_app/assets/start-a8cd1609.css        0.16kb / brotli: 0.10kb
.svelte-kit/output/client/_app/pages/index.svelte-78cf5388.js   1.49kb / brotli: 0.65kb
.svelte-kit/output/client/_app/start-dcd902e0.js                17.19kb / brotli: 5.50kb
.svelte-kit/output/client/_app/chunks/vendor-b9998ab6.js        276.40kb / brotli: 58.84kb
vite v2.3.8 building SSR bundle for production...
✓ 23 modules transformed.
.svelte-kit/output/server/app.js   72.80kb

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-static
> Named export 'Frequency' not found. The requested module 'tone' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'tone';
const { ToneAudioNode, Volume, Frequency, Midi, Sampler, ToneAudioBuffers, ToneBufferSource, optionsFromArguments, Gain, isString } = pkg;

file:///home/simon/tmp/kit-tonejs/.svelte-kit/output/server/app.js:4
import { ToneAudioNode, Volume, Frequency, Midi, Sampler, ToneAudioBuffers, ToneBufferSource, optionsFromArguments, Gain, isString } from "tone";
                                ^^^^^^^^^
SyntaxError: Named export 'Frequency' not found. The requested module 'tone' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'tone';
const { ToneAudioNode, Volume, Frequency, Midi, Sampler, ToneAudioBuffers, ToneBufferSource, optionsFromArguments, Gain, isString } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:121:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:171:5)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async prerender (file:///home/simon/tmp/kit-tonejs/node_modules/@sveltejs/kit/dist/chunks/index6.js:78:14)
    at async Object.prerender (file:///home/simon/tmp/kit-tonejs/node_modules/@sveltejs/kit/dist/chunks/index6.js:310:5)
    at async adapt (file:///home/simon/tmp/kit-tonejs/node_modules/@sveltejs/adapter-static/index.js:17:4)
    at async adapt (file:///home/simon/tmp/kit-tonejs/node_modules/@sveltejs/kit/dist/chunks/index6.js:336:2)
    at async file:///home/simon/tmp/kit-tonejs/node_modules/@sveltejs/kit/dist/cli.js:881:5

To Reproduce

  • git clone https://github.com/simonwiles/kit-tonejs-piano
  • cd kit-tonejs-piano
  • npm install
  • npm run build

Expected behavior

I want to be able to build it 😃

Information about your SvelteKit Installation:

Diagnostics
  • The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,@sveltejs/adapter-node,@sveltejs/adapter-static,@sveltejs/adapter-begin,@sveltejs/adapter-netlify,@sveltejs/adapter-vercel vite --binaries --browsers
  System:
    OS: Linux 5.12 Arch Linux
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 516.25 MB / 15.38 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.4.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 7.17.0 - /usr/bin/npm
  Browsers:
    Brave Browser: 91.1.26.67
    Firefox: 89.0.2
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0-next.13 => 1.0.0-next.13 
    @sveltejs/kit: next => 1.0.0-next.117 
    svelte: ^3.38.3 => 3.38.3 

Severity

This is a blocker for the app, of course. The full-scale app works just fine without SvelteKit (see https://sul-cidr.github.io/pianolatron – still under heavy development), but we need some static-site apparatus around it, and I’d like to use SvelteKit.

Additional context

I’m not 100% sure if this is a problem that needs to be fixed in SvelteKit or @tonejs/piano or, as I suspect, both. I’ve tried rewriting all the tone.js imports in a fork of @tonejs/piano, but to no avail. Pointers for further debugging very welcome.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 15 (6 by maintainers)

Commits related to this issue

Most upvoted comments

I filed an issue for Chart.js: https://github.com/chartjs/Chart.js/issues/9436

You can also make it work by setting vite.ssr.noExternal: ['chart.js']

@peterszerzo : Just found out that you can import with ESM path and it works just fine:

import Chart from 'chart.js/auto/auto.esm';

Hint: I found it on SvelteKit discord 😃

@esyon can you file a new issue with a project to reproduce it?