Search component missing from PROD environment
The search component is not appearing in PROD environment, whereas it does appear in DEV environment.
Console is throwing errors:
(index):1 [astro-island] Error hydrating /_astro/Search.BI8uCq4K.js TypeError: Illegal invocation at j (render.DXsOrPE0.js:1:12078) at Wn (render.DXsOrPE0.js:1:12385) at Ue (Search.BI8uCq4K.js:1:5148) at render.DXsOrPE0.js:1:16795 at st (render.DXsOrPE0.js:1:6707) at ie (render.DXsOrPE0.js:1:7384) at $ (render.DXsOrPE0.js:1:3153) at Ut (render.DXsOrPE0.js:1:4096) at render.DXsOrPE0.js:1:16735 at st (render.DXsOrPE0.js:1:6707) start @ (index):1 await in start childrenConnectedCallback @ (index):1 t @ (index):1 (anonymous) @ (index):1Understand this errorAI render.DXsOrPE0.js:1 hydration_mismatch
I am getting this exact same error on another component I wrote and trying to narrow down the exact moment where this happens I have had to remove most of the code and, strangely the below code gets the error:
<script lang="ts">
const test = "Test";
</script>
<div>
<div>{test}</div>
<div>{test}</div>
<div>{test}</div>
</div>
but removing one of the div inside removes the error...
<script lang="ts">
const test = "Test";
</script>
<div>
<div>{test}</div>
<div>{test}</div>
</div>
The component is simply being called like
<StackedBar client:load/>
Finally, I resolved the issue by refactoring the 3 div into only 1, but this doesn't make any sense to me, maybe after updating to Svelte 5 one of the dependencies has a bug. For the search component for now I am using client:only="svelte" as a workaround as I didn't have enough time to fix it, but it seems that Svelte 5 doesn't like that you have separate root html elements in a component. If you place the search-panel div inside the div of the search-bar div that fixes the issue for desktop and the search bar is shown again (tho it doesn't work on mobile as the bar is not shown upon clicking the search icon, but knowing this is a good starting point).