Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'ssrContext' of undefined #5941

Closed
liamwang opened this issue Jun 21, 2017 · 4 comments
Closed

Cannot read property 'ssrContext' of undefined #5941

liamwang opened this issue Jun 21, 2017 · 4 comments
Labels

Comments

@liamwang
Copy link

liamwang commented Jun 21, 2017

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.
按照正常的编程思路,修改后的代码应该更加严谨才是

  1. npm install & npm run dev

  2. 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
Copy link
Contributor

JounQin commented Jun 24, 2017

@liamwang
Copy link
Author

@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 yyx990803 added the bug label Jun 26, 2017
@yyx990803
Copy link
Member

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

jkzing added a commit to jkzing/vue that referenced this issue Jun 27, 2017
should not create $ssrContext for root component, because it doesn't has $vnode

vuejs#5941
@mategvo
Copy link

mategvo commented Apr 4, 2019

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants