Working with Sveltekit

[schicks]

I'm trying to set up a project to use vega within sveltekit for a blog. I'm getting errors of module is not defined when I try to import from svelte-vega; I'm fairly confident this has something to do with the rollup JSON plugin, since I can't install that in the context of sveltekit. However, I am able to import json files as modules without a problem in my own code, so I'm a little surprised that's an issue.

Why is that rollup plugin necessary? I'd like to help contribute here if I can, getting more involved with vega is something I've been excited about for a while, but I'm not sure I have all the context necessary to jump in.

[Sparkier]

Thank you for reporting this issue. If we dont add this plugin, we get an error when using vega-lite as of this code:

import pkg from '../package.json';
export const version = pkg.version;

So if you would clone our code and remove rollup-plugin-json, it should not build anymore.

[schicks]

I feel like I'm still missing a few things. When does rollup run in this context? before the code is distributed or on the consumers end? Also, if this is the only occurrence of that code, is it that imortant to pull the name out of the package.json or could it just be duplicated this once?

[domoritz]

There are two ways we could solve this. Either we provide a workaround for svelte kit or we could also change Vega-Lite to compile js files that have the version already in them.

To try the latter, you could use one of our compiled bundles instead of the js source files we directly generate from the ts sources.

[cabreraalex]

Hi Sam thanks for bringing this up! Roping in @domoritz for this. As far as I can tell, the core vega package imports some JSON files directly, so it requires rollup to have a JSON loader. I think the best solution would be to update Vega itself, but it might require a hefty change.

[schicks]

So I want to clarify I few things.

• sveltekit should be able to do json imports; I do it within my own code at least, I'm not sure if things work differently in the context of module code.
• I'm not totally sure that the rollup plugin is the issue, it was just a guess. The particular error mentions the fast-deep-equal package, and the line number does appear to be the first time that package references module.exports, so module is not defined would make sense in that context.

[cabreraalex]

Relevant issue: mhkeller/layercake#41

I created a blank sveltekit project w/ svelte-vega and get the same fast-deep-equal error.

[cabreraalex]

Maybe also related: d3/d3#3469

[domoritz]

I'm pretty sure the issue is not JSON but module.exports then. Do you have @rollup/plugin-commonjs enabled?

[schicks]

Still learning my way around these things, but I don't think I'm using rollup because sveltekit.

[cabreraalex]

Yup you're right it uses Vite it looks like. This is the file it fails for, seems to be some weird common.js issue I'm guessing, I don't know enough to debug it well: https://github.com/epoberezkin/fast-json-stable-stringify/blob/master/index.js

Honestly likely a svelte-kit issue, they should be able to handle common.js type imports?

[cabreraalex]

Alright digging slightly deeper, we also get the error for all the d3 imports:

Looks like we're not on the newest version of d3 which uses es6 imports by default. So definitely a common.js issue?

[schicks]

I'm not totally convinced because as a workaround I can use vega-embed directly; I only get problems using svelte-vega. That seems to suggest it's not a common.js problem in sveltekit, right?

[cabreraalex]

AH yes okay then it's probably how we are building the widget. I'll try to check tomorrow, though it looks like we are exporting as esm.

[russellsamora]

fwiw I just tried d3 7.0 which is all esm and it gives the same vite ssr error.

[cabreraalex]

Just d3 by itself? Very interesting, might be worth posting an issue there, they might have more expertise/ideas about the problem?