Setting the value of reactive property in SSR overwrites the reactive property with the plain JS value

[lwansbrough]

Version

Vue 2.7.2
Node.js 16

Reproduction link

stackblitz.com

Steps to reproduce

I'm using the following Pinia store. All that's happening here is the state is being set to a value. According to Pinia's docs, this should work just fine. And indeed it does in the browser.

import serialize from 'serialize-javascript'

export const useSiteStore = defineStore('site', {
  state: () => ({
    domain: null
  }),
  actions: {
    async setSite(domain) {
      console.log(serialize(this.domain)) // { "value": null }
      this.domain = domain
      console.log(serialize(this.domain)) // "example.com"
    }
  }
})

What is expected?

The console.log outputs should match in structure with just the value having changed. I'm unsure whether it should be an object returned or strictly just the value, but it should be the same for both. (The browsers return null and then "example.com"). this.domain should be updated reactively.

What is actually happening?

When this.domain = domain is executed, the reactive reference or whatever you'd call it is overwritten and replaced by a plain JS string. The result is that this.domain is no longer reactive. It's worth noting that the above code works perfectly in Chrome/Firefox. It only fails during SSR. As a result Node.js is outputting [Vue warn]: toRefs() expects a reactive object but received a plain one.

---

I initially filed this issue with the Pinia team, but they don't seem convinced that this is a Pinia issue. vuejs/pinia#1425

[lwansbrough]

Possibly related to this? Or is a similar bug.

[posva]

Your repro has a few issues, here is a fixed version: https://stackblitz.com/edit/vitejs-vite-dahva7?file=src/App.vue

But this is still missing the important part: the SSR

[lwansbrough]

Repro: https://stackblitz.com/edit/vite-vue2-xcr4jb?file=src/store/site.js (see console)

[lwansbrough]

Thank you @yyx990803