The specified property is not found within the type 'Ref<never[]>[]'

I keep encountering these errors in the console:

  • TS2339: Property 'shop' is not found in type '(Ref<never[]> | ((id: number) => Promise))[]'.
  • TS2339: Property 'getShop' is not found in type '(Ref<never[]> | ((id: number) => Promise))[]'.

What causes these errors to happen? How can I resolve them?Example code:

// useShop.ts
import { ref } from "vue"

export default function useShop() {
  const shop = ref([])

  const getShop = async (id: number) => {
    // fetch data...
    shop.value = []
  }

  return [shop, getShop]
}

// Detail.vue
export default defineComponent({
  components: {},
  setup() {
    const { shop, getShop } = useShop()
    return {}
  },
})

Answer №1

You are providing an array in this section:

give back [store, fetchStore]

and implementing object destructuring in this section:

const { store, fetchStore } = utilizeStore()

You should either give back an object ({store, fetchStore}) or apply array destructuring (const [store, fetchStore] =).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods does VS Code use to display type errors in TypeScript given that TypeScript requires compilation?

TypeScript is a language known for being statically typed, giving it the ability to verify types during the compilation process and translate the code into JavaScript. Considering this, how is it possible for VS Code to detect type errors without the code ...

The Vue.js ready() function is not triggered within a Vue component

Currently, I am utilizing the Webpack bundler to serve a frontend built with Vue 2.0. However, I have encountered an issue where the ready method in components is not being called as expected. Should I implement additional checks or watches on the componen ...

Using Firebase: retrieving getAdditionalUserInfo in onCreate of a Firebase Cloud function

Can anyone help me figure out how to retrieve extra data from a SAML login provider in the backend (firebase functions)? I can see the data on the client side but I'm struggling to access it in the backend. I've specified these dependencies for ...

Tips on passing an object as data through Angular router navigation:

I currently have a similar route set up: this.router.navigate(["/menu/extra-hour/extra-hours/observations/", id]) The navigation is working fine, but I would like to pass the entire data object to the screen in order to render it using the route. How can ...

I am encountering an issue where my TSX import is being declared but not read when I attempt to pass it to the Jest render method. Can anyone explain

My Jest test file includes a simple import of a TSX component in my nextjs 13 project. However, when I try to use the component as a TSX tag, an error occurs: "'Properties' refers to a value, but is being used as a type here. Did you mean ...

Tips for sending data in Angular 8's Http GET method within a service class, especially when the backend requires a dictionary format

I am working on a C# backend with an HttpGet method that is expecting a dictionary as request parameters. public async Task<IActionResult> Search([BindRequired, FromQuery] IDictionary<string, object> pairs) Currently, my frontend is built in A ...

What steps can I take to ensure that AstroJS components do not conceal SVG elements when the SVG is incorporated into another file with client:load?

Currently, I am developing a weather application using Astro.js in conjunction with React. One of the features includes an SVG component that serves as the project logo and is implemented in the initial page loader. Upon the page loading, the SVG functions ...

Creating bidirectional binding between a Vue.js instance and a custom native web component: A step-by-step guide

Here is an example showcasing a custom web component called my-input. The goal is to establish a binding between the value attribute of this custom input component and the email attribute of a Vue instance. (Please note that this example may require Chrome ...

No routes found that match. URL Segment 'calendar' does not correspond to any routes available

Currently interning, I've been tasked with building my own Angular 5 web application. However, I've hit a roadblock with an issue that's had me stuck for hours now. Every time I try to access the calendar, it gives me an error saying it can& ...

What is the best way to fill the dropdown options in every row of a data table?

This HTML snippet displays a data table with test data and corresponding dropdown options. <tr> <th> Test Data </th> <th> Test Data ...

I love the idea of the music playing on as I navigate between pages or tabs. Such a cool feature with Next

I'm looking to implement a music player within my next.js application. How can I ensure that the currently playing track doesn't stop when switching between pages? Essentially, I want the music playback to continue seamlessly as users navigate th ...

Limitations require a member to only accept a type (and not an instance) that extends or implements another type [TypeScript]

I'm seeking assistance with a set of abstract concepts in TypeScript. I am looking to restrict a member to only accept types as values, but those types must also implement or extend other types or interfaces. For example: The code snippet below is ...

Guidelines for simulating ActivatedRouteSnapshot in observable testing situations

I am currently testing an observable feature from a service in Angular. This particular observable will output a boolean value based on the queryParam provided. For effective testing of this observable, it is essential to mock the queryParam value. Howev ...

Is Angular's ngOnChanges failing to detect any changes?

Within one component, I have a dropdown list. Whenever the value of the dropdown changes, I am attempting to detect this change in value in another component. However, I am encountering an unusual issue. Sometimes, changing the dropdown value triggers the ...

Revert the Vue State When Navigating Back in the Browser

Background In our checkout process, we redirect to Stripe after creating an order object through an API request. To prevent users from clicking the "checkout" button multiple times during this process, we toggle a variable value to show a loading icon whe ...

Automatically arrange TypeScript import statements in alphabetical order in WebStorm / PhpStorm

I am using tslint with the default config tslint:recommended and I am looking to minimize the number of rules I need to customize. Some rules require that imports be alphabetized: src/core/task/TaskMockDecorator.ts[2, 1]: Imports within a group must be a ...

Just released a new npm package called vue-izitheme. It's fully functional from the command line, but for some reason it's not showing up in search results. Any suggestions on how to fix

I released my project, vue-izitheme, two days ago but I can't seem to find it when searching. It is functioning correctly from the command line and has already been downloaded 44 times. Do you have any thoughts on what could be causing this issue? ...

The Storybook file is unable to find and import the corresponding .vue file

Issue with Importing Vue File in Storybook I am facing an issue while trying to import a vue file (component/index.vue) into my storybook file (component/index.stories.ts). The compilation is failing and the import cannot be completed. component/index.st ...

Suggestions for importing by Typescript/VS Code

Imagine you have a file called a.ts that contains 4 named imports: export const one = 1 export const two = 2 export const three = 3 export const four = 4 Next, you have a file named b.ts and you want to import some variables from a.ts. import {} from &a ...

Preventing over-purchasing products by managing Knex.js inventory levels

Currently, I am in the process of developing an online store for my school's guild organization. I must admit that I lack experience working with databases and Knex.js is still a bit challenging for me. An issue arises when multiple users simultaneo ...