N
Nuxt•4w ago
Noan

Custom Module composable state not reset after hot reload

I wanted to learn how to do nuxt modules so I made this: https://github.com/Waradu/keyboard the problem is in src/runtime/keyboard.ts > handlers. If the application hot reloades the "new" event get added but the old one are still in the list. Example testapp: 
<template>TEST</template>

<script lang="ts" setup>
import { Key } from "wrdu-keyboard/key";

const keyboard = useKeyboard();

keyboard.down([Key.A], () => {
  console.log("pressed");
});
</script>
<template>TEST</template>

<script lang="ts" setup>
import { Key } from "wrdu-keyboard/key";

const keyboard = useKeyboard();

keyboard.down([Key.A], () => {
  console.log("pressed");
});
</script>
if I now change "pressed" to "pressed2" while running dev mode and the application hot reloads, it prints "pressed" and "pressed2". Printing "handlers" from keyboard.ts shows that there are 2 KeyHandlers instead of 1. Why is that and how to fix?
GitHub
GitHub - Waradu/keyboard
Contribute to Waradu/keyboard development by creating an account on GitHub.
2 Replies
kapa.ai
kapa.ai•4w ago
Hi @Noan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have enough specific information to directly address your issue with the custom module's composable state not resetting after hot reload. However, I can provide some general insights about hot reloading in Nuxt that might be helpful. The issue you're experiencing seems to be related to state persistence during hot module replacement (HMR). In Nuxt, there are known challenges with HMR and state management, especially with custom modules and composables. Here are a few points that might be relevant to your situation: 1. Hot Reload Handling: Nuxt provides ways to handle hot reloading, especially for content updates. As mentioned in the Nuxt Content v1 documentation (https://content.nuxt.com/v1/getting-started/advanced/#handling-hot-reload), you can listen to the content:update event to perform custom actions during hot reloads. While this is specific to the content module, it illustrates that custom handling for hot reloads might be necessary for modules. 2. State Persistence: The reloadNuxtApp utility provides options for persisting state during reloads. As described in the Nuxt documentation (https://nuxt.com/docs/api/utils/reload-nuxt-app), you can use the persistState option to save the current state of your app. However, this is more about full reloads rather than HMR. 3. Known Issues: There are known issues with hot reloading in Nuxt, particularly with renaming files or changing paths. This is evidenced by a GitHub issue (https://github.com/nuxt/nuxt/issues/25631) that was recently resolved. While not directly related to your problem, it shows that HMR can be sensitive to file changes. To address your specific issue, you might need to implement a custom reset mechanism for your module's state during hot reloads. This could involve: 1. Listening for HMR events in your module. 2. Clearing or resetting the handlers array when an HMR event occurs. 3. Potentially using defineLazyEventHandler as mentioned in the H3 documentation (https://h3.unjs.io/guide/event-handler#lazy-event-handlers) to ensure your handlers are properly initialized on each reload. However, without more specific information about how your module is structured and how it interacts with Nuxt's HMR system, I can't provide a definitive solution. You might need to dive deeper into Nuxt's HMR implementation or consider reaching out to the Nuxt community for more targeted assistance with custom module development and HMR handling. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@760490917433311233> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?