Using 'import' in a .svelte file

[terrisgit]

In, say, Example.svelte, I'm tying to do this:

<script>
import { AccordionItem, Accordion } from 'flowbite-svelte';
</script>

I added flowbite-svelte to package.json.

When running mix phx.server, I'm getting:

[ERROR] Could not resolve "flowbite-svelte"

 svelte/Example.svelte:5:45:
      5 │ const { AccordionItem, Accordion } = require("flowbite-svelte");
        ╵                                              ~~~~~~~~~~~~~~~~~

  The path "." is not currently exported by package "flowbite-svelte":

    node_modules/flowbite-svelte/package.json:120:13:
      120 │   "exports": {
          ╵              ^

  None of the conditions provided ("types", "svelte") match any of the currently active conditions ("default", "module", "node", "require"):

I think this error is coming from esbuild-svelte and therefore I think there is something wrong with the esbuild configuration in config.exs. How do I tell esbuild to also use node_modules? Perhaps I don't understand how svelte files are compiled.

config :esbuild,
  version: "0.17.11",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

Unfortunately, this does not fix the problem. Perhaps now I'm dealing with a typescript problem.

env: %{"NODE_PATH" => Enum.join([Path.expand("../deps", __DIR__), Path.expand("../assets/node_modules", __DIR__)], ":")}

[woutdp]

Looking at it right now, there's definitly an issue. For example I can't install lodash either. The dynamic-marquee package does work. I'll let you know when I have an update as this should be solved and is a more general problem.

[woutdp]

Nvm actually, lodash seems to be working, I've added an example to the example_project on how to use lodash. That being said I'll still look into why flowbite specifically isn't working.

[woutdp]

The issue seems to be with this: themesberg/flowbite-svelte#647

Removing the mainFields in build.js fixes the issue, but now SSR isn't working (disabling SSR by removing the NodeJS inside application.ex works)

So I'm thinking maybe mainFields is not needed? I'm not even sure what it does, so will check, will keep you posted

[woutdp]

Actually removing mainFields doesn't solve the issue, just going to version 0.29 solves the problem.

[terrisgit]

🤦

[woutdp]

The SSR issue remains though, does SSR svelte work for you in this case?