failed to load module for ssr: /node_modules/svelte-flagpack/src/Flag.svelte

[AqueleHaru]

failed to load module for ssr: /node_modules/svelte-flagpack/src/Flag.svelte

cant use the package :(

[zoeyfrisart]

@haruzinh0 Thank you for letting us know that you are experiencing issues with Svelte Flagpack right now.

Could you tell us some more information about the environment that you experience this issue in? This will help us reproduce the issue and solve it sooner.

We have added this issue to our backlog and will let you know when we have resolved the issue.

[AqueleHaru]

Sup! i just followed the README. step by step. when i import Flag and try to use any flag the error happens (im using sveltekit)

[AqueleHaru]

seems like src folder was not downloading in package idk

[AqueleHaru]

i literally just followed the steps to install then i get the error.

↑

[AqueleHaru]

any update?

[scippio]

Same here... 😞

[zoeyfrisart]

Apologies for the late response, at the moment we have no further update. We have taken a look at the issue and have identified the cause of the problem. But at this moment we have not found a suitable fix yet.

As we are also an agency, we have been very busy lately and thus have not been able to put time into solving this issue.

For that same reason we have no estimated time for a fix, however we are more then happy to accept pull requests to this repository that would resolve the issue.

We have attempted a solution that would include the component in the dist folder. This resolves the error mentioned above.
But however that seems to cause two new issues:

• Sass becomes a dependency needed inside of the projects
• Flags seem to not load

The work for this has been done in 7-fix-broken-svelte-build, if anyone wishes to attempt a fix from that you are more than welcome to.

[scippio]

tip: For those who need flags in code (until this bug will be fixed) is there: flag-icon-css package ( https://github.com/lipis/flag-icons ) ... just add this to your main scss file:
@use 'flag-icon-css/css/flag-icons';
It's stable and works perfectly for years...

[Rar9]

any update for sveltekit?

[alvinycheung]

Still a problem

[evankford]

It looks like the package/npm module isn't including the /src directory. As a result, any imports that are trying to resolve as a svelte entry are failing, because they're trying to resolve to /src/Flag.svelte, which isn't in the module at all.

In addition, the Flag.svelte component has some errors:

1. Line 20: Wrong path to the ./dist folder.
2. Line 41: <style type="text/css"> should be <style lang="scss">

I can confirm that copying the src directory into the npm module folder and then fixing these two errors resolves this issue for me. Obviously this isn't a solution for build-time, etc, but I'm happy to contribute a PR if I can get some confirmation from the owners that they're open to it!

[ChrizzDF]

I'd also love to use them!
@evankford I applied your mentioned steps but it still got me the error Identifier deep is expected when spinning up the server.

Anyway, I hope a fix gets released very soon! 🙏

[joekrump]

Still a problem

[joekrump]

Still a problem

Part of the root of the problem for me is that it seems like the component was probably compiled for svelte 3 and has some syntax that is unique to that.

If I do this

<script lang="ts">
  import Flag from "svelte-flagpack/dist/index.js";
</script>

<svelte:component this={Flag} code={option.countryAlpha3Code} size="S" />

Things do not blow up immediately but as soon as the dynamic import kicks off things blow up.

[joekrump]

Seems like this may be part of what is needed once this package is updated to support svelte >=4: https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition