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?

[domoritz]

Note that D3 v7 came out this week.

[bmschmidt]

Curious if anyone has gotten this working in svelte-kit yet?

AFAICT, the problem is that svelte-vega works as an ES6 module but some of the imports aren't pure ES and svelte-kit breaks down the chain. With the D3 v7 problem mentioned above, my workaround has been to use compiled .mjs versions of any submodules I'm using. But that strategy here gives the error:

<VegaLite> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

[edit: redefining 'equal' in this code from using 'fast-deep-equal' to {JSON.stringify(a) === JSON.stringify(b)} does allow things to build in svelte-kit, although then there are more problems down the line.]

[domoritz]

fast-deep-equal adds support for es modules in epoberezkin/fast-deep-equal#105. However, I think sveltekit would need to support commons since it's unrealistic to expect everyone to only use esmodules at this point.

[cabreraalex]

I think it's probably how we export our module, I can try to look at it today.

[bmschmidt]

Maybe it's reasonable to expect svelte users to be using ES import syntax in their code?

Also, don't rush this on my account ahead of svelte-kit stability--I think sticking with vega-embed will fit my use case better anyway, because I need to add event listeners on the rendered chart.

[cabreraalex]

Alright I tried reimplementing the package using the sveltekit packaging option (https://kit.svelte.dev/docs#packaging) and it still fails to import. It looks like a lot of Svelte imports for sveltekit are either experimental or very broken with vite (vitejs/vite#4231). Hopefully it stabilizes a bit and we can make it work :/

[domoritz]

Thank you for looking into this @cabreraalex. Do we support adding event listeners?

[cabreraalex]

Oh yeah on that note, we do! Maybe we can document it better, looks something like this, same as vega-embed:
<VegaLite signalListeners={{select: (args) => console.log(args)}} />

[hk7math]

Does any one has any progress with SvelteKit?
I finally use CDN to workaround the building issue.. (I used Netlify adapter)

[cabreraalex]

Uninteresting update, I tried this again and it still fails with SSR/Vite issues, specifically on trying to import json-stringify-pretty-compact. Hopefully they get to this soon: vitejs/vite#4231

[IsmaelMasharo]

Hi, I encountered the same issue while using plain vite-svelte and after looking at vite's docs I figured out how to get svelte-vega to work with vite. The problem is related to vite's dependencies pre-building. As mentioned in vite's docs this behavior can be customized. Adding the following lines in vite's config file solves the problem:

optimizeDeps: {
  include: ["fast-deep-equal"],
}

After testing I got more errors with other packages, so I included all I found in the console error message. The whole svelkit config:

const config = {
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",
    vite: {
      optimizeDeps: {
        include: [
          "fast-deep-equal",
          "semver",
          "json-stringify-pretty-compact",
          "clone",
          "fast-json-stable-stringify",
        ],
      },
    },
  },
};

With that, I was able to use svelte-vega with sveltkit and plain vite-svelte.

[domoritz]

Thanks for sharing. Is that something we can do automatically from our side? If not, could you send a pull request to upstate the readme with a note?

[IsmaelMasharo]

At the moment it's something specific to Vite's way of handling dependencies in development, so a description in the readme will do. I've sent a pull request as suggested #208

[cabreraalex]

I have version working with SvelteKit we'll try to merge soon at the sveltekit branch

[vega-org-bot]

🎉 This issue has been resolved in version 1.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀