Component works fine in dev mode but broken in production

[lucperkins]

I'm a bit stumped on something. I have a slide-in drawer for a site I'm building that works fine in dev mode but is broken in the deployed site. I suspect there's a hydration problem but I can't seem to pinpoint it. First, I have a navbar with a toggler that controls the drawer (a lot has been omitted for brevity):

<!-- Navbar.vue -->
<template>
  <nav>
    <button @click="toggleDrawer">
      Show/hide drawer
    <button>

    <!-- other navbar stuff, including hydrated components -->
  </nav>

  <!-- Drawer.vue shown below -->
  <Drawer client:load />
</template>

<script setup lang="ts">
const toggleDrawer = () => {
  // Drawer toggle logic using nanostores
}
</script>

The Vue template for the drawer:

<!-- Drawer.vue -->
<template>
  <div>
    <p>Here is the drawer</p>

    <button @click="closeDrawer">
      Close me
    </button>
  </div>
</template>

<script setup lang="ts">
const closeDrawer = () => {
  // Drawer closing function using nanostores
}  
</script>

For some reason this works fine when I'm in iles dev mode but when I click the navbar button in the prod site, nothing happens. It's strange because I have other hydrated components with client:* statements in the navbar, like a dark/light mode toggler and some dropdowns, and those all work fine. But for some reason the drawer component only works in dev mode.

Does anything jump out at anyone as obviously incorrect here?

[lucperkins]

Never mind! I was able to figure this out, although I'm not sure if my solution should be considered canonical, so let me know if there's a better way. Basically, I extracted out the toggler in Navbar.vue into a separate component. Somehow, îles doesn't seem to like it if you mix hydrated components and standard Vue logic in a single component. So now I have a separate component that looks like this:

<!-- DrawerToggler -->
<template>
  <button @click="toggleDrawer">
    Show/hide drawer
  <button>
</template>

<script setup lang="ts">
const toggleDrawer = () => {
  // Drawer toggle logic using nanostores
}
</script>

And now my navbar component is "flat" in the sense that it wraps hydrated components but doesn't have any of its own Vue logic:

<!-- Navbar.vue -->
<template>
  <nav>
    <DrawerToggler client:load />

    <!-- other navbar stuff, including other hydrated components -->
  </nav>

  <!-- Drawer.vue shown below -->
  <Drawer client:load />
</template>

Ideally this wouldn't be an issue and you'd be able to apply Vue logic and wrap other hydrated components in an îles component, but this may not be feasible.

[ElMassimo]

Any components that are not interactive (such as Navbar) will be pre-rendered, and stripped away from the resulting JS bundle.

As a result, the logic in Navbar was only being executed at build time, and the click listener was never added to the pre-rendered button.

Your solution is appropriate, and is the one I would typically recommend. Depending on the amount of content and logic, a simpler alternative would have been to make Navbar interactive by using <Navbar client:load>, and removing client:load from Drawer. In some cases, the difference in JS bundle size is so small that both approaches are viable.

In summary, the mental model when working with islands is: if it has interactivity, it should be inside an island.

---

From a DX perspective, îles should log a warning if it detects you are adding listeners in non-island components, but I haven't found a way to implement this that strikes a balance between complexity and covering all cases, but I'm still exploring this space.

[lucperkins]

A warning would be nice, sure, but I can see why that'd be challenging to implement. For now, I'll see if there's a good place to document this!