Issues with "yarn add"

[sptBlack]

Hey I have hard time adding this package to a project by "yarn add vue3-lazy-hydration". (If possible I would like to avoid npm)

I am keep getting this error:

"error An unexpected error occurred: "expected hoisted manifest for "vue3-lazy-hydration#vue#@vue/server-renderer#@vue/compiler-ssr""."

Trace:
Trace: Invariant Violation: expected hoisted manifest for "vue3-lazy-hydration#vue#@vue/server-renderer#@vue/compiler-ssr" at invariant (C:\Users\xxx\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:2318:15) at _loop2 (C:\Users\xxx\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:91029:9) at PackageHoister.init (C:\Users\xxx\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:91099:19) at PackageLinker.getFlatHoistedTree (C:\Users\xxx\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:48549:20) at PackageLinker.<anonymous> (C:\Users\xxxAppData\Roaming\npm\node_modules\yarn\lib\cli.js:48560:27) at Generator.next (<anonymous>) at step (C:\Users\xxx\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:310:30) at C:\Users\xxx\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:328:14 at new Promise (<anonymous>) at new F (C:\Users\xxx\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:5305:28)

Yarn version: v1.22.19

Things I've tried:

• yarn cache clean
• reinstalling node_modules with yarn install

[freddy38510]

Hello,

Have you tried deleting the yarn.lock file and possibly the node_modules folder?

Is your project a monorepo? Did you add the vue3-lazy-hydration package as a development dependency (which you shouldn't)?

Please, let me know if removing the lock file works, meanwhile I should move the Vue package to devDependencies.

[sptBlack]

I've tried to delete both yarn.lock and node_modules and didn't work. And the project is not a monorepo also we are using quasar-ssg although not sure if it would affect anything.

[freddy38510]

Did you mean quasar-app-extension-ssg ?

I will push a commit with Vue moved to devDependencies, make a new version and release it.

Let me know if this actually fixes the problem.

[freddy38510]

@sptBlack,

The new release is published to npm registry.

Could you try it ?

[sptBlack]

Did you mean quasar-app-extension-ssg ?

Exactly.

It successfully added this time via yarn!

[freddy38510]

Great ! It was a stupid mistake on my part :s

As the creator of quasar-app-extension-ssg, I would be happy if I got feedback on lazy hydration with ssg. Don't hesitate, even if you need to open new issues :)

[sptBlack]

Well my current intention with this package to make an image component dynamic during runtime without rebuilding the static sites everytime when an image got changed on server-side. Similar to Nuxt's client-only component

ref: https://nuxtjs.org/docs/features/nuxt-components/#the-client-only-component

EDIT: It works you basically can just do this in a project that uses quasar-app-extension-ssg:

<LazyHydrationWrapper when-idle> <image src="your-dynamic-img-url"/> <LazyHydrationWrapper/>

[freddy38510]

ref: https://nuxtjs.org/docs/features/nuxt-components/#the-client-only-component

Quasar has a similar component called QNoSsr.

SSG pre-render html like SSR mode but at build-time. Then hydration happens at client-side and all the application becomes interactive. So I'm not sure if you need lazy hydration for your use case.

Are dynamic images fetched from an external source on the client side?

[sptBlack]

Yes from AWS server and the data image is just like "image.png" and the full url will look like 'https://aws.com/image.png" in image src

[freddy38510]

So the src attribute of the img tag is dynamic and images are not processed at build time, is that correct ?

In this case, it depends if the first image displayed when a user first loads the page should be determined at client-side or not.

If so, you can use the QNoSsr component. If not, lazy hydration can improve the Estimated Input Latency and Time to Interactive when a user first loads the page.

[sptBlack]

So the src attribute of the img tag is dynamic and images are not processed at build time, is that correct ?

Yes indeed. Lazy hydration semi-works though, however it improves the latency by quite a lot.

About semi-working Lazy Hydration it doesn't work when you refresh the page (it shows the previous image that got changed on server-side already) but as an example you click on the image and go to a page and then go back to previous page (home page) then it actually shows the right image until you refresh the page again not sure what causes that honestly.

[sptBlack]

@freddy38510
In case you are interested trying out how it works:

Basically top left image is incorrect it should show a different one, even if you refresh it wont work. But if you click on an image then go back to previous page then it will show the correct one.

[freddy38510]

I can't reproduce it. What image are we talking about exactly ?

I saw that RouterView is wrapped in a Suspense component. I should add a test for this use case, because I don't know how the LazyHydrationWrapper could behave.

For information, hydration only occurs at first-load, including if your refresh the page. Your app works like a regular SPA after hydration. When you go back to previous page, there is no hydration, your app is already interactive.

Edit: I got it, now I see the image you were talking about. I will investigate it.