tl;dr HMR working everywhere except for imported pinia store refs.
I have a fairly basic Vue3 + vite + pinia site, and I'm trying to get hot module replacement (HMR) working for store values. Whenever I modify a ref on a component *.vue file directly and use it in it's template, it's updating the page. However, if it's a ref from a pinia store, I have to manually refresh the page for the change to be reflected.
Some things I've tried:
- changing how file is imported (relative import of straight from src
import { useAuthStore } from '../../../store/auth';orimport { useAuthStore } from '/src/store/auth';) - changing how the store is defined (setup store or options style)
- Vite HMR doesn't detect changes to components nested under sub folders
- Vite doesn't update included js files when changed
- updating vite config to use polling
server: { watch: { usePolling: true,} }(which apparently isn't great) - adding
acceptHMRUpdateto the store declaration, as per docs, but this didn't work either. As mentioned in the answer to this SO question, after adding this, I do see the change reflected in the console, but not visually in the viewport
UPDATE: So from the last bullet, pinia issue 843 apparently that's expected behavior, but I can't get it to work even with the comment -> change -> uncomment that they mentioned. I didn't really understand their explanation, if anyone can expand on it would really appreciate it!
Note: The functionality of the page isn't the issue, if the store is updated through user input, the page does update as you'd expect, this is just about getting HMR to work through the store. Also, it doesn't generalize to any *.js file imported; with composables, for instance, HMR works fine. Likewise with other variables, etc imported from *.js files.
Details:
"pinia": "^2.0.36",
"vue": "^3.2.25",
"vite": "^2.9.9",
