CODEWITHSUNDEEP
typescriptvue.jsvuejs3vue-composition-apivue-script-setup
Hamed
Hamed

Reputation: 313

Vue 3 defineProps() Error: [plugin:vite:vue] Transform failed

I am using Vue version 3.2 and TypeScript.
When I want to define my props like this:

<!-- 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>

When running the code, I get this error:
enter image description here

I searched a lot but did not find any results

Upvotes: 1

Views: 891

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The interface should be declared inside the script setup, since the other script is usually used to declare inheritAttrs or name :

<script lang="ts" setup>

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

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

As of now, the type declaration argument must be one of the following to ensure correct static analysis:

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

Upvotes: 2

Related Questions