Hydration warning mixes up client/server results

[alejandrovrojas]

Describe the bug

The client correctly warns when there's a hydration mismatch between the client and server, but the warning mixes up the results, showing the client state as server state and vice versa.

Reproduction

Defining a component's state that's dependent on client-side hydration, something like:

<template>
  <div>{{ value }}</div>
</template>

<script>
  export default {
    setup() {
      return { 
        value: import.meta.env.SSR ? "SSR" : "client"
      };
    },
  };
</script>

Will show the warning:

[Vue warn]: Hydration text content mismatch in <div>:
- Client: "SSR"
- Server: "client"

System Info

  System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Memory: 499.11 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.1.0 - /opt/homebrew/bin/node
    npm: 7.14.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 89.0
    Safari: 14.1.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.3 => 1.2.3 
    vite: ^2.3.6 => 2.3.6 

Used package manager: npm

[bluwy]

Still happening in Vite 2.9.0-beta.0, but it looks like a bug in Vue perhaps?

https://github.com/vuejs/core/blob/0342fae8ad0e71866e9b9725a1f9c471db775c76/packages/runtime-core/src/hydration.ts#L365-L372

Or something with HMR.

[bluwy]

Closing as it's an upstream issue. Perhaps it's also fixed as the code has changed

https://github.com/vuejs/core/blob/25f7a16a6eccbfa8d857977dcf1f23fb36b830b5/packages/runtime-core/src/hydration.ts#L134-L141

[sapphi-red]

FYI It is not changed yet.
https://github.com/vuejs/core/blob/25f7a16a6eccbfa8d857977dcf1f23fb36b830b5/packages/runtime-core/src/hydration.ts#L400-L406

But it will be fixed by vuejs/core#5953 (https://github.com/vuejs/core/pull/5953/files#diff-d13ae6fff054484d04947f8e9f28742e10fcbfb45d6c72846732d3d42a020cdeL119-R137).