Chakra elements seem to work with Nuxt 3 HMR only in ~20% of cases

[viktor-yunenko]

Bug report

Describe the bug

Most of the time all styling props that I try to use (including plain style="" along with chakra's pl, mr, etc) on chakra components don't auto-refresh. That also includes components as chakra.div. I noticed that replacing chakra's nodes with native divs fixes the issue, but then I can only use the native style property to add raw css.

There's also a lot of other problems, eg duplication of nodes, stale state, etc. It's hard to say how much of that issue is on Nuxt side, given that they have other HMR tickets currently in investigation. I found it interesting that native html nodes seem to play well with it though, comparing to chakra.

To reproduce

Even although it's the frequency of occurrence is high, it doesn't reproduce with 100% prob in many exact scenarios. Subjectively it affects 80% of all edits though.

Today I started deleting files from my project until I didn't get to at least one reliable reproduction case, although sounds as I can find a high number of other cases if I go through the same steps for other elements.

1. clone https://github.com/effective-altruism-work/eawork-frontend/tree/hmr-issue
2. yarn install
3. yarn run nuxi dev
4. http://localhost:3000/
5. open app.vue and remove the line color="gray.500"
6. in console see [vite] hot updated: /app.vue, but the color stays the same
7. remove :_hover="{color: 'blue.900'}" and this particular issue with the stale color prop will be fixed

Not sure attaching a code sandbox would help, as this is a very inconsequential example of the general problem. I wonder whether anyone else managed to setup nuxt 3 with chakra in general?

System information

• OS: MacOS 12.5.1 (21G83)
• Browser: Chrome latest, but also doesn't work in latest Firefox
• Version of @chakra-ui: "@chakra-ui/vue-next": "^1.0.0-alpha.15"
• Version of Node.js: v16.16.0

[viktor-yunenko]

For me splitting the affected components into separate child components sometimes helps. Not a solution of course, since afterwards I need to merge them back, but still better than reloading the dev server every 10 seconds.

[codebender828]

Thank you @victor-yunenko for the issue. Will take deeper look into the issue this week. Appreciate the reproduction.

[codebender828]

Hey @victor-yunenko. Thanks for the reproduction. I cloned your repo and ran it against my local environment a couple of times, and I was unable to reproduce it successfully. 🤔 I tried this with different versions of Node.js. (16, 18)

Here's a video of the reproduction.

https://user-images.githubusercontent.com/21237954/189643367-cfba09d6-93ef-45f3-b0fd-9153464ad765.mov

Are there any other conditions in which this is possible to reproduce? Do you still have the issue?

[viktor-yunenko]

Hi @codebender828 , thank you for checking, and thank you for working on chakra in general!

Indeed on my master branch HMR works fairly often. In the last ~7 days the refresh success rate has been closer to ~70%.

The hmr-issue branch had been a simple way of reproducing it a week ago, although I just checked and color changes there well, which is interesting. I can note that eg with CFlex's align and direction props the occurrence rate feels closer to 90-100%. With that in mind I pushed a new commit to the branch with the Flex example that so far reproduces reliably. Ie when I change direction to column or row the layouts doesn't update. Would that work for you as a check? I tried to create a codesnadbox but it doesn't compile with various errors or just shows a blank screen.

I also wonder whether Nuxt HMR works for other people with chakra?

I noticed that Nuxt HMR is quite poor in general, comparing to something mature as Nextjs. For example it doesn't refresh pure typescript files, nor does it seem to have a consistent strategy re vue lifehooks handling. Of course if they keep focusing on fixing only their specific problem it may still fall onto chakra-ui-vue package to work around other issues :(

[viktor-yunenko]

I haven't seen issues with standard props as color anymore 👍

The issue with CFlex align, direction, wrap being ignored by HMR and its other props is quite standard though, but sounds as better to open a new ticket for it.