ElMassimo/iles

Importing scripts into Iles

R0N1n-dev opened this issue ยท 3 comments

Description ๐Ÿ“–

Cannot get script through cdn
Have been having an issue trying to intergrate Vue Ui libraries especially the ones which contain JS (like Vuesax-alpha, Inkline, WaveuI) into iles.
Using cdn, css comes through but the scripts don't

Reproduction ๐Ÿž

https://stackblitz.com/github/R0N1n-dev/iles-pwa

Dependencies Info

Run npx iles info and pnpm list (or npm list) and provide the output:

iles v0.9.5 vite v4.4.4

Logs ๐Ÿ“œ

If not providing a reproduction:

Output

Run DEBUG=iles:* npm run dev or DEBUG=iles:* npm run build and provide the output:


Screenshot from 2024-03-19 16-27-26

The 'Button' should look like this
Screenshot from 2024-03-19 16-27-56

Hi there,

I tried using inkline on a normal Vue project on stackblitz, and I'm seeing some odd errors with their cdn js script. And I tried in your iles repo as well, same error. This looks like an issue with Inkline rather than with Vue/Iles. Best to raise this bug with them.

Also, their documentation does cover using inkline as a Vite plugin, so that the components can be auto-imported and tree-shaken. Any reason why you are using that way? Iles uses Vite underneath, any Vite plugins can be added to iles.config.ts under a vite property (https://iles.pages.dev/config#configuring-vite)

https://stackblitz.com/edit/vitejs-vite-fpykgf?file=index.html

image

Also in your reproduction, if you check console, you will notice that the inkline cdn script & css are added the head as expected. So, extending the head via app.js is working the Iles way. If you check the console, you will notice the same error as above in your iles repo too.

Also, I believe when you use cdn, you will have to stick to kebabcase for components. But, I would recommend you to configure inkline the Vite way as per their docs.

image

Alright. Thanx