svelte-vega improperly packaged. Invalid UMD file in main.

[endremborza]

Hello!

I have been redirected from sveltekit, with the instruction:

svelte-vega looks to be improperly packaged. It has a UMD file in main which is invalid. Node.js will try to load whatever is in main and can't load UMD files. Please file a bug against svelte-vega asking the author to put a CJS or ESM (if they also put "type": "module") in the main field. You may also share https://kit.svelte.dev/faq#packages with them as they are currently violating bullet three

details are in this issue,
sveltejs/kit#5325

but in short, build fails with SyntaxError: Named export 'vega' not found. The requested module 'vega-embed' is a CommonJS module after the simplest possible inclusion of svelte-vega

svelte-vega version is 1.1.1

I did read #90 and #210 but I couldn't find progress.

I would be happy to contribute but unfortunately I am very new to svelte and javascript in general, but I do believe that svelte-vega has great potential, and is by far the best way to create an interesting static dashboard I have found. It's such a shame that the build fails like this.

[cabreraalex]

Hi! did you try adding this to the 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",
        ],
      },
    },
  },
};

[endremborza]

Hi!

Thanks for the quick response!

This is the config that fails

https://github.com/endremborza/qft-viz/blob/main/svelte.config.js

the target: #svelte is claimed to be deprecated by sveltekit, I believe.

I also tried

vite: {
	ssr: {
		noExternal: ['vega-embed']
	},
...
}

which gave a different error but broke the dev server

[cabreraalex]

Hmmmm - so I did rewrite this for sveltekit on another branch: https://github.com/vega/svelte-vega/tree/sveltekit if you want to try it from dev.

I have plans to rewrite it fully for sveltekit, but since it's not at V1 I don't want to have to update it multiple times. I'll try to get to it next week but don't think I can fix it in the next day or two :/

[endremborza]

Thank you!

I will look into whether this branch works or not I and post it here.

I really hope vega will end up working with svelte and sveltekit.

meanwhile, is there another straightforward way to compile and export a svelte app with vega to be hosted as a static site like gh-pages?

[cabreraalex]

You can use vega-embed directly: https://github.com/vega/vega-embed

[endremborza]

the sveltekit branch fails like this:

[vite:resolve] Failed to resolve entry for package "svelte-vega". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "svelte-vega". The package may have incorrect main/module/exports specified in its package.json.
> Failed to resolve entry for package "svelte-vega". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "svelte-vega". The package may have incorrect main/module/exports specified in its package.json.

[cabreraalex]

Sounds good I'll look into it!

As for this:

meanwhile, is there another straightforward way to compile and export a svelte app with vega to be hosted as a static site like gh-pages?

You can just use normal svelte

[cabreraalex]

I attempted to fix this in #561 but I am still running into an issue for SvelteKit - I get the error:

Unknown file extension ".svelte" for /Users/acabrera/dev/rand/svelte-vega-kit/svelte-vega/packages/svelte-vega/dist/Vega.svelte

Which seems to be due to missing fields in package.json, but I'm pretty sure I included all the required ones: hperrin/svelte-material-ui#375

If someone can spot the issue please let me know!

[domoritz]

@cabreraalex do you recall why you closed this? Looks like vite still doesn't like embed: #868.