how to import type xxxProps / xxxEmits / xxxSlots

[Dodobibi]

Description

I need to create custom components including @nuxt/ui components and forward props, emits on this components.

When importing (in vue file)

import type { FormFieldProps, FormFieldSlots } from '@nuxt/ui';

const props = defineProps<FormFieldProps & { operations?: T[] }>();
const slots = defineEmits<FormFieldSlots>();

const formFieldProps = reactiveOmit(props, ['operations']);

I receive this error on execution :

Identifier 'appConfig' has already been declared.

Internal server error: Identifier 'appConfig' has already been declared. (105:6)                                                                                                         09:22:04
  Plugin: vite:vue
  File: .../app/pages/ResDossier/components/MyCustomComponent.vue:105:6
      at toParseError (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parse-error.ts:95:45)
      at raise (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/tokenizer/index.ts:1497:19)
      at checkRedeclarationInScope (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/util/scope.ts:155:19)
      at declareName (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/util/scope.ts:109:12)
      at declareName (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/plugins/typescript/scope.ts:89:11)
      at declareNameFromIdentifier (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/lval.ts:739:16)
      at checkIdentifier (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/lval.ts:734:12)
      at checkLVal (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/lval.ts:636:12)
      at parseVarId (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/parser/statement.ts:1605:10)
      at parseVarId (.../node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/src/plugins/typescript/index.ts:3463:13)

Is there another way to import theses types ?

[romhml]

You can use #ui/types to import these types. See https://ui.nuxt.com/getting-started/installation#typescript.

[Dodobibi]

I have the same issue when importing by #ui/types.

(with v3)

[romhml]

Can you share the code of the component that causes the error? (.../app/pages/ResDossier/components/MyCustomComponent.vue)

[Dodobibi]

You can reproduce this issue by create this simple component :

<template>
    <UInput v-bind="props">
        <!-- slots, etc... -->
    </UInput>
</template>

<script setup lang="ts">
import type {InputProps, InputSlots} from '@nuxt/ui'; // or '#ui/types'
const props = defineProps<InputProps>();
const slots = defineSlots<InputSlots>();
</script>

And using this component in pages/index.vue

See repro : codesandox

[romhml]

Right, sorry, I'll re-open and check this out!

[Dodobibi]

I figured out how to fix this issue :

Since you define appConfig in each component's vue file, when accessing types, Typescript try to redefine appConfig (like it is in same scope).

Renaming appConfig in each components with a distinct name resolve this.

exemple for the Tooltip component, replace :

- const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
+ const appConfigTooltip = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }

-const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
+const tooltip = tv({ extend: tv(theme), ...(appConfigTooltip.ui?.tooltip || {}) })

If you're OK with this, I can make a PR ?

[romhml]

Great find! I'd like to look deeper into this, I don't understand why the appConfig creates a conflicts between components or why these declarations are merged into the same scope. Also, it looks related to the defineProps macro, as I'm not able to reproduce the issue when using it as a type annotation.