UI libraries delete page's title when TypeScript is used in project

Fir3st
5
Fir3st
commented 4 months ago

Version

v5.3.0

Reproduction link

https://nuxtjs.org/examples/typescript

Steps to reproduce

  1. Create nuxt project with TypeScript
  2. Add any UI framework that supports notifications and messages (I've already tested AT UI, Element UI and Ant Design)
  3. Add framework into the project
  4. Put somewhere notification/message (like in my project, https://github.com/treevity/treevity/blob/antd-message/client/pages/login.vue)

What is expected ?

The package should work without side effects

What is actually happening?

When message/notification disappears, page's title is deleted

Additional comments?

I know, it's weird, and my first thoughts were that's the problem of UI library, but I've tested 3 of them and the problem still persists. When I removed the package from modules, it worked fine. It works fine also for vanilla nuxt project (without TypeScript).

bug
0
Fir3st
5
Fir3st
commented 4 months ago

I found it's similar to https://github.com/nuxt-community/nuxt-i18n/issues/151, when I set seo to false, it works fine.

0
kevinmarrec
370
kevinmarrec
commented 4 months ago

@Fir3st I think it's not TypeScript related, this is more likely an issue with page meta (vue-meta) being overriden at some moment.

And please provide a ready reproduction repository, not something where steps are installing packages, create or moving files.

0
Fir3st
5
Fir3st
commented 4 months ago

@kevinmarrec Ok, I've created example repository https://github.com/Fir3st/nuxt-i18n-test with two branches: master and javascript where javascript branch is equivalent to master branch. When you use plain js version, it works fine, but with Typescript (even with plain js page declaration) it causes the issue. And as I wrote before, if you set seo to false, it works fine.

0
rchl
373
rchl
commented 4 months ago

@Fir3st I can confirm that typescript version has the problem while javascript doesn't but I don't know why.

That said, seo = true is pure evil and I'm hoping it will be disabled by default in next major version - #346

Also, while I don't know where the difference in behavior comes from, it might be fixed in latest vue-meta version, I feel. Nuxt is not using [email protected] yet though, so it's hard to test. @pimlie might be interested in this problem.

0
pimlie
1.1k
pimlie
commented 4 months ago

Probably similar as reported here? https://github.com/nuxt/vue-meta/issues/396

Thats fixed in vue-meta v2.0.4. Although nuxt will print a warning about a not recommended version, its fine to ignore that warning (note: there is only one breaking change with regards to boolean attributes). So feel free to test vue-meta v2 in your project and report any errors in the vue-meta repo. Thanks!

0
kevinmarrec
370
kevinmarrec
commented 4 months ago

@Fir3st @rchl
Will check it out but yeah I'm confused too, TypeScript becomes JavaScript at Webpack build step (ts-loader), so runtime should be same in both TS & JS, really weird that there would be in a issue only with TS.

0
rchl
373
rchl
commented 2 months ago

@Fir3st I've updated your project to work with latest Nuxt (https://github.com/rchl/bugs-nuxt-i18n-typescript-title ) and it works for me there without problems now. So problem seems fixed.

0
kevinmarrec
370
kevinmarrec
commented 2 months ago

As a side note, AFAIK this is something that has been fixed through [email protected] that is shipped since Nuxt 2.9. https://github.com/nuxt/vue-meta/issues/396#issuecomment-504674486

0
Informations
Bug Report โ€ข Open
#c253 - Created 4 months ago