[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"

Question

I have the following Navigation.vue component:

<template>
  <div>
    {{user.first_name}}
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'

  export default {
    name: 'hello',
    methods: {
      ...mapActions(['myAccount'])
    },

    mounted: function () {
      if (localStorage.getItem('access_token')) {
        this.myAccount()
      }
    },

    computed: {
      ...mapGetters(['user'])
    }
  }
</script>

This code returns:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"

but the strange thing is that user first name is showing correctly. What am I doing wrong?

Fording

I'm assuming this is because, in your vuex store, the state of user is initialized as null. Just initialize the user to an empty object {}. – Respecting

Add Your comment as an answer and I will accept it. – Kilmer

Answer 1

You are most likely getting that error because user in your Vuex store is initially set to null. The user getter mapped to your Vue component is returning that null value before some initialization to the Vuex store properly sets the user.

You could initially set the user to an empty object {}. This way, user.first_name in your Vue component's template will be undefined and nothing will be rendered in the template.

---

Alternatively, you could add a v-if="user" attribute to the containing div element:

<div v-if="user">
  {{ user.first_name }}
</div>

This way, the div and its contents will not be rendered until the value of the mapped user property is truthy. This will prevent Vue from trying to access user.first_name until the user is properly set.

Respecting

Answer 2

A solution that worked for me was to set the user to an empty string ' ' instead of null.

const state = {
    user: ''
}

Nannana

Answer 3

beforeMount(){
 if (localStorage.getItem('access_token')) {
        this.myAccount()
   }
}

Missend

Welcome to Stack Overflow. Please write your answer in English, as Stack Overflow is an English only site. – Communicable