Encountered an issue with Vue 3 defineProps(): [plugin:vite:vue] Transformation unsuccessful

Currently, I am utilizing Vue version 3.2 along with TypeScript.
Whenever I try to declare my props in the following manner:

<!-- AppButton.vue -->

<script lang="ts">
  interface Iprops {
    buttonType?: string;
    size?: string;
    disabled?: boolean;
    loading?: boolean;
  }
</script>

<script lang="ts" setup>
  const props = defineProps<Iprops>();
</script>

Upon executing the code, I encounter the following error:
https://i.sstatic.net/thfCM.png

Despite my extensive searching, I have been unable to locate any solutions.

Answer №1

It is recommended to define the interface within the script setup block, as the other script is typically used for declaring inheritAttrs or name :

<script lang="ts" setup>

    interface Iprops {
    buttonType?: string;
    size?: string;
    disabled?: boolean;
    loading?: boolean;
  }
  const props = defineProps<Iprops>();
</script>

Imported types and complex ones are not supported for argument declaration type.

Currently, the type declaration argument must be one of the following to ensure accurate static analysis:

  • A type literal
  • A reference to an interface or a type literal in the same file

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

Mapping a JSON array within a static method in Angular2 and TypeScript

Struggling with the syntax to properly map my incoming data in a static method. The structure of my json Array is as follows: [ { "documents": [ { "title": "+1 (film)", "is-saved": false, ...

Is it possible to import a class from a different project or module in TypeScript?

I am attempting to modify the build task in Typescript within this specific project: https://github.com/Microsoft/app-store-vsts-extension/blob/master/Tasks/app-store-promote/app-store-promote.ts I am looking to incorporate an import similar to the one be ...

Exploring the Junction of Vue-Router and Gsap ScrollTrigger

I'm encountering some issues with vue-router and the gsap scrolltrigger plugin. I have several vue components that utilize scrolltrigger, but when I navigate to a different page and then return to the page with the scrolltrigger effect, it fails to tr ...

Troubleshooting problem with v-for to display every Laravel error in a Vue component utilizing Axios

I'm attempting to display all Laravel errors using vue. I have successfully retrieved the output, but I am unsure how to format it properly. Vue Component data() { return { status: '', submitte ...

Develop a "Read More" button using Angular and JavaScript

I am in search of all tags with the class containtText. I want to retrieve those tags which have a value consisting of more than 300 characters and then use continue for the value. However, when I implement this code: <div class=" col-md-12 col-xl-12 c ...

"Converting to Typescript resulted in the absence of a default export in the module

I converted the JavaScript code to TypeScript and encountered an issue: The module has no default export I tried importing using curly braces and exporting with module.exports, but neither solution worked. contactController.ts const contacts: String[ ...

Unable to locate the namespace for the installed library

Looking for a solution in my ExpressJS setup with Pino logger. I am trying to create a class that can be initialized with a Pino logger. Here is the code snippet: import express, { NextFunction, Request, Response } from 'express'; import pino fr ...

How to access a method in main.js file from a .vue component

I'm working on a vue-cli project with one .vue file and main.js. I am trying to call a method from the .vue file in main.js, but I keep getting an error saying that the function is not defined. How can I successfully call a method inside the .vue file ...

Creating a line break in a Vue.js confirmation dialog is a helpful feature that can be achieved with a

Is there a way to add a new line after the confirmation dialog question and insert a note below it? this.$dialog.confirm("Create Group","Would you like to create group "+ this.groupName +"?<br/>(NOTE: Selected project or empl ...

Reset Vuetify toggle button if API call is unsuccessful

Hello, I am currently working with Vue and Vuetify 2. Within my project, I have a simple component that utilizes Vuetify's v-btn-toggle: <template> <v-btn-toggle v-model="localProp"> <v-btn value="1">Value1& ...

Position components in Angular 2 based on an array's values

Hello all, I am a beginner in terms of Angular 2 and currently facing some obstacles. My goal is to create a board for a board game called Reversi, which has a similar layout to chess but with mono-color pieces. In order to store the necessary information, ...

Getting an error message with npm and Typescript that says: "Import statement cannot be used outside

After developing and publishing a package to npm, the code snippet below represents how it starts: import * as aws from "@pulumi/aws"; import * as pulumi from "@pulumi/pulumi"; export interface ... export class controlplaneDependencies ...

Join the Observable in Angular2 Newsletter for the latest updates and tips

One of my functions stores the previous URL address. prevId () { let name, id, lat, lng; this.router.events .filter(event => event instanceof NavigationEnd) .subscribe(e => { console.log('prev:', this.previo ...

Troubleshooting error "is not assignable to type..." when simulating global fetch using TypeScript

I am encountering an issue with the "global.fetch" part and cannot seem to figure out why. Despite following the standard procedure, I am still facing this TS2322 error. I am seeking assistance to understand why this error is occurring. I am open to sugges ...

Guide on transforming a Unix timestamp into either "2000-01-01" or "2000-05-24 20:00:00" format, or the opposite way, using Deno

Just starting out with Deno and looking to convert a Unix timestamp such as 1646245390158 into either the format of 2000-01-01 or 2000-05-24 20:00:00, or vice versa. Any tips on how to achieve this? ...

Using Vuejs: Executing the mounted function in main.js from a separate JavaScript file

In the code snippet provided in commonValidation.js, I have defined the localization for validation messages. commonValidation.js: this.$validator.localize('en', { messages: { required: (field) => '* ' + field + &apos ...

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Currently, I am developing an application using Rails, Vue, and TailwindCss 1.0+ I am facing an issue while creating a dropdown menu for my products. When I click on the dropdown button, the items in the dropdown fly off to the edge of the screen instead ...

type of key extractor is unknown in React Native

How can I specify a type for the renderItem function of a FlatList in React Native? This is my current approach: // Importing the generic type for the FlatList render item function import { ListRenderItem } from "react-native"; // Assigning the ...

The element at index '0' is not defined for the data type 'number | [number, number]'

In my current project, I have a component named ComponentA which has a defined interface. Here is the snippet of the interface: interface A1 { isSingle: true; value: number; } interface A2 { isSingle: false; value: [number, number]; } exp ...

How can we retrieve the target element for an 'onSelectionChange' DOM event in Angular 6?

When using Angular 6, I want to retrieve the "formControlName" of the corresponding element whenever the selection changes. HTML <mat-form-field *ngIf="dispatchAdviceChildForAdd._isEditMode" class="mat-form-field-fluid"> <mat-select ...