vuejs / router

🚦 The official router for Vue.js
https://router.vuejs.org/
MIT License
3.84k stars 1.18k forks source link

Hydration node mismatch: - Client vnode: Symbol(v-cmt) #2064

Closed seyyed-iman-asnafi closed 9 months ago

seyyed-iman-asnafi commented 9 months ago

Vue version

3.3.4

Link to minimal reproduction

-

Steps to reproduce

I have a SSR Hydration issue

Error:

image

But i have just a simple App.vue

<template>
    <RouterView/>
</template>

Router

import { createRouter, createWebHistory, createMemoryHistory } from 'vue-router';

import { IS_CLIENT } from '../util';

// Views
import TestView from '../pages/Test.vue';

const router = createRouter({
    history: IS_CLIENT ? createWebHistory() : createMemoryHistory(),

    routes: [
        {
            path: '/',
            name: 'Home',
            component: TestView
        }
    ]
});

export default router;

TestView.vue

<template>
    <h1>TEST</h1>
</template>

Created Html from server:

<div id="app"><h1>TEST</h1></div>

Why i get this warning?!

What is expected?

Just do work properly

What is actually happening?

God know

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13400
    Memory: 2.35 GB / 15.78 GB
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (119.0.2151.93)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

edison1105 commented 9 months ago

Without a reproducible demo, we have no way to locate the problem.

seyyed-iman-asnafi commented 9 months ago

@edison1105 StackBlitz

LinusBorg commented 9 months ago
import { createApp } from './main';
import router from './router';

const { app } = await createApp();
await router.isReady();

app.mount('#app');

https://router.vuejs.org/api/interfaces/Router.html#isReady