Refreshing Components

[usernotnull]

I will illustrate with an example:

There are 3 buttons which load conditionally in a blade file, each is an alpine component.
The view is updated by Livewire, adding/removing the buttons accordingly.

If one of the views which was originally not added when the page loaded (but added later by Livewire), gets called, we would receive an "Uncaught (in promise) Error: Component not found".

I originally solved this by just loading all elements and conditionally hiding them instead of removing them.
Of course, this is not very efficient, so my question is, is there a way to reload the components dynamically through JS? Maybe by listening to livewire changes to the DOM and calling a certain function?

Thanks!

[KevinBatdorf]

If I understand correctly:

That error triggers occurs when the component you are trying to connect to doesn't exist.

It's just a simple selector though (Line 31).

document.querySelector(`[x-data][x-id="${componentName}"], [x-data]#${componentName}`)

To avoid it, you should add probably only use $component() when you know the element will be there, or otherwise add in your own check first to make sure it's there. I think you could do a try/catch and just ignore the error. It's not an expensive operation.

[usernotnull]

Thanks for the prompt reply Kevin.
The component actually does exist, but it was injected dynamically into the DOM much later (by a user interaction through Livewire calls), after alpine initialized, so $component() will not catch it, and I do want to interact with the new component (which exists and is newly added by Ajax diffing).

Is there a way to re-check/initialize all the components on the page? Like to maybe reload alpine or such?

[KevinBatdorf]

The closure should execute every time so it should always be checking. That's why it's cached and returns early at the top.

Are you sure the component is not eventually being discovered? The error might just be from the first tick when the browser is updating the dom or something, but it works after that.

[usernotnull]

I resolved the issue which had nothing to do with Alpine or this lib.
(An issue with global scope trait hiding the model behind the scenes, which reflected onto the front-end later).

But it's good to know that the closure runs every time, so that next time I notice a bug I can rule out this issue :)

[KevinBatdorf]

Ah ok great :)