Need help to build this WC-lib with LV

Phoenix Forum Questions / Help
, ,
1

I’m still on the quest to make webcomponent-libraries work with LV.

This one seems very interesting and has some characteristics that should make it easier to use with LV (than eg shoelace).

Problem: it is not available per CDN, so I need to bundle it :grimacing:

I can do it with vite without LV: GitHub - georgfaust/ix_vite_standalone

So I tried to use vite with LV. For that I forked a repo doing that by @c4710n and added the IX-stuff: GitHub - georgfaust/ix_with_lv_testbed: Provides an alternative assets/ of Phoenix for using LiveView and TailwindCSS.

[EDIT: fixed on master, bug on b8b582d33e7d37762ae24135e2b12fcda168b654]

Sadly I get the error (chrome console)

Uncaught SyntaxError: Cannot use 'import.meta' outside a module

And I’m completely lost.
Any ideas?

2

Hey, @Sebb.

I notice that ix is assuming developers will use JavaScript module. So, try this in root.html.heex:

- <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
+ <script defer phx-track-static type="module" src={~p"/assets/app.js"}>

More details:

  • There are import.meta calls in the top level of app.js
  • import.meta can only be called in JavaScript modules.
  • app.js is not loaded as a module.

The fix - load app.js as a module.

1 Like
3

That’s it. Working now.
I really am in awe of people understanding JS-bundling stuff.

1 Like