kit keeps saying: "sparticles is incorrectly packaged. Please contact the package author to fix."

[rchrdnsh]

hieeee!

sveltekit keeps telling me to tell you this:

sparticles is incorrectly packaged. Please contact the package author to fix.

don't shoot me, I'm just the messenger 🤪

[simeydotme]

lol I'm not going to shoot anyone.

It's rather weird, though, as I have a svelte example/demo folder; https://github.com/simeydotme/sparticles/tree/master/example/svelte ... which worked fine before

can you try downloading this repo and running yarn install && yarn dev inside that example/svelte folder?
additionally, can you share any example where this is happening? or which version of kit, and also your implementation code (ie; import code, usage code)?

[rchrdnsh]

lol, whew...

Yeah, I'll try to do those things fo ya :-)

I'm on the latest kit ATM (201, I believe) and this is my implementation:

in the Particles.svelte component:

<script>
  import Sparticles from "sparticles";

  let sparticles,
  options = {
    color: 'white',
    shape: 'circle',
    minSize: 2,
    maxSize: 6,
    speed: 5,
    alphaSpeed: 2,
    alphaVariance: 2,
  };

  function addSparticles(node) {
    new Sparticles(node, options);
  };

</script>

<div class='sparticles' use:addSparticles/>

<style>
  .sparticles {
    pointer-events: none;
    width: 100%;
    height: 100%;
  }
</style>

...and then I import it into my __layout.svelte component, like so:

<script>
  import Particles from '$lib/special/Particles.svelte';

  // ...other js...

</script>

<div class='snow'>
  <Particles/>
</div>

<!-- other html-->

<style>
  .snow {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    display: grid;
    pointer-events: none;
  }
  
  /* ...other css... */
</style>

[simeydotme]

so.. a little digging.

Firstly, here's Sparticles running in Kit, no problem;
https://stackblitz.com/edit/sveltekit-9sg6fn?file=src%2Froutes%2Findex.svelte

But I do see the warning log in console on npm run dev ...

I found almost no info in google, but I did find this (merge request submitted 10 hours ago, lol)
feathersjs-ecosystem/feathers-vuex#614

Their solution was to use a non-standard package.json property; exports to tell vite that the plugin supports esm.

• https://github.com/feathersjs-ecosystem/feathers-vuex/pull/614/files
• https://nodejs.org/api/packages.html#conditional-exports

As it appears vite is not detecting that the module is esm compatible, somehow?.. however, it's weird, because this is in the "externalised server side render" logic (what does that even mean? externalised??) ... but the warning occurs even if the module is loaded purely async on mount (client only) at time of build; but it should have been tree-shaken out at that point?

Anyway, I'm a little bit miffed at the issue... but if you'd like to dig further @rchrdnsh or help testing a branch with the package.json changes from feathers-vuex works in different environments, then please go ahead and then throw me a merge-request :) ... otherwise I'll get around to this as I can.

cheers again, stalker! :P

[rchrdnsh]

hmmmmm...it might be one those things that gets worked out over time, and as you said, it runs just fine, so I'm not concerned myself. Just thought it would be something easy to fix, since the message was delivered with such confidence by....vite? ...I suppose... if I can find some time I can try to help out, though :-)

[simeydotme]

hah, ok thanks for the notice, anyway!

I've not got into Kit just yet (about to start something actually) and I definitely won't be using Particles in many applications... so I wouldn't have experienced this!

Please do let me know how you're using them, though, and if they behave well for you! I made most of it over-writable with prototypes if you find anything is not quite as you need :)

[rchrdnsh]

welp, the message got updated to read:

sparticles doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

and so I added "type": "module" to the package.json and the error message seems to have gone away...

...so maybe that's it?

[simeydotme]

oh man ...

I just read; https://2ality.com/2019/10/hybrid-npm-packages.html and now I have a headache.
Adding "type": "module" would resolve your issue, but it would leave browser-bundlers messed up, I think?

So the issue is that I want to support just simply adding the dependency, and then bundling with your build script (like gulp, rollup) without any hassle for a regular old frontend ... but your case is where you want to use imports to inject it into a component, whereby you'll need a type: module

I need to build a test-setup for this -_-;

[simeydotme]

should be sorted, my dude. 😎