search

nuxt-modules / i18n

I18n module for Nuxt
https://i18n.nuxtjs.org
MIT License
1.76k stars 485 forks source link

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

Closed Fir3st closed 5 years ago

Fir3st commented 5 years 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).

This bug report is available on Nuxt community (#c253)
Fir3st commented 5 years 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.

kevinmarrec commented 5 years 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.

Fir3st commented 5 years 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.

rchl commented 5 years 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 vue-meta@2 yet though, so it's hard to test. @pimlie might be interested in this problem.

pimlie commented 5 years 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!

kevinmarrec commented 5 years 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.

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

rchl commented 5 years 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.

kevinmarrec commented 5 years ago

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