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

[simonwiles]

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.

[mohe2015]

If you need the tone library clientside what about using a default import like recommended in the error message? You could also do
const { ToneAudioNode, ... } = tone
so you dont need to change all usages of the imports.

[mohe2015]

Otherwise the library would need to provide an esm version afaik.

[simonwiles]

If you need the tone library clientside what about using a default import like recommended in the error message? You could also do
const { ToneAudioNode, ... } = tone
so you dont need to change all usages of the imports.

Otherwise the library would need to provide an esm version afaik.

Thanks, yeah the issue appears to be the esm imports that @tonejs/piano does when it imports tonejs, not any imports I'm making myself (see the demo repo https://github.com/simonwiles/kit-tonejs-piano/blob/main/src/routes/index.svelte). Both tonejs and @tonejs/piano (same author) appear to be providing esm versions though.

[benmccann]

This type of question is best asked on StackOverflow or Discord

[simonwiles]

I did ask on Discord, but I got no helpful responses. I figured if SvelteKit (or vite?) was incorrectly rewriting esm imports that would constitute a bug. Thanks anyway.

[simonwiles]

Update -- ended up switching to something else instead of SvelteKit :(

[benmccann]

Those libraries should specify "type": "module" in their package.json, which helps a bit but it still doesn't work

node_modules/@tonejs/piano/build/piano/Piano.js contains:

import { Gain, isString, Midi, optionsFromArguments, ToneAudioNode } from 'tone';

Which gives the error message:

The requested module 'tone' does not provide an export named 'Gain'

It actually does contain it as far as I can tell though perhaps there's something going on with it being in a build subfolder where we need an exports mapping in package.json.

The issue occurs when SvelteKit tries to import this file. The import is handled by Node, so it's either a bug in Node or in tone

[simonwiles]

Thanks, yeah, I think it's something funky in the way @tonejs/piano imports tone (it uses some of the imports as Typescript types and interfaces). Not to worry -- it works just fine in Elder.js and Astro.

[peterszerzo]

I have the same issue with chart.js.

@benmccann what about libraries that have a "module": "dist/chart.esm.js" field in their package.json but no "type": "module"? Seems like a reasonable setup.

[quangpdt]

@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 😃

[benmccann]

I filed an issue for Chart.js: chartjs/Chart.js#9436

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

[peterszerzo]

Appreciate your support @quangpdt and @benmccann!

[esyon]

@benmccann, I updated to "vite": 3.0.0 and cart-js is not working anymore with

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

[benmccann]

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

[Cluster2a]

@benmccann, new issue: #5535

Thanks for your support!