Sebb
Need help to build this WC-lib with LV
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 
I can do it with vite without LV: GitHub - georgfaust/ix_vite_standalone · GitHub
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: testbed for LV+IX (webcomponents) · GitHub
[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?
Marked As Solved
c4710n
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.metacalls in the top level ofapp.js import.metacan only be called in JavaScript modules.app.jsis not loaded as a module.
The fix - load app.js as a module.
Also Liked
Sebb
That’s it. Working now.
I really am in awe of people understanding JS-bundling stuff.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"