Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search component missing from PROD environment #253

Open
CarlosCB1986 opened this issue Dec 8, 2024 · 1 comment
Open

Search component missing from PROD environment #253

CarlosCB1986 opened this issue Dec 8, 2024 · 1 comment

Comments

@CarlosCB1986
Copy link

The search component is not appearing in PROD environment, whereas it does appear in DEV environment.

image
@CarlosCB1986
Copy link
Author

CarlosCB1986 commented Dec 9, 2024

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).

CarlosCB1986 added a commit to CarlosCB1986/fuwari that referenced this issue Dec 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant