Sveltekit crashing on certain external libraries

[luucvanderzee]

Describe the bug

When I try to use certain libraries, Sveltekit crashes. In this example I am using colortranslator, but it also happens with other packages.

Reproduction

On the command line:

npm init svelte@next my-app
cd my-app
npm install
npm install colortranslator
npm run dev

Then in src/routes/index.svelte, add the following line:

import { Colortranslator } from 'colortranslator';

This produces the following error: Line must be greater than or equal to 1, got -1 (see log below for more details)

Logs

3:07:27 PM [vite] Error when evaluating SSR module /node_modules/colortranslator/dist/index.js?v=dce26994:
ReferenceError: exports is not defined
    at /node_modules/colortranslator/dist/index.js?v=dce26994:1:23848
    at /node_modules/colortranslator/dist/index.js?v=dce26994:1:23945
    at instantiateModule (/home/luuc/Projects/svelte/test-app/node_modules/vite/dist/node/chunks/dep-be032392.js:66504:15)
Line must be greater than or equal to 1, got -1
TypeError: Line must be greater than or equal to 1, got -1
    at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/home/luuc/Projects/svelte/test-app/node_modules/vite/dist/node/chunks/dep-be032392.js:65365:13)
    at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (/home/luuc/Projects/svelte/test-app/node_modules/vite/dist/node/chunks/dep-be032392.js:65434:22)
    at /home/luuc/Projects/svelte/test-app/node_modules/vite/dist/node/chunks/dep-be032392.js:66373:34
    at String.replace (<anonymous>)
    at /home/luuc/Projects/svelte/test-app/node_modules/vite/dist/node/chunks/dep-be032392.js:66363:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/home/luuc/Projects/svelte/test-app/node_modules/vite/dist/node/chunks/dep-be032392.js:66362:10)
    at instantiateModule (/home/luuc/Projects/svelte/test-app/node_modules/vite/dist/node/chunks/dep-be032392.js:66507:28)

System Info

System:
    OS: Linux 5.11 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 8.19 GB / 15.29 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    npm: 8.1.0 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Brave Browser: 95.1.31.87
    Chrome: 94.0.4606.81
    Firefox: 93.0
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.188 
    svelte: ^3.34.0 => 3.44.0

Severity

blocking all usage of SvelteKit

Additional Information

No response

[luucvanderzee]

I guess this issue is related to this? #1895

[bluwy]

It's related to this: vitejs/vite#2579

We would need to wait for that to be resolved, but otherwise the easier path is to have colortranslator export ESM code as well. Currently, it's CJS only.

[luucvanderzee]

I have a bunch of other modules that have the same problem though- don't really feel like forking all of their repos, and then changing their bundling settings manually. Is there a workaround? I don't really need the SSR, would turning that off solve it?

EDIT: found it in the docs: https://kit.svelte.dev/docs#ssr-and-javascript-ssr.

[bluwy]

You can submit a PR to the repos instead of forking, it's great to move the ecosystem towards ESM too as that's the goal of VIte. Yeah you can try turning SSR to false as mentioned in your edit, but keep in mind that it's not 100% true SPA yet (#1650). Or you can also use Vite directly if needed.

[luucvanderzee]

What do you mean with using 'Vite directly'? Is there a template/example of how that would work?

[bluwy]

You can create a Vite app with npm init vite and choosing the svelte template. But it doesn't include many features from sveltekit ootb, like routing, adapters, etc.

[benmccann]

I filed a feature request for the library to support ESM: elchininet/ColorTranslator#56

That library is written in TypeScript and compiled to CJS. It'd be easy to compile an ESM version alongside it. The whole ecosystem is moving to ESM, so that should really be done long-term even after Vite adds better support for CJS

[benmccann]

I'm going to go ahead and close this since there's nothing else we can do in SvelteKit. The changes that need to be made are in ColorTranslator and Vite and tracked by issues there

[benmccann]

@luucvanderzee ColorTranslator 1.8.0 now distributes an ESM version: https://github.com/elchininet/ColorTranslator/blob/87d36e06295d5fb63e28cbaae9a16ad049e839ca/package.json#L7

Hopefully this fixes your issue!