Cannot read property 'ssrContext' of undefined

[liamwang]

Version

2.3.4

Reproduction link

https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/util/title.js#L13

Steps to reproduce

1. git clone https://github.com/vuejs/vue-hackernews-2.0.git

2. Change /src/util/title.js file like this:

const serverTitleMixin = {
  created() {
    /* before change */
    // const title = getTitle(this)
    // if (title) {
    //   this.$ssrContext.title = `Vue HN 2.0 | ${title}`
    // }

    /* after change */
    const title = getTitle(this) || 'Vue HN 2.0'
    if (this.$ssrContext) {
      this.$ssrContext.title = title
    }
  }
}

According to functional and robustness, the changed code should be ok as normal thinking.
按照正常的编程思路，修改后的代码应该更加严谨才是

3. npm install & npm run dev

4. open browser, enter http://localhost:8080

What is expected?

The if condition statement ensured this.$ssrContext to be not undefined when trying to set title a value on it. It shoud be ok as normal expected.

What is actually happening?

Error trace in console:

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'ssrContext' of undefined"

(found in <Root>)
error during render : /
TypeError: Cannot read property 'ssrContext' of undefined
    at Vue$3.get (D:\Temp\vue-demos\vue-hackernews-2.0\node_modules\vue\dist\vue.runtime.common.js:4423:23)
    at Vue$3.created (src/util/title.js:20:21)
    at callHook (D:\Temp\vue-demos\vue-hackernews-2.0\node_modules\vue\dist\vue.runtime.common.js:2554:21)
    at Vue$3.Vue._init (D:\Temp\vue-demos\vue-hackernews-2.0\node_modules\vue\dist\vue.runtime.common.js:3998:5)
    at new Vue$3 (D:\Temp\vue-demos\vue-hackernews-2.0\node_modules\vue\dist\vue.runtime.common.js:4093:8)
    at new Store (D:\Temp\vue-demos\vue-hackernews-2.0\node_modules\vuex\dist\vuex.js:264:21)
    at createStore (src/store/index.js:10:9)
    at createApp (src/app.js:21:16)
    at module.exports.__webpack_exports__.default (src/entry-server.js:13:35)
    at module.exports.__webpack_exports__.default (src/entry-server.js:11:9)

Error in browser:

500 | Internal Server Error

---

I suppose it is a bug of vue-server-renderer. If not, what happened?

[JounQin]

$ssrContext is a getter.

https://github.com/vuejs/vue/blob/dev/src/core/index.js#L11-L16

[liamwang]

@JounQin 👍 Thank you for giving the information, which has dispelled my doubt.

This changed code got be ok:

    if (this.$vnode && this.$vnode.ssrContext) {
      this.$ssrContext.title = title
    }

But then again, this kind of code is very confusing for debugging and maintaining. How would I know $ssrContext is ready to use, even when this below code is not safe.

    if (this.$ssrContext) {
      this.$ssrContext.title = title
    }

The source code https://github.com/vuejs/vue/blob/dev/src/core/index.js#L11-L16 should be optimized like:

Object.defineProperty(Vue.prototype, '$ssrContext', {
  get () {
    /* istanbul ignore next */
    if(this.$vnode){
      return this.$vnode.ssrContext
    }
  }
})

[yyx990803]

This only happens for the root component because it doesn't have this.$vnode. Should be easy to fix.

[mategvo]

@liamwang for me the this.$ssrContext when trying to access in a component. How did you connect it? Really stuck on this one, thanks for help!