Alpine component not loaded
Hey, I'm using Curator plugin and their resource included is using their Curator field that loads an Alpine component
Problem is that every other plugin using JS files are loaded except this alpine component even tho assets have been published using filament artisan command
There is no errors in the console and the script is never loaded watching at the browser dev console (network tab), the plugin do have the alpine directives to load the module but it's still not there
Is there any other step I'm missing in filament to load Alpine components ?
54 Replies
Try
php artisan filament:assetsdid it once more and the script is present in the assets folder but still not loaded in the browser :/
do you have a repo you can share? it loads fine on my apps.
also what the exact version of Filament you are running?
I don't I'm sorry, I installed only Filament, Curator and Peek, made a theme like described and everything is on latest
Filament v3.0.63
Curator v3.0.5
should be loading fine.
i'm surprised your not getting any console error though in the browser.
I do have 2 warnings but no errors
and here is the full history of network by going to Filament > Media resource > Edit > Curations tab
yea, those are in livewire. wish they would get that fixed.
is the field not working? or are you just confused that you don't see it in the network tab?
the entire modal is not working, the image is loaded and I can fill the inputs but every buttons (except the X of the modal) are not interactive, whatever I click does nothing not even have a loading indicator
I then came to the conclusion that a script might be missing and I think it's the case as the curation.js is never loaded
The curation.js will only be used on the edit resource.
shouldn't it be loaded here ?
it loads when you click the create cruation button
maybe you are having a latency issue with your network
but i would expect that to throw console errors
I'm sorry I probably wasn't clear ^^'
the network screenshot above is on the curation modal
wdym by latency issue ?
slow network
closing and reopening the modal three times did this, do you have any guess ?
it's on local with sail I'm not sure if it could be the case ?
could possible be something with sail. I'm not sure. I don't use it.
i would think if it was sail related though you'd see the same issue with other fields too.
and no one else has reported this issue. so i'm not entirely sure what the probablem could be on your machine.
do you have any plugin in mind that uses alpine components so that I could test ?
Filament does
Tiptap Editor
a lot of them do.
RichEditor, MarkdownEditor, the non NativeSelect and non Native DatePicker are all alpine components
tested with tiptap and it's working on first try
tho clicking on "Create Curation" still does not laod the script
hmm. that's weird. they both use the same filament asset manager to load the components.
and I can't replicate the issue so I can't really deubg it either.
will try to re-install curation and tell you
i'll make a note to run some tests this week, but can't promise anything.
Are you using Octane by any chance?
I understand 😅
I'm not sure from where it could come from but this might help you, the script is randomly included, each red lines means open and close (first update means open, second close) even tho it's loaded afterward it generates errors when clicking on buttons
nope not at all I'm using basic setup of sail
@awcodes by changing ax-load from visible to eager it does load the script correctly, I think the problem comes from IntersectionObserver depending on the browser
Can you test it again with firefox ?
That video i posted was in firefox
oh ... wait
I tested on firefox it works tho it does not on firefox dev edition, I'm pretty sure the problem comes from interpretation of IntersectionObserver between the two browsers
also not related at all but is it normal that cropper can go outside the image and generates black bands ?
yes. but that is up to the end user as to how they crop their image. if you feel it is a bug though, you can check on cropperjs' github repo and see if others have discussed the issue or not.
GitHub
GitHub - fengyuanchen/cropperjs: JavaScript image cropper.
JavaScript image cropper. Contribute to fengyuanchen/cropperjs development by creating an account on GitHub.
Not sure it's about cropper itself but more how it has been integrated
Looking at their demo the cropping can't leave the image
https://fengyuanchen.github.io/cropperjs/
Cropper.js
JavaScript image cropper.
maybe i'm misunderstanding you, but in their demo you can certainly crop outside the image if you zoom out.
Oh we don't have the same thing then cause I only have the BG when zooming out and the container is the size of the image, maybe cause I'm on mobile don't know ?
Possibly. there's several issues open on their github about mobile. Maybe one of those is relevant.
Here's what I get, tho it seems to work fine except for buttons not having their icon labels tho they still work fine
i don't know.
i don't work on the package. 🙂
Do you think we could implement a button in curation to reset cropper container to the image size without any x overflow ?
not sure what you mean. there is a reset button that resets cropper to it's initial state.
ideally, you shouldn't even need to do much with curations. it's really more for creating one off images with a specific focal point at a specific size. then just use the glider component to output all your images at what ever size you need when you need to render them.
Curator is a different way of thinking about media than what we are traditionally used to. It operates under the premise that you don't need to generate physical files for each size for each images wasting space on your server for images that may not even be used.
was meaning to limitate boundaries so that it can't overflow
also I can't input in X or Y without having a weird behaviour, it changes my input to random numbers within the container, like having Y = -36, I delete 6 and it change to -70 ... 😅
if you can provide a video, maybe i can understand what you are doing better.
I don't really have a screen recorder on my comp I'm sorry 😓
Btw I forgot but wanted to ask, is there a reason you choosed visible over eager on async alpine for that component ?
because i don't want the script to load unless it's actually needed
and it's not needed until the modal is open
I tested eager and it was only loaded the moment the modal was shown, is it different on chromium browsers ?
that's when it's suppose to load
when the modal opens, that's when it requests the script
i think visible is the appropriate loading strategy for this case
if it doesn't work in a canary version of a browser then i'm not overly worried about it. 🙂
I'm sorry I don't understand well I think I'm missing something
On my computer I edited vendor files to change
ax-load="visible" to ax-load="eager" and the script was only loaded in network tab when the modal opens
I had the issue in base firefox too even if it's not on every load compared to dev edition
Tho dev edition is not a nightly it's just firefox with additional toolshttps://www.mozilla.org/fr/firefox/developer/
It's not well known but I'm using it to separate private usage navigation vs work related navigation
Mozilla
Firefox Developer Edition
Firefox Developer Edition est le navigateur super rapide qui dispose d’outils de développement de dernière génération et de nouvelles fonctionnalités telles que la prise en charge des grilles CSS ou du débogage de frameworks.
well, i'll make a note of it, but it's not a high priority to me. and you're also the only person who is having issues with it, so i can't say that it's an issue with the plugin and not an issue with your particular setup or browser instance.
i do appreciate the feedback though.
I understand, thx for the time you took for me
I might post an issue on async alpine instead as it's not related to filament nor your plugin