Default export of the module has or is using private name 'Props'

[ly-sniper]

when upgrade volar to ^0.34.9 , there is a ts warning Default export of the module has or is using private name 'Props' at the top of template

//error info -> Default export of the module has or is using private name 'Props'. ts(4082)
<template>test</template>
<script lang="ts" setup>
  //step1: declear type
  interface Props {
    foo: string;
  }
 // setp2: defineProps
  defineProps<Props>(); 
</script>

but if definePorps like below, the warning disappear

<template>test</template>
<script lang="ts" setup>
  defineProps<{
    foo: string;
  }>();
</script>

[johnsoncodehk]

Hi @hayabusa2009, try remove "declaration": true in tsconfig or move interface Props to script block.

<script lang="ts">
//step1: declear type
interface Props {
  foo: string;
}
</script>

<script lang="ts" setup>
// setp2: defineProps
defineProps<Props>(); 
</script>

[mobayen]

Why Volar is complaining about the interface anyway?
Is it a bad practice?

[johnsoncodehk]

@mobayen You just need move interface from <script setup> to <script> if it is a part of emit type, if in <script setup>, the interface is actually inside setup() scope so it can't be emit.

...
setup() {
	interface Props {
      foo: string;
    }
}

[ly-sniper]

Hi @hayabusa2009, try remove "declaration": true in tsconfig or move interface Props to script block.

<script lang="ts">
//step1: declear type
interface Props {
  foo: string;
}
</script>

<script lang="ts" setup>
// setp2: defineProps
defineProps<Props>(); 
</script>

@johnsoncodehk thank you for your replay and I try your advices but failed.
I want to know is there a way to extends thrid-part library component types in the setup block?
for example

<script lang="ts" setup>
  import type { ModalProps } from 'third-part-library/Modal';
  interface Props extends ModalProps {
    visible: boolean;
  }
  const props = defineProps<Props>();

</script>

[johnsoncodehk]

@hayabusa2009 Have you try move interface Props to <script> tag? If it not works please provide a minimal reproduction.

<script lang="ts">
  import type { ModalProps } from 'third-part-library/Modal';
  interface Props extends ModalProps {
    visible: boolean;
  }
</script>

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

[ly-sniper]

@johnsoncodehk when remove composite:true from tsconfig.json, warning disappear. tks again!

[cn-2k]

@hayabusa2009 Have you try move interface Props to <script> tag? If it not works please provide a minimal reproduction.

<script lang="ts">
  import type { ModalProps } from 'third-part-library/Modal';
  interface Props extends ModalProps {
    visible: boolean;
  }
</script>

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

Life savier, ty very much!

[buckeyez]

@johnsoncodehk With the latest version, this is blowing up the IDE. According to the documentation:

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

and it also gives a code example of it in the script setup documentation:

interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

I believe it should not throw here based on vue's documentation. Would you be willing to agree and would you like me to open an issue for it?

[HugoMuller]

Hi,

I found a lighter alternative to moving the interfaces: exporting them also works with Volar 0.38.1.

<script lang="ts" setup>
  export interface Props {
    msg?: string
    labels?: string[]
  }

  const props = withDefaults(defineProps<Props>(), {
    msg: 'hello',
    labels: () => ['one', 'two']
  })
</script>

But I totally agree with @buckeyez. Volar should comply with Vue, and not the other way around.

[iamgabrielsoft]

removing declaration from tsconfig.json file works for me