`\r\n\r\nchunk-SOI3BFCQ.js?v=091eb3ff:1759 [Vue warn]: Hydration attribute mismatch on \u003Cimg src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\" alt> \r\n - rendered on server: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\"\r\n - expected on client: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632813\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/search\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/search?title=dd', hash: '', query: {…}, name: 'search', path: '/search', …} ... > \r\n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \r\n at \u003CTransition onAfterLeave= [ƒ] name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n### Reproduction\r\n\r\nchunk-SOI3BFCQ.js?v=091eb3ff:1759 [Vue warn]: Hydration attribute mismatch on \u003Cimg src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\" alt> \r\n - rendered on server: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\"\r\n - expected on client: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632813\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/search\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/search?title=dd', hash: '', query: {…}, name: 'search', path: '/search', …} ... > \r\n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \r\n at \u003CTransition onAfterLeave= [ƒ] name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n### Describe the bug\r\n\r\nchunk-SOI3BFCQ.js?v=091eb3ff:1759 [Vue warn]: Hydration attribute mismatch on \u003Cimg src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\" alt> \r\n - rendered on server: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\"\r\n - expected on client: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632813\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/search\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/search?title=dd', hash: '', query: {…}, name: 'search', path: '/search', …} ... > \r\n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \r\n at \u003CTransition onAfterLeave= [ƒ] name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n### Additional context\r\n\r\nchunk-SOI3BFCQ.js?v=091eb3ff:1759 [Vue warn]: Hydration attribute mismatch on \u003Cimg src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\" alt> \r\n - rendered on server: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632814\"\r\n - expected on client: src=\"/_nuxt/assets/image/searchBg.jpg?t=1707570632813\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/search\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/search?title=dd', hash: '', query: {…}, name: 'search', path: '/search', …} ... > \r\n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \r\n at \u003CTransition onAfterLeave= [ƒ] name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n### Logs\r\n\r\n_No response_",[3018,3021,3024,3027],{"name":3019,"color":3020},"3.x","29bc7f",{"name":3022,"color":3023},"pending triage","E99695",{"name":3025,"color":3026},"needs reproduction","FBCA04",{"name":3028,"color":3029},"⛔️ can be closed","484893",25730,"nuxt","closed","Image error bug","2024-03-29T20:49:34Z","https://github.com/nuxt/nuxt/issues/25730",0.60462415,{"description":3038,"labels":3039,"number":3044,"owner":3031,"repository":3031,"state":3032,"title":3045,"updated_at":3046,"url":3047,"score":3048},"### Environment\n\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v19.2.0`\r\n- Nuxt Version: `3.1.0`\r\n- Nitro Version: `2.0.0`\r\n- Package Manager: `pnpm@7.25.1`\r\n- Builder: `vite`\r\n- User Config: `app`, `css`, `components`, `alias`, `modules`, `colorMode`\r\n- Runtime Modules: `@nuxtjs/color-mode@3.2.0`, `@pinia/nuxt@0.4.6`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n[codesandbox](https://codesandbox.io/p/sandbox/adoring-dirac-pbw7ds?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A6%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A6%7D%5D&file=%2Fpages%2Findex.vue)\n\n### Describe the bug\n\n```\r\n[Vue warn]: Hydration children mismatch in \u003Cdiv>: server rendered element contains fewer child nodes than client vdom. \r\n at \u003CSpin> \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CRouteProvider key=\"/\" routeProps= {Component: {…}, route: {…}} pageKey=\"/\" ... > \r\n at \u003CFragmentWrapper > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=2 > \r\n at \u003CNuxtRoot>\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3040,3041],{"name":3019,"color":3020},{"name":3042,"color":3043},"❗ p4-important","D93F0B",18491,"Hydration node mismatch in 3.1.0","2023-01-25T19:46:40Z","https://github.com/nuxt/nuxt/issues/18491",0.6060637,{"labels":3050,"number":3055,"owner":3031,"repository":3031,"state":3032,"title":3056,"updated_at":3057,"url":3058,"score":3059},[3051,3052],{"name":3022,"color":3023},{"name":3053,"color":3054},"2.x","d4c5f9",10231,"Bug of hydration children for html elements","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10231",0.60722804,{"description":3061,"labels":3062,"number":3065,"owner":3031,"repository":3031,"state":3032,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Environment\n\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.15.1`\r\n- Nuxt Version: `3.0.0-rc.10`\r\n- Nitro Version: `0.5.3`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-j4oicm?file=pages/index.vue\n\n### Describe the bug\n\n\r\nWhen Use fallback for clinet-only component , throw warning In browser console (when refresh the Page) \r\n\r\nmessage : Hydration node mismatch:\r\n- Client vnode: ...\r\n-----------------------\r\nbut if remove fallback , it's ok\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell\n[Vue warn]: Hydration node mismatch:\r\n- Client vnode: Symbol(Fragment) \r\n- Server rendered DOM: \u003Cspan>\u003C/span> \r\n at \u003CClientOnly> \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/\" routeProps= {Component: {…}, route: {…}} pageKey=\"/\" ... > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\n```\n",[3063,3064],{"name":3019,"color":3020},{"name":3022,"color":3023},14906," Hydration node mismatch When Use client-only fallback","2023-01-19T17:42:11Z","https://github.com/nuxt/nuxt/issues/14906",0.6180929,{"description":3071,"labels":3072,"number":3077,"owner":3031,"repository":3031,"state":3032,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Environment\n\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: vite\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jztfdl?file=pages%2Findex.vue\n\n### Describe the bug\n\nWe will get two warnings like the following logs\r\n\r\nWhen we use jsx synax,even and we don't wirte any code that can effect server render:\r\n\r\n```tsx\r\nimport { defineComponent } from 'vue';\r\n\r\nexport const testComponent = defineComponent(\r\n () => {\r\n const templateText = 'my text';\r\n return () => \u003Cdiv>hello wrold {templateText}\u003C/div>;\r\n },\r\n {\r\n name: 'test-component',\r\n }\r\n);\r\n```\r\n\r\nbut still mistach.\r\n\r\n\n\n### Additional context\n\n\u003Cimg width=\"421\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/24537993/8cdefaac-6eba-4002-9cd9-b76a0bf4a4bc\">\r\n\r\nI don't know why they are different.\r\n\r\n(vnode.children !== node.data).\r\n\r\nMaybe it's a error of render.\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration text mismatch:\r\n- Client: \"hello wrold my text\"\r\n- Server: \"hello wrold \" \r\n at \u003CTestComponent> \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CRouteProvider key=\"/\" vnode= Object route= Object ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n\r\n\r\n\r\n\r\n[Vue warn]: Hydration children mismatch in \u003Cdiv>: server rendered element contains fewer child nodes than client vdom. \r\n at \u003CTestComponent> \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CRouteProvider key=\"/\" vnode= Object route= Object ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\n```\n",[3073,3074],{"name":3019,"color":3020},{"name":3075,"color":3076},"upstream","E8A36D",22574,"Mismatch vnode.children & node.data when use tsx","2023-08-10T09:35:35Z","https://github.com/nuxt/nuxt/issues/22574",0.6182554,{"description":3083,"labels":3084,"number":3087,"owner":3031,"repository":3031,"state":3032,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.15.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: bun@1.0.4\r\n- Builder: -\r\n- User Config: colorMode, devtools, experimental, typescript, modules, css, ui, runtimeConfig\r\n- Runtime Modules: @pinia/nuxt@0.4.11, @nuxt/ui@2.9.0, nuxt-security@0.14.4\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-dgvnv6-s4j4zq?file=pages%2Findex.vue\n\n### Describe the bug\n\nA simple use of `useFetch` and `v-if` inside the template is returning a Hydration node mismatch. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration node mismatch:\r\n- Client vnode: Symbol(\"v-cmt\") \r\n- Server rendered DOM: \r\n\u003Cdiv> \u003Cempty string> \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CRouteProvider key=\"/\" vnode= \r\nObject { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }\r\n route= \r\nObject { fullPath: \"/\", hash: \"\", query: {}, name: \"index\", path: \"/\", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: \"/\" }\r\n ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\n```\n",[3085,3086],{"name":3019,"color":3020},{"name":3022,"color":3023},23572,"Hydration node mismatch","2023-10-08T14:43:58Z","https://github.com/nuxt/nuxt/issues/23572",0.62018836,{"description":3093,"labels":3094,"number":3097,"owner":3031,"repository":3031,"state":3032,"title":3098,"updated_at":3099,"url":3100,"score":3101},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: extends, modules, hooks\r\n- Runtime Modules: @nuxt/content@2.12.0, @nuxt/ui@2.14.1\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/draftman-nuxt-reproduction-2\r\n\r\n### Describe the bug\r\n\r\nSince migrating from nuxt2 to nuxt3, I've noticed multiple hydration problems, particularly with nuxt/content rendering.\r\nIn this case, it happen when a wrapper is added around ProseImg component.\r\n\r\n### Additional context\r\n\r\nSSR :\r\n\r\n\r\nAfter hydration :\r\n\r\n\r\n### Logs\r\n\r\n```shell-script\r\n[Vue warn]: Hydration node mismatch:\r\n- rendered on server: \u003Cimg src=\"https://i.imgur.com/xyywXJ1.png\" alt=\"Test\" data-v-inspector=\"components/content/ProseImg.vue:3:5\">\r\n- expected on client: Symbol(v-cmt) \r\n at \u003CCallout icon=\"i-heroicons-light-bulb\" > \r\n at \u003CAsyncComponentWrapper icon=\"i-heroicons-light-bulb\" > \r\n at \u003CMDCRenderer body= Object data= Object tag=\"div\" ... > \r\n at \u003CContentRendererMarkdown value= Object excerpt=false tag=\"div\" > \r\n at \u003CContentRenderer value= Object excerpt=false tag=\"div\" > \r\n at \u003CContentQuery path=\"/\" find=\"one\" > \r\n at \u003CContentDoc> \r\n at \u003C[...slug] onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/\" vnode= Object route= Object ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CNuxtLayoutProvider layoutProps= Object key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n```\r\n",[3095,3096],{"name":3019,"color":3020},{"name":3022,"color":3023},25963,"Hydration issue","2024-02-26T17:48:58Z","https://github.com/nuxt/nuxt/issues/25963",0.6216765,{"description":3103,"labels":3104,"number":3108,"owner":3031,"repository":3031,"state":3032,"title":3109,"updated_at":3110,"url":3111,"score":3112},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0-rc.8`\r\n- Package Manager: `yarn@1.22.18`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-fpnxxl?file=app.vue,pages%2Findex.vue\n\n### Describe the bug\n\nAn hydratation warn appears when using an `input` of type `text` or `email` inside `index.vue` file. \n\n### Additional context\n\nIt does not occur if moving code in `app.vue` without `pages` folder.\r\n\r\nIt does not occur with type `date`.\n\n### Logs\n\n```shell\nvue.js?v=cd7cae4a:1268 [Vue warn]: Hydration children mismatch in \u003Cform>: server rendered element contains more child nodes than client vdom. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/\" routeProps= {Component: {…}, route: {…}} pageKey=\"/\" > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\n```\n",[3105,3106,3107],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},14734,"Hydration children mismatch with simple `input` of type `email`","2023-01-19T17:39:25Z","https://github.com/nuxt/nuxt/issues/14734",0.6242778,{"description":3114,"labels":3115,"number":3118,"owner":3031,"repository":3031,"state":3032,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Environment\r\n\r\n````\r\n- Operating System: Linux\r\n- Node Version: v18.14.2\r\n- Nuxt Version: 3.7.1\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: pnpm@8.6.12\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n````\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/martinszeltins/nuxt-mismatch\r\nor\r\nhttps://stackblitz.com/edit/nuxt-starter-ehmtcj?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nI started a new Nuxt project, added 1 simple component and I am getting a hydration mismatch in the console. The error does not always appear on the initial load. But if you refresh the page a few times the mismatch error shows up. Sometimes with multiple refreshes it disappears. It is really strange.\r\n\r\n````\r\n[Vue warn]: Hydration children mismatch in \u003Cdiv>: server rendered element contains more child nodes than client vdom. \r\n at \u003CFormField> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n````\r\n\r\nHere is my app.vue:\r\n\r\n```js\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CFormField>\r\n \u003Cinput type=\"text\" placeholder=\"Username\">\r\n \u003C/FormField>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nAnd here is my FormField:\r\n```js\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdiv>\r\n \u003Cslot>\u003C/slot>\r\n \u003C/div>\r\n\r\n \u003Cdiv v-if=\"props?.errors?.length\">\u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n const props = defineProps\u003C{\r\n errors?: any[]\r\n }>()\r\n\u003C/script>\r\n\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3116,3117],{"name":3019,"color":3020},{"name":3022,"color":3023},23056,"Nuxt 3.7 - Hydration children mismatch in \u003Cdiv>: server rendered element contains more child nodes than client vdom.","2023-09-08T19:14:21Z","https://github.com/nuxt/nuxt/issues/23056",0.6258505,{"description":3124,"labels":3125,"number":3132,"owner":3031,"repository":3031,"state":3032,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-qjtrhd-mtyvxv\r\n\r\n### Describe the bug\r\n\r\n```vue\r\n\u003C!-- MyWrapper.server.vue -->\r\n\u003Ctemplate>\r\n \u003CAnotherServerComponent />\r\n\u003C/template>\r\n```\r\n\r\nDirectly using a server component as another server component's root will cause a hydration warning:\r\n```\r\nruntime-core.esm-bundler.js:48 [Vue warn]: Hydration node mismatch:\r\n- rendered on server: \u003C!--]--> \r\n- expected on client: Symbol(v-fgt) \r\n at \u003CNuxtIsland name=\"MyWrapper\" lazy=false props= Proxy(Object) {} ... > \r\n at \u003CMyWrapper> \r\n at \u003CApp key=4 > \r\n at \u003CNuxtRoot>\r\n```\r\n\r\n```\r\n[Vue warn]: Hydration children mismatch on \u003Cdiv data-v-inspector=\"app.vue:4:3\">…\u003C/div> \r\nServer rendered element contains fewer child nodes than client vdom. \r\n at \u003CNuxtIsland name=\"MyWrapper\" lazy=false props= Proxy(Object) {} ... > \r\n at \u003CMyWrapper> \r\n at \u003CApp key=4 > \r\n at \u003CNuxtRoot>\r\n```\r\n\r\nI think it is at least an undocumented behavior.\r\n\r\n### Additional context\r\n\r\nThe previous post in https://github.com/nuxt/nuxt/issues/27731#issuecomment-2180766312 was ignored so I reopened a new issue.\r\n\r\n### Logs\r\n\r\n_No response_",[3126,3129],{"name":3127,"color":3128},"documentation","5319e7",{"name":3130,"color":3131},"server components","839413",27810,"Server component cannot be the root element of another server component","2024-07-11T11:56:47Z","https://github.com/nuxt/nuxt/issues/27810",0.62630004,["Reactive",3138],{},["Set"],["ShallowReactive",3141],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdrMvtr043XeHq34HSBqT9Xh_pJsUodINEAvtkr3Vxng":-1},"/nuxt/nuxt/25383"]