Hydration error for XyzTransition and XyzTransitionGroup in Nuxt static mode

[tanguyMichardiere]

Hello, when I compile my Nuxt app in static mode (nuxt generate), the XyzTransition and XyzTransitionGroup elements are compiled to xyztransition and xyztransitiongroup, which are not valid HTML, causing an hydration error in dev mode and a "Failed to execute 'appendChild' on 'Node'" error when serving the compiled project with a static web server.

Vue's Transition and TransitionGroup elements are compiled to div and span respectively so they work out of the box in Nuxt.

I installed AnimXYZ in my project following the docs and everything else works, but I need to use the 'appear-visible' feature so I need XyzTransitionGroup.

[milesingrams]

Sounds like the plugin isn't being properly loaded using Vue.use somehow. The instructions in the docs are for using the plugin with a standard vue app, but I believe frameworks like Nuxt and Gridsome and Vite each have their own ways of loading Vue plugins. Did you follow these steps? (https://nuxtjs.org/docs/2.x/directory-structure/plugins/#vue-plugins)

Normally you would just have to use Vue.use but it appears Nuxt has some extra steps to make plugins work.

[tanguyMichardiere]

Yes I followed these steps, I have a animxyz.js module using Vue.use and importing '@animxyz/core', and this plugin is added in the plugins array of nuxt.config.js. I tried to add the transpile part but it doesn't change anything.

Everything works fine, when I use XyzTransitionGroup with appear-visible it works as intended in dev mode (except for the hydration error in the console), but once compiled for static mode it doesn't run animations because of this.

Looking at the source code, I understand it is supposed to create Vue's TransitionGroup element directly, so maybe it's a problem with Nuxt.

I also tried with Nuxt in 'server' target, which still does SSR, and the only difference is that it serves a page with XyzTransitionGroup elements instead of xyztransitiongroup, with the same "Failed to execute 'appendChild' on 'Node'" error.

[milesingrams]

Hmmm thats very curious. I will try to generate a Nuxt project and see if I can get static generation to work. I'll let you know what I find!

[milesingrams]

I built a Nuxt project and added @animxyz/vue and had no issues running in development mode yarn run dev as well as generating yarn run generate and testing out of /dist using yarn run start. I didn't see the hydration error or any errors during generation or run. here's my plugins/vue-animxyz.ts file:

import Vue from 'vue'
import VueAnimXyz from '@animxyz/vue'

Vue.use(VueAnimXyz)

And what I added to nuxt.config.js:

export default {
  css: [
    '@animxyz/core'
  ],
  plugins: ['~/plugins/vue-animxyz.ts'],
}

Not sure what's happening to cause your errors. Perhaps make sure you're using the latest version of Nuxt? I will keep a lookout for these types of errors or related issues. I will leave the issue open for a period in case others are able to reproduce the issue and come up with a fix. I'm sorry the Nuxt/AnimXYZ integration is causing you issues and I wish I could help more!

[tanguyMichardiere]

I found my mistake, I put import '@animxyz/core in plugins/animxyz.js (like advised in #13). With that Nuxt would throw a cryptic error when trying to add the module except when it was in client mode, so I left it that way but it was certainly what created the error. What I had to do instead was what you did there, importing the css globally with Nuxt and importing the module for client and server. Thanks!