Error in Nuxt/TypeScript: Unable to retrieve this - TS2339: Property 'XXX' is not found on type

Question

Error in Nuxt/TypeScript: Unable to retrieve this - TS2339: Property 'XXX' is not found on type

I encountered an issue while working with Nuxt.js and TypeScript. In my project, I rely on dependencies such as axios or nuxt-i18n. As an example, let's focus on Axios. I followed the configuration outlined in the official documentation for nuxt/axios.

nuxt.config.js

export default {
  modules: ['@nuxtjs/axios']
  axios: {},
}

tsconfig.json

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  }
}

Now, I aim to utilize $axios within my Vuex store as demonstrated below:

{
  actions: {
    async getIP ({ commit }) {
      const ip = await this.$axios.$get('http://icanhazip.com')
      commit('SET_IP', ip)
    }
  }
}

However, I am currently facing the following error message:

`TS2339: Property '$axios' does not exist on type '{ getIP(state: any, { commit }: { commit: any; }): Promise ; }'.`

Edit: Comment suggestions indicate that using an arrow function might resolve this issue. I attempted the following approach:

export const actions = {
  getIP: async ({commit}) => {
    const ip = await this.$axios.$get('http://icanhazip.com')
    ...
  }
};

Unfortunately, a new error related to "this." arises:

TS7041: The containing arrow function captures the global value of 'this'.

typescript vue.js axios nuxt.js

Answer 1

Answer №1

When integrating the axios plugin into your Nuxt application, you need to follow these steps:

import { Plugin } from '@nuxt/types'
import { initializeAxios } from '~/utils/api'

const accessor: Plugin = ({ $axios }) => {
  initializeAxios($axios)
}

export default accessor

Next, create a folder called utils and add a file named api.ts:

import { NuxtAxiosInstance } from '@nuxtjs/axios'

let $axios: NuxtAxiosInstance

export function initializeAxios(axiosInstance: NuxtAxiosInstance) {
  $axios = axiosInstance
}
   
export { $axios }

In your store, you can import the $axios like this:

import { $axios } from '~/utils/api'

...

{
  actions: {
    async getIP({ commit }) {
      const ip = await $axios.$get('http://icanhazip.com')
      commit('SET_IP', ip)
    }
  }
}

For more in-depth instructions, refer to this resource

Answer 2

When integrating the axios plugin into your Nuxt application, you need to follow these steps:

import { Plugin } from '@nuxt/types'
import { initializeAxios } from '~/utils/api'

const accessor: Plugin = ({ $axios }) => {
  initializeAxios($axios)
}

export default accessor

Next, create a folder called utils and add a file named api.ts:

import { NuxtAxiosInstance } from '@nuxtjs/axios'

let $axios: NuxtAxiosInstance

export function initializeAxios(axiosInstance: NuxtAxiosInstance) {
  $axios = axiosInstance
}
   
export { $axios }

In your store, you can import the $axios like this:

import { $axios } from '~/utils/api'

...

{
  actions: {
    async getIP({ commit }) {
      const ip = await $axios.$get('http://icanhazip.com')
      commit('SET_IP', ip)
    }
  }
}

For more in-depth instructions, refer to this resource

Error in Nuxt/TypeScript: Unable to retrieve this - TS2339: Property 'XXX' is not found on type

Answer №1

Similar questions

Employing Vue to perform validation on form fields utilizing a method

Ways to link numerous sockets within a single Vue.js project?

Angular2/Typescript: Transforming a Javascript/Typescript Date into a C# DateTime string on the client side

What are some effective strategies for bypassing CORS requirements in Vue client-side and server-side applications?

Securing the communication with encrypted API request payloads and responses

Experience the power of VueRouter with the advanced Vue Cypress Component Test Runner

Ensuring TypeScript recognizes a class property as definitively initialized when set using a Promise constructor

Can you retrieve data or HTML content from the main Vue 3 component?

What is the best way to access buffer data in TypeScript for Solana?

Utilize puppeteer and web-vitals in NextJS to retrieve the web performance metrics of a website

What could be causing my function to not provide the expected output?

Flask Blueprints cannot overwrite the static path

The absence of a `require` definition in Typescript combined with daisyui

Leveraging ExpressJS and NuxtJS middleware to transmit post data to a webpage

Passing arguments inside the source attribute of an image or link tag in Node.js and

What is causing this unique component to be positioned outside of the <tr> tag?

Extract the sub-element within a parent element using Vue event handling

Selecting keys of an object in Angular 2

What is preventing me from retrieving data from MySQL on a new page using Vue?

In Vue using Typescript, how would I go about defining a local data property that utilizes a prop as its initial value?