ObSeSSeN
ObSeSSeN
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
I updated the StackBlitz with a second set of test buttons that use a custom component that is exactly the same as the first one, but does not disable the button when loading = true
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
@Kal you are right, this seems to be a very related problem. If I do not disable the button when it is loading there is no hydration error for that button in FF 🙈
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
I also opened an issue on Nuxt here https://github.com/nuxt/nuxt/issues/31296
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
@Omnislash , @Kal I have put together a small example in StackBlitz (https://stackblitz.com/edit/nuxt-starter-3c8vwwjq) using a custom button component and switching its loading and disabled state in different sequences. I found that going from a loading state to a loaded state works fine in Chrome, but causes issues in Firefox when refreshing the page. Going from a loaded state to a loading state works fine in both. The only dependency used is Tailwind, which I would imagine should not make a difference.
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
@Kal Locally I’m using a MacBook Pro M1 and have the project setup with Nuxt 3, Nuxt UI 3 beta.2, Pinia, Supabase
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
On which project do you think this should go - Nuxt or Nuxt UI? 🤔
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
Just a not on how I'm viewing the issue. If I open the Stackblitz in Chrome, clear the console and refresh the preview everything is fine. If I do the same in Firefox I get a hydration error.
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
Thank you! Just someone sharing my two day madness will help me not go crazy 😅
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
I found a working playground with v2 and same problem there https://stackblitz.com/edit/nuxt-ui-ekwj75tb?file=app.vue
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
This will be a bigger problem than I thought.... I seem to be unable to setup Nuxt 3 in Stackblitz with Nuxt UI 3 which uses Tailwind 4 🙈
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
Will do 👍
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
You guys said that you are not able to reproduce my issue…are you using Chrome or Firefox?
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
I don’t have that
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
Not sure what you mean... for this example I made a new page with a blank layout
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
Anywhere I want to start from a loading state and then load the data through Pinia this happens. I was trying a million different things and then decided to do this simple example, wich also gave me the same error 🙈
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
But this happens for me on a lot of different components around the page... I'm not sure I should be wrapping them all in <ClientOnly>
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
It gives me the same thing in FF... But I noticed something else, if I do a hard refresh in FF (CMD+Shift+R) it loads fine. If I then do a normal refresh (CMD+R) it gives me the error. 😕
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
I have the following:
"@iconify-json/carbon": "^1.2.8",
"@iconify-json/game-icons": "^1.2.1",
"@iconify-json/heroicons": "^1.2.2",
"@iconify-json/lucide": "^1.2.28"
"@iconify-json/carbon": "^1.2.8",
"@iconify-json/game-icons": "^1.2.1",
"@iconify-json/heroicons": "^1.2.2",
"@iconify-json/lucide": "^1.2.28"
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
So, Firefox gives me an error, but Chrome works fine... What could be causing this discrepancy?
79 replies
NNuxt
Created by ObSeSSeN on 3/7/2025 in #❓・help
Hydration hell - A simple loading state on a Nuxt UI button
Well I don't get an error in chrome 🤦‍♂️
79 replies