When trying to sign up a user in Nuxt, an error occurs stating "Cannot read property 'then' of undefined."

Question

When trying to sign up a user in Nuxt, an error occurs stating "Cannot read property 'then' of undefined."

I've been encountering an issue while trying to sign up or log in as a user from my Nuxt app to an API that is functioning perfectly. The error message

Cannot read property 'then' of undefined

keeps popping up, and I can't figure out the reason behind this error. Another error message that I come across is

unknown action type: authenticateUser

.

Previously, I successfully made a post request from the signup page. However, since I am now attempting to store some data, I decided to move the axios request to the store.

Below is the code snippet for reference:

On the signup page, when clicking on the signup button, it triggers the createAccount method.

data() {
    return {
      isSignup: true,
      form: {
        email: null,
        fullname: null,
        password: null
      }
    }
},
methods: {
    createAccount() {
      this.$store.dispatch("authenticateUser", {
        isSignup: this.isSignup,
        form: this.form
      })
      .then(() => {
        this.$router.push('/loginsuccess')
      })
      .catch(e => console.log(e))
    }
  }

In my store/profile.js file, which is configured as a store module, I have specified the mutations and actions:

export const mutations = {
    setToken(state, token) {
        state.token = token
    },
    logIn(state) {
        state.loggedin = true
    }
}

export const actions = {
    async authenticateUser(vuexContext, authData) {
        let authUrl = 'https://lookaam.herokuapp.com/signup/'
        if (authdata.isLogin) {
            authUrl = 'https://lookaam.herokuapp.com/login/'
        }

        return await this.$axios
        .$post(authUrl, authData.form)
        .then(result => {
            const token = result.data.token
            vuexContext.commit('setToken', token)
        })
        .catch(e => console.log(e))
    },
}

In my nuxt.config.js file, I have the following setup:

  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    baseURL: process.env.BASE_URL,
    Credentials: false 
  },

Upon clicking the signup button, I immediately see both

unknown action type: authenticateUser

and

Cannot read property 'then' of undefined

errors on the console, indicating a failure in communication with the API.

I'm puzzled by this issue and would appreciate any insights into resolving it.

javascript vue.js vuejs2 nuxt.js

Answer 1

Answer №1

createAccount() is triggering the action without specifying the correct namespace ("profile" for store/profile.js). When this.$store.dispatch() is used with an unknown action, it returns undefined, resulting in the error you encountered.

To resolve this issue, ensure to include the profile namespace in the dispatch:

this.$store.dispatch("profile/authenticateUser").then(...)
                         👆

It's also important to note that the $ shortcuts will give you the actual response data instead of the axios.Response instance. In the case of your authenticateUser action, using this.$axios.$post() will directly provide you with the token:

export const actions = {
  async authenticateUser(vuexContext, authData) {
    //...
    return await this.$axios
      .$post(authUrl, authData.form)
              👇
      .then(token => {
         vuexContext.commit('setToken', token)
      })
      .catch(e => console.log(e))
  },
}

Check out the demo here

Answer 2

createAccount() is triggering the action without specifying the correct namespace ("profile" for store/profile.js). When this.$store.dispatch() is used with an unknown action, it returns undefined, resulting in the error you encountered.

To resolve this issue, ensure to include the profile namespace in the dispatch:

this.$store.dispatch("profile/authenticateUser").then(...)
                         👆

It's also important to note that the $ shortcuts will give you the actual response data instead of the axios.Response instance. In the case of your authenticateUser action, using this.$axios.$post() will directly provide you with the token:

export const actions = {
  async authenticateUser(vuexContext, authData) {
    //...
    return await this.$axios
      .$post(authUrl, authData.form)
              👇
      .then(token => {
         vuexContext.commit('setToken', token)
      })
      .catch(e => console.log(e))
  },
}

Check out the demo here

Answer 3

Answer №2

It is my understanding that chaining multiple then methods may not produce the desired outcome. However, you can achieve the behavior you want by monitoring the loggedin state and then redirecting to the URL if it is true:

data() {
    return {
      isSignup: true,
      form: {
        email: null,
        fullname: null,
        password: null
      }
    }
},
computed:{
  isLoggedn(){
    return this.$store.state.loggedin;
  }
},
watch:{
  isLoggedin(newVal){
   if(newVal){
       this.$router.push('/loginsuccess')
    }
  }
},
methods: {
    createAccount() {
      this.$store.dispatch("authenticateUser", {
        isSignup: this.isSignup,
        form: this.form
      })
    }
  }

Answer 4

It is my understanding that chaining multiple then methods may not produce the desired outcome. However, you can achieve the behavior you want by monitoring the loggedin state and then redirecting to the URL if it is true:

data() {
    return {
      isSignup: true,
      form: {
        email: null,
        fullname: null,
        password: null
      }
    }
},
computed:{
  isLoggedn(){
    return this.$store.state.loggedin;
  }
},
watch:{
  isLoggedin(newVal){
   if(newVal){
       this.$router.push('/loginsuccess')
    }
  }
},
methods: {
    createAccount() {
      this.$store.dispatch("authenticateUser", {
        isSignup: this.isSignup,
        form: this.form
      })
    }
  }

When trying to sign up a user in Nuxt, an error occurs stating "Cannot read property 'then' of undefined."

Answer №1

Answer №2

Similar questions

Error: The server is unable to process the POST request to /api

Why is the startsWith function not returning the expected result in my code? What could be causing this issue?

Converting Datepicker selection to a string format in AngularJS

Check the box by clicking on the label to activate it [Vue.js]

Accessing data from an API in an AngularJS dropdown menu

Presenting information on an HTML webpage using the slidetoogle feature

Dynamic color updates for Angular list items on click

A dropdown menu generated from a Google Sheet script that allows for the input of custom text alongside predefined

Prevent caching of dynamically generated HTML while still caching static resources such as images, JavaScript, and CSS files in

The video does not begin playing automatically after utilizing react-snap

Error: The function Users.create is undefined

JavaScript scripts are not functioning properly in a partial view following a refresh

Choose from the Angular enum options

GraphQL component properties

When utilizing Vuetify's cards in a Vue component and rendering multiple items with a v-for loop, the data and methods may unexpectedly vanish on

Utilizing reference memory to enable communication between two controllers

utilize text offsets to insert tags within strings

What is the best way to dynamically adjust the size of a grid of divs to perfectly fit within the boundaries of a container div without surpassing them?

Limiting the character count in a textarea can be achieved by implementing the 'jQuery InlineEdit' feature

Trouble retrieving data (React-redux)