I18n-module: nuxt-link does not work in transition-group

[alexkcollier]

Reproduction link

https://github.com/nuxt-community/nuxt-i18n

Steps to reproduce

1. Install nuxt
2. Install and configure nuxt-i18n
3. Place nuxt-link in transition group with or without localePath()

nuxt.config.js

module.exports = {
  mode: 'universal',
  modules: [
    ['nuxt-i18n', {
      locales: [
        { code: 'en' },
        { code: 'fr' },
        { code: 'es' }
      ],
      defaultLocale: 'en',
      vueI18n: {
        fallbackLocale: 'en',
        messages: {
          en: {
            welcome: 'Welcome'
          },
          fr: {
            welcome: 'Bienvenue'
          },
          es: {
            welcome: 'Bienvenido'
          }
        }
      }
    }]
  ]
}

index.vue

<template>
  <div>
    <transition-group>
      <nuxt-link
        v-for="i in 3"
        :key="i"
        to="/new">
      New
      </nuxt-link>
    </transition-group>
  </div>
</template>

What is expected ?

Route transition

What is actually happening?

children is undefined

_{This bug report is available on Nuxt.js community (#c66)}

[paulgv]

Hi @alexkcollier
I'm currently unable to reproduce the issue on a fresh install. What versions of Nuxt and nuxt-i18n are you using? What's in your pages directory?
It would really help if you could provide a sample project with the issue.
At first glance, I'm not sure this has anything to do with <transition-group> and I don't see how it could be related to nuxt-i18n either, so I'll need more details on this!

Thanks!

[alexkcollier]

I've tested with nuxt 1.0.0 and 1.4.0 with nuxt-i18n 2.9.2 and 2.9.4.

My pages directory contains index.vue, new.vue and README.md. This is in a fresh instance of nuxt created through npx create-nuxt-app . with no extra packages other than nuxt-i18n.

I tried running with npm run dev and npm start, and the issue only occured in dev. The issue also only occurs when nuxt-i18n is loaded in nuxt.config.js. When nuxt-i18n is loaded, I can only use <a> for links in transition groups. When it isn't, I can use nuxt-link as well.

[paulgv]

@alexkcollier I invited you to collaborate to this repo: https://github.com/paulgv/nuxt-i18n-transition-group-issue
I've tried reproducing your issue there but everything works fine so maybe you'll manage to do it so I can have a look afterward.

Thanks!

[alexkcollier]

I've reproduced with your repo as well.

Stack trace pointed me here in .nuxt/client.js:

  // line 521
  if (process.env.NODE_ENV !== 'production') {
    console.error(err);
  } else {
    console.error(err.message || nuxtError.message);
  }

So I went back to my original repo which is using cross-env, built and ran in production. Everything worked. Killed that, switched to your repo and ran in dev (without cross-env) and the issue occurred. Built and ran that in production, no issue.

On a fresh computer without cross-env, and the issue is reproducing with your repo. Both computers are on Windows 10, npm 5.7.1, Node 9.8 on the main and 8.9 on the other.

[Jesus82]

I have the same issue. It happens when I click a nuxt-link, and in the origin page there is a transition-group with a component inside. Target page then appears with the children is undefined error. If I remove the component inside the transition-group or thetransition-group tag, everything works fine.

In my case, the nuxt-link is outside of the transition-group.

_Edit: Tried with a <a href> link inside the transition-group, and everything works OK. Tried also with a nuxt-link inside the transition-group and it gives the error. So for me it is caused by any kind of component being inside a transition-group_

[junkboy0315]

same issue.

component (not normal element) inside transition-group occurs following errors related to transition-group.
This error doesn't happen without nuxt-i18n.

• OK

    <transition-group>
      <div v-for="item in items" :key="item.id">something</div>
    </transition-group>

• Not OK

    <transition-group>
      <SomeComponent  v-for="item in items" :key="item.id" />
    </transition-group>

[Harry7Lee]

I have the same problem too.
If put any <nuxt-link :to='localePath()'></nuxt-link> inside the <transition-group>, it will return error.
nuxt-link without localePath() is fine.

[rchl]

I've reported this as https://github.com/nuxt/nuxt.js/issues/4319 in nuxt.js before finding this bug. It has link to reproducible testcase.

[arantes555]

Seeing the same issue here. In dev only, nuxt-link inside a transition-group with nuxt-i18n enabled gives the error. Removing any of those 4 makes it work fine.

[rchl]

Can't reproduce it anymore myself. Even with old tests.

[paulgv]

Closing for now!