Astro app (with Vue) no longer hydrates client-side after migrating from Astro 2.x to 3.x | Astro Lounge | Page 1

mild ermine Dec 5, 2023, 10:04 PM

#

Can anyone think of any reasons that my app would stop hydrating (for Vue components) after updating from Astro 2.x to 3.x? Literally no other code changes were made.

arctic iris Dec 5, 2023, 10:06 PM

#

not really 🤔. Have you upgraded the @astrojs/vue integration too?

mild ermine Dec 5, 2023, 10:07 PM

#

yep, that's at 3.0.4. astro is 3.6.4. there are no errors anywhere. but in my Vue components, even just doing a simple test with <div @click="doThis">test</div>, clicking it does nothing

#

this part of the config look ok still?

export default defineConfig({
  output: 'server',
  server: { host: true },
  adapter: aws(),
  integrations: [vue({ appEntrypoint: '/src/vue-main' }), vuetify],
  scopedStyleStrategy: 'class',
  build: {
    assets: 'assets',
  },

#

lemme rule out a potential dev environment issue (though I can't imagine what). gonna push this to staging and see if it still fails

#

ok, build failed

[astro:assets:esm] Could not load /rc-logo-white.svg (imported by src/components/QuickShare.vue): Could not find requested image `/rc-logo-white.svg`. Does it exist?
 error   Could not load /rc-logo-white.svg (imported by src/components/QuickShare.vue): Could not find requested image `/rc-logo-white.svg`. Does it exist?

did something change with how to reference images in public?

        <img
          src="/rc-logo-white.svg"
          alt="ReelCrafter Logo"
          height="60"
        >

arctic iris Dec 5, 2023, 10:14 PM

#

Shouldn't be the case: https://docs.astro.build/en/guides/images/#where-to-store-images

Docs

Images

Learn how to use images in Astro.

mild ermine Dec 5, 2023, 10:15 PM

#

ok, I can definitely bring it up by going to http://localhost:4321/rc-logo-white.svg. hmmm

#

what on earth

#

changing our code to work w/ Astro 3.x (moving from 2.x) wasn't a huge deal. maybe I should just spring for Astro 4.x and see how that goes 😄

arctic iris Dec 5, 2023, 10:18 PM

#

you could always try 🤣

mild ermine Dec 5, 2023, 10:19 PM

#

image still fails. and hydration is still borked

arctic iris Dec 5, 2023, 10:19 PM

#

maybe there is something else that is incompatible with Astro 3? Here is the original upgrade from 2 to 3 upgrade guide w\ all breaking changes and removed features: https://docs.astro.build/en/guides/upgrade-to/v3/

Docs

Upgrade to Astro v3

How to upgrade your project to the latest version of Astro (v3.0).

mild ermine Dec 5, 2023, 10:21 PM

#

yeah, I went through the breaking changes list. I'll go over it again.

#

client:load is still valid for Vue components, right?

arctic iris Dec 5, 2023, 10:22 PM

#

yes!

mild ermine Dec 5, 2023, 10:22 PM

#

🤔

#

lemme spin up a fresh Astro project to see if I can replicate this image issue

#

yep, replicated in a fresh project

#

<script setup lang="ts">
</script>

<template>
  <div>
    <img src="/favicon.svg" />
  </div>
</template>

#

this fails. but if I use the same img tag in an .astro file, it works great

arctic iris Dec 5, 2023, 10:29 PM

#

oh waw

#

then you might want to open an issue on github

dark gustBOT Dec 5, 2023, 10:29 PM

#

We love to keep the web weird, but... not that weird.

Please open an issue on the withastro/astro repo.

mild ermine Dec 5, 2023, 10:30 PM

#

thanks, will do!

#

@arctic iris replicated hydration issues too. how are people using Astro + Vue not filing bug reports left & right? 😳

#

oh wait

#

forgot client:load. one sec

#

ok whew 😆

#

so that's just in my project. will have to come back to that one.

arctic iris Dec 5, 2023, 10:32 PM

#

hehe

#

but at least it's weird that images don't resolve 🤔

mild ermine Dec 5, 2023, 10:33 PM

#

very

#

and seems broken in 3.x and 4.x

#

https://github.com/withastro/astro/issues/9328

GitHub

Vue components cannot reference images in public folder · Issue #93...

Astro Info Astro v4.0.1 Node v18.16.0 System macOS (arm64) Package Manager pnpm Output static Adapter none Integrations @astrojs/vue If this issue only occurs in one browser, which browser is a pro...

#

ok.. so there are some boot-up issues in 4.x when I run pnpm dev:

16:43:36 [WARN] [@astrojs/vue] Unable to resolve appEntrypoint `/src/vue-main`. Does the file exist?
16:43:44 [302] /apple-touch-icon-precomposed.png 31ms
16:43:44 [302] /apple-touch-icon.png 31ms
16:43:44 [200] /error 3ms
16:43:44 [200] /error 3ms
[Vue warn]: injection "Symbol(vuetify:defaults)" not found.
[Vue warn]: Unhandled error during execution of setup function
  at <VCard class="wrapper" >
16:43:45 [200] /media/c6d3Y1qUTxi-af-CByPV-A 930ms
16:43:45 [ERROR] [Vuetify] Could not find defaults instance
  Stack trace:
    at /Users/samh/Sites/reelcrafter/v2-presentation/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vuetify/src/composables/defaults.ts:25:24
    [...] See full stack trace in the browser, or rerun with --verbose.
[Vue warn]: injection "Symbol(vuetify:defaults)" not found.
[Vue warn]: Unhandled error during execution of setup function
  at <VCard class="wrapper" >
16:43:47 [200] /media/c6d3Y1qUTxi-af-CByPV-A 2559ms
16:43:47 [ERROR] [Vuetify] Could not find defaults instance
  Stack trace:
    at /Users/samh/Sites/reelcrafter/v2-presentation/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vuetify/src/composables/defaults.ts:25:24
    [...] See full stack trace in the browser, or rerun with --verbose.

#

  integrations: [vue({ appEntrypoint: '/src/vue-main' }), vuetify],

nothing crazy there. that actually worked in 3.x.

#

ok, this is a bug too

#

ok.. there's show-stopper bug #2: https://github.com/withastro/astro/issues/9330

so strange. these seem like major things, I can't believe I'm the only person to have caught this 😄

GitHub

Vue `appEntrypoint` not working · Issue #9330 · withastro/astro

Astro Info Astro v4.0.1 Node v18.16.0 System macOS (arm64) Package Manager pnpm Output server Adapter astro-sst Integrations @astrojs/vue vuetify If this issue only occurs in one browser, which bro...

#

pinging @fringe cape and @upbeat beacon for visibility

#

related: I'm happy to beta test major Astro updates, BTW! could I be put on some email list, if such a thing exists?

fringe cape Dec 5, 2023, 11:02 PM

#

We just released a fix for appEntrypoint that may have broken things, I’ll take a look

mild ermine Dec 5, 2023, 11:03 PM

#

thanks Nate! fixing the other issue so my repro is a link to StackBlitz rather than a GItHub repo. it'll be easier that way

fringe cape Dec 5, 2023, 11:03 PM

#

mild ermine ok.. there's show-stopper bug #2: https://github.com/withastro/astro/issues/9330...

Timing wise this change went out like… two hours ago? So you might have just been the first to hit it

mild ermine Dec 5, 2023, 11:03 PM

#

yeah, I just noticed there was a 4.0.1 out a couple of hours ago

#

and figured it's a newly introduced bug

#

ok, updated repro link on issue #9328

#

can confirm, that was working in 4.0.0

fringe cape Dec 5, 2023, 11:13 PM

#

Ah, I figured it out

#

There was a change that broke in the Vite dev server but silently passed in the build

#

Our test suite happened to only run the build

mild ermine Dec 5, 2023, 11:13 PM

#

aha

#

cool. as soon as the entry point thing is fixed, then I can deploy our app to staging to see if this hydration bug is only in dev, or in production too

fringe cape Dec 5, 2023, 11:43 PM

#

PR is up! https://github.com/withastro/astro/pull/9333

GitHub

Vue: Remove `hasDefaultExport` check from `appEntrypoint` logic by ...

Changes

Fixes #9330!
We used hasDefaultExport, which is a Rollup API. This is available in astro build but not during astro dev.
Now uses a custom method compatible with either astro dev or astro ...

fringe cape Dec 6, 2023, 12:00 AM

#

I left a comment on your issue! Would reccommend pinning @astrojs/vue to exactly 4.0.0 in the meantime. Hopefully my PR gets merged first thing tomorrow! https://github.com/withastro/astro/issues/9330#issuecomment-1841837826

GitHub

Vue `appEntrypoint` not working · Issue #9330 · withastro/astro

Astro Info Astro v4.0.1 Node v18.16.0 System macOS (arm64) Package Manager pnpm Output server Adapter astro-sst Integrations @astrojs/vue vuetify If this issue only occurs in one browser, which bro...

terse furnace Dec 6, 2023, 3:23 AM

#

Just a note here - I had similar issues with 4.0.1 with React. Deleting node_modules and then reinstalling fixed it so maybe worth a try.

mild ermine Dec 6, 2023, 3:27 AM

#

@fringe cape thank you, I appreciate you!

#

Now to dig into the Vue hydration issue (tomorrow)

mild ermine Dec 6, 2023, 3:21 PM

#

@cunning needle nice find on that image bug! I don't remember even seeing anything in the error about Vite, but great catch 🙂 I imagine I could also just move the svg into src/assets vs public, and that'd do the trick

cunning needle Dec 6, 2023, 3:23 PM

#

Yeah, I went through a rabbit hole this morning with this, ha! The issue is actually in multiple repos, the Vue compiler does something weird, the Vue Vite plugin doesn't respect the options correctly and we don't do anything

mild ermine Dec 6, 2023, 3:23 PM

#

are Vue/Vite maintainers aware of this?

cunning needle Dec 6, 2023, 3:24 PM

#

I'm planning to send a PR to their Vite plugin to fix the issue!

mild ermine Dec 6, 2023, 3:24 PM

#

you are a rockstar

cunning needle Dec 6, 2023, 3:24 PM

#

I think the weird behaviour in the Vue compiler is intended for Nuxt and stuff

mild ermine Dec 6, 2023, 3:24 PM

#

ahh

cunning needle Dec 6, 2023, 3:24 PM

#

We'll fix what we can 😄

#

Hopefully the workaround is enough for your usecase at the moment!

mild ermine Dec 6, 2023, 3:25 PM

#

yes, thank you! I'll give it a shot today. also maybe moving the svg into assets. it's just a small logo, so it probably belongs there anyway

mild ermine Dec 6, 2023, 6:17 PM

#

ok, confirmed.. hydration bug is in dev mode only 😕 ugh. I mean, that's better than production, but now I can't test stuff locally

#

anyone here available (for an hourly rate) to help get to the bottom of this?

#

otherwise I think I'll just have to cull huge parts of the codebase until it works.. then figure out what it was that was removed that was causing it. gotta be some dependency that's getting in the way

mild ermine Dec 6, 2023, 7:08 PM

#

omg.. hydration issue fixed. this shouldn't be happening, BUT:

<script setup lang="ts">
import { ref, computed, StyleValue } from 'vue';

that was the issue. changed that line to:

import { ref, computed, type StyleValue } from 'vue';

and now it's good, all works well. I'm not so sure simple TS errors like that should cause the app to break! hard to say where this issue lies, too, but I'm guessing Vite 😄

@fringe cape @cunning needle ☝️

fringe cape Dec 6, 2023, 7:18 PM

#

🤦 These are the worst kind of issues!

mild ermine Dec 6, 2023, 7:18 PM

#

haha

fringe cape Dec 6, 2023, 7:18 PM

#

Very glad you were able to figure it out!

mild ermine Dec 6, 2023, 7:19 PM

#

"whole app is busted, must be something major"

...

nope. literally one word removed = fix

fringe cape Dec 6, 2023, 7:20 PM

#

Vue is probably doing some hashing based on the contents of the file? Betting that StyleValue could be treeshaken in one environment but not the other for whatever reason

#

https://tenor.com/bgZks.gif

Tenor

mild ermine Dec 6, 2023, 7:21 PM

#

that's me, someday. just gonna toss my computer out the window and move to the mountains. goodbye, web dev world

#

you get a bit tired after doing it for 26 years 😅

fringe cape Dec 6, 2023, 7:24 PM

#

mild ermine that's me, someday. just gonna toss my computer out the window and move to the m...

The dream! 😴 💭

mild ermine Dec 6, 2023, 7:31 PM

#

Astro's been great to work with so far, BTW. Astro on Lambda is blazing fast. our pages get a ton of traffic all day (around 1.5M hits per week), and people are sending private portfolio pages to Disney, Netflix, and more, so reliability is key for us. so thank you to you & the team for all your hard work!

#Astro app (with Vue) no longer hydrates client-side after migrating from Astro 2.x to 3.x