Could not find a declaration file for module 'vue3-lazy-hydration'.

[viniciusnevescosta]

Vite 3.1.0 Vue 3.2.37

I'm using vue3-lazy-hydration-wrapper with Pnpm package manager.

import { createSSRApp } from 'vue'
import { LazyHydrationWrapper } from 'vue3-lazy-hydration'
const app = createSSRApp({})

app.component(
    // custom registered name
    'LazyHydrate',
    LazyHydrationWrapper
)

I am getting the following error when I try to import: "Could not find a declaration file for module 'vue3-lazy-hydration'". All the "solutions" say to import @types, but I am not using Typescript.

If you can help me, thank you very much!

Repository link -> Takes you directly to main.js

[freddy38510]

Hello,

This is just a warning from your IDE, the library should still work.

Typescript declaration files are used by the IDE to provide autocompletion and Intellisense for packages, even if you are not using Typescript in your project.

I will add a Typescript declaration file for the library as soon as possible.

[dsvgl]

Looking forward for a declaration file, too 👍🏻

[viniciusnevescosta]

Hello,

This is just a warning from your IDE, the library should still work.

Typescript declaration files are used by the IDE to provide autocompletion and Intellisense for packages, even if you are not using Typescript in your project.

I will add a Typescript declaration file for the library as soon as possible.

Yes, Thanks for the answer, but the warning appears in the developer tools:

[Vue warn]: Failed to resolve component: LazyHydrationWrapper
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App>

I wonder if this relates to

[viniciusnevescosta]

Looking forward for a declaration file, too 👍🏻

How could I do this? Or maybe solve this? Because I think the library is not working, which is a shame

[dsvgl]

@Jolonte the warning complains about not finding LazyHydrationWrapper. That is true because you registered custom name for the component: LazyHydrate. You need to use it with that name:

<LazyHydrate :when-idle="4000" @hydrated="onHydrated">
  <!-- Content -->
</LazyHydrate>

[freddy38510]

I admit that the documentation on LazyHydrateWrapper as a global component can be confusing if you copy/paste the code.

@Jolonte I will try to make this part more readable. @dsvgl thanks you for helping him !

About the issue with the type declaration, I am currently switching the library to Typescript. I guess it's safer than manually writing a declaration file.

[dsvgl]

@freddy38510 I can do a PR to otimize this part in the docs. I could also add usage example for nuxt 3 (via nuxt plugin).

[freddy38510]

@freddy38510 I can do a PR to otimize this part in the docs. I could also add usage example for nuxt 3 (via nuxt plugin).

That would be great !

[viniciusnevescosta]

First of all I would like to thank you for the support, it helped me a lot! I managed to "solve" the errors, I put it in quotes because I do not know if it really worked, just stopped appearing warnings.

I moved the imports from my Main.js to my App.vue:

import { createSSRApp } from 'vue'
import { LazyHydrationWrapper } from 'vue3-lazy-hydration'
import { useLazyHydration } from 'vue3-lazy-hydration'
import QuestionBox from './components/QuestionBox.vue'

const app = createSSRApp({})
app.component(
    // custom registered name
    'LazyHydrate',
    LazyHydrationWrapper,
    {
        props: useLazyHydration
    }
)

Note that I declared the props with useLazyHydration, however, I don't know if it is necessary or not. But until that point it was still showing errors in the console. So in my vite.config.js, I put the following lines:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => ['LazyHydrate'].includes(tag)
                }
            }
        })
    ]
})

From then on my errors "ended", in quotes again because I really don't know if it's working since I don't have a confirmation message, but, I think it is. Maybe it's because I'm still learning about the concepts of parcial hydration...

Thanks again for the support @freddy38510 and @dsvgl , I will be closing this issue and keep using the library. See you later!

[dsvgl]

Glad it worked out for you. If you're doing SSR, I can highly recommend Nuxt 3. It takes a lot of the hard (SSR) parts away.

[viniciusnevescosta]

Glad it worked out for you. If you're doing SSR, I can highly recommend Nuxt 3. It takes a lot of the hard (SSR) parts away.

I am actually doing SPA, I am still hooking into Vue. I want to take a look at Vitesse before I move to Nuxt, but thanks, if you want to see the project I worked on. I ended up quoting you.

[freddy38510]

I managed to "solve" the errors, I put it in quotes because I do not know if it really worked, just stopped appearing warnings.

@Jolonte, Maybe I should add logging for use in a development environment to let developers see how and when lazy hydration is happening.

I am actually doing SPA

I saw in your project that you implemented SSR incorrectly. Hydration of components does not occur in a SPA.

For hydration to occur (at client-side), the application must be server-side pre-rendered. SSR and SSG (via SSR) are candidates for this library.