Issues when transpiling typeScript into javaScript

[alepefe95]

Hello,

I am using vueuse/head in a vite-vue3 project where I mainly use composition API .
Everything works until I transpile the code into javascript.
The static website does not load properly and I get the following error:

Uncaught ReferenceError: can't access lexical declaration 'qg' before initialization.
The error appear when I hover the underlined word in the picture below:
https://tinypic.host/i/screenshot-from-2022-12-12-06-00-06.RfFfp

Code inside main.ts file:

import { createHead } from "@vueuse/head"

const app = createApp(App)
app.use(createHead())

Code inside the setup function inside component:

import { useHead } from "@vueuse/head";

useHead({
    title: 'title'
})

Am I doing anything wrong?

Thank you in advance,
Alepefe.

[harlan-zw]

Hey @alepefe

What you have looks correct. Would it be possible to provide a reproduction?

[alepefe95]

Hello @harlan-zw,

I found where the issue comes from.
The rollupOptions inside the vite.config.ts build params:

    build: {
      chunkSizeWarningLimit:1500,
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              // return id.toString().split('node_modules/')[1].split('/')[0].toString();

              if(id.includes('@vue')){
                return 'vue'

              } else if(id.includes('echarts')) {
                return 'echarts'

              } else if(id.includes('elastic')) {
                return 'elastic'
              }
              
              return 'vendor'
            }
          }
        }
      },
      minify: 'esbuild',
    }

vueuse/head was being put in the vendor chunk and it looked like some dependency order problem.

I found something curious as well:
I have to use the useHead function inside the onActivated() lifecycle hook if I want the title to change every time a certain page is visited (not just the first time).

Maybe this has something to do with my routing design.
Route

{
        path: '/projects',
        name: 'account:projects',
        component: LayoutDefault, props: { component: AccountProjects },
        meta: { category: 'account:projects' }
},

Layout.vue

<div id="main" class="">
  <KeepAlive>
    <component :is="component"></component>
  </KeepAlive>
</div>

[harlan-zw]

I'm guessing you mean useHead, can you share that code as well?

[alepefe95]

@harlan-zw
Yes, I meant that in some components, I have to use the useHead() function inside onActivated lifecycle function in order to get the expected behavior.

setup(props: any){
    onActivated(()=> {
        useMeta({title: 'title'})
    })
}

instead of

setup(props: any){
    useMeta({title: 'title'})
}

Browse history:
main page (first load) -> contact page (first load) -> main page (cached page so the contact page's meta remains here).

I still don't know why this happens but I suspect it is something related with directives or .

I would not consider this a blocking issue as it does not hamper progress on my project.
However, this information might be helpful for you.

I will publish further news when I come back to the "meta management" part of my project.

Thank you for your attention.

The solution for this issue is change the configured rollupOptions inside the vite.config.ts file.
It is worth mentioning that this issue has not happened with any other library.

[Remzi1993]

@harlan-zw IS this still an issue? I was thinking about using this package in my Vue project?

[harlan-zw]

Nuxt uses this library with no issues, I think it depends on your own configuration.