fix: wait to detect nodes until components are mounted

nuxt · Aug 4, 2022 · cd5c239 · cd5c239
1 parent 6f4ca9d
commit cd5c239
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 26 deletions.
diff --git a/packages/nuxt/src/app/components/layout.ts b/packages/nuxt/src/app/components/layout.ts
@@ -1,4 +1,4 @@
-import { defineComponent, isRef, nextTick, Ref, Transition } from 'vue'
+import { defineComponent, isRef, nextTick, onMounted, Ref, Transition, VNode } from 'vue'
 import { _wrapIf } from './utils'
 import { useRoute } from '#app'
 // @ts-ignore
@@ -26,19 +26,24 @@ export default defineComponent({
 
       const transitionProps = route.meta.layoutTransition ?? defaultLayoutTransition
 
+      let vnode: VNode
+      if (process.dev && process.client && transitionProps) {
+        onMounted(() => {
+          nextTick(() => {
+            if (['#comment', '#text'].includes(vnode?.el?.nodeName)) {
+              const filename = (vnode?.type as any).__file
+              console.error(`\`${filename}\` does not have a single root node and will cause errors when navigating between routes.`)
+            }
+          })
+        })
+      }
+
       // We avoid rendering layout transition if there is no layout to render
-      return _wrapIf(Transition, hasLayout && (transitionProps),
+      return _wrapIf(Transition, hasLayout && transitionProps,
         {
           default: () => {
-            const layoutComponent = _wrapIf(layouts[layout], hasLayout, context.slots).default()
-            if (process.dev && process.client && hasLayout && transitionProps) {
-              nextTick(() => {
-                if (layoutComponent.el?.nodeName === '#comment') {
-                  console.error(`Layout \`${layout}\` does not have a single root node and will cause errors when navigating between routes.`)
-                }
-              })
-            }
-            return layoutComponent
+            vnode = _wrapIf(layouts[layout], hasLayout, context.slots).default()
+            return vnode
           }
         }
       ).default()

diff --git a/packages/nuxt/src/pages/runtime/page.ts b/packages/nuxt/src/pages/runtime/page.ts
@@ -1,4 +1,4 @@
-import { computed, DefineComponent, defineComponent, h, inject, nextTick, provide, reactive, Suspense, Transition } from 'vue'
+import { computed, DefineComponent, defineComponent, h, inject, nextTick, onMounted, provide, reactive, Suspense, Transition, VNode } from 'vue'
 import { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouterView } from 'vue-router'
 
 import { generateRouteKey, RouterViewSlotProps, wrapInKeepAlive } from './utils'
@@ -34,26 +34,16 @@ export default defineComponent({
           if (!routeProps.Component) { return }
 
           const key = generateRouteKey(props.pageKey, routeProps)
-          const pageComponent = h(Component, { key, routeProps, pageKey: key } as {})
           const transitionProps = routeProps.route.meta.pageTransition ?? defaultPageTransition
 
-          if (process.dev && process.client && transitionProps && pageComponent) {
-            nextTick(() => {
-              if (pageComponent.el?.nodeName === '#comment') {
-                const filename = (pageComponent.type as any).__file
-                console.error(`\`${filename}\` does not have a single root node and will cause errors when navigating between routes.`)
-              }
-            })
-          }
-
           return _wrapIf(Transition, transitionProps,
             wrapInKeepAlive(routeProps.route.meta.keepalive, isNested && nuxtApp.isHydrating
             // Include route children in parent suspense
-              ? pageComponent
+              ? h(Component, { key, routeProps, pageKey: key, hasTransition: !!transitionProps } as {})
               : h(Suspense, {
                 onPending: () => nuxtApp.callHook('page:start', routeProps.Component),
                 onResolve: () => nuxtApp.callHook('page:finish', routeProps.Component)
-              }, { default: () => pageComponent })
+              }, { default: () => h(Component, { key, routeProps, pageKey: key, hasTransition: !!transitionProps } as {}) })
             )).default()
         }
       })
@@ -70,7 +60,7 @@ const defaultPageTransition = { name: 'page', mode: 'out-in' }
 
 const Component = defineComponent({
   // eslint-disable-next-line vue/require-prop-types
-  props: ['routeProps', 'pageKey'],
+  props: ['routeProps', 'pageKey', 'hasTransition'],
   setup (props) {
     // Prevent reactivity when the page will be rerendered in a different suspense fork
     const previousKey = props.pageKey
@@ -83,6 +73,23 @@ const Component = defineComponent({
     }
 
     provide('_route', reactive(route))
-    return () => h(props.routeProps.Component)
+
+    let vnode: VNode
+    if (process.dev && process.client && props.hasTransition) {
+      onMounted(() => {
+        nextTick(() => {
+          if (['#comment', '#text'].includes(vnode?.el?.nodeName)) {
+            const filename = (vnode?.type as any).__file
+            console.error(`\`${filename}\` does not have a single root node and will cause errors when navigating between routes.`)
+          }
+        })
+      })
+    }
+
+    return () => {
+      vnode = h(props.routeProps.Component)
+
+      return vnode
+    }
   }
 })