Nuxt•2w ago

Can't use import from "from '#ui/types' "

Hi everyone, im currently trying to learn nuxt and start using nuxt ui. I just wanted to do a simple form like shown in the documentation : https://ui.nuxt.com/components/form.

<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '#ui/types';
const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>

const state = reactive({
  email: undefined,
  password: undefined
})

async function onSubmit(event: FormSubmitEvent<Schema>) {
  // Do something with data
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>

    <UFormGroup label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormGroup>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>

<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '#ui/types';
const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>

const state = reactive({
  email: undefined,
  password: undefined
})

async function onSubmit(event: FormSubmitEvent<Schema>) {
  // Do something with data
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>

    <UFormGroup label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormGroup>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>

But, i have the error : "Vue: Cannot find module #ui/ types or its corresponding type declarations.". I can give more details if needed, here are my version of the dependencies :

    "@nuxt/ui": "^2.19.2",
    "@shared/types": "workspace:*",
    "nuxt": "^3.13.2",
    "@nuxt/types": "^2.18.1",
    "vue": "latest",
    "zod": "^3.0.0",
    "vue-router": "latest"

    "@nuxt/ui": "^2.19.2",
    "@shared/types": "workspace:*",
    "nuxt": "^3.13.2",
    "@nuxt/types": "^2.18.1",
    "vue": "latest",
    "zod": "^3.0.0",
    "vue-router": "latest"

22 Replies

kapa.ai•2w ago

Hi @Nathan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it appears you're encountering an issue with importing types from the Nuxt UI library. Let's address this problem: 1. First, make sure you have properly installed and configured the Nuxt UI module in your project. According to the Nuxt UI installation guide (https://ui.nuxt.com/getting-started/installation), you should add the module to your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

2. The error you're seeing suggests that TypeScript is unable to find the types from #ui/types. This could be due to a few reasons: a. The types might not be generated yet. Try running npx nuxi prepare to generate the necessary type declarations for your project. b. Your IDE might not be recognizing the generated types. Try restarting your TypeScript server in your IDE. 3. If the above steps don't resolve the issue, you might need to adjust your import statement. Instead of:

import type { FormSubmitEvent } from '#ui/types'

import type { FormSubmitEvent } from '#ui/types'

Try using:

import type { FormSubmitEvent } from '#ui'

import type { FormSubmitEvent } from '#ui'

4. If you're still encountering issues, it's possible that there might be a problem with the type generation or the way TypeScript is configured in your project. You could try adding @nuxt/ui to the build.transpile array in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  build: {
    transpile: ['@nuxt/ui']
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  build: {
    transpile: ['@nuxt/ui']
  }
})

5. Lastly, ensure that your TypeScript version is compatible with the versions of Nuxt and Nuxt UI you're using. You might want to check if updating or downgrading any of these packages resolves the issue. If none of these solutions work, you might want to consider opening an issue on the Nuxt UI GitHub repository (https://github.com/nuxt/ui) or the Nuxt GitHub repository (https://github.com/nuxt/nuxt) with more details about your setup and the exact error message you're seeing. Remember to always run npx nuxi prepare after making changes to your Nuxt configuration or installing new modules to ensure all necessary types are generated correctly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1250340450271756358> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NathanOP•2w ago

Of course i tried everything the ai told me 🤖 . Can anyone help please ?

leamsigc•2w ago

My fist go on this type of issues is to delete generated .nuxt folder and then run the dev server again Try it and got from there

NathanOP•2w ago

Hi, thanks for the response, ive just tried it and i still got the issue 😅

leamsigc•2w ago

Hey you can make the param as any 😂

NathanOP•2w ago

yup but its not what i want to do lmao

leamsigc•2w ago

Make sense, I haven't play around with nuxt ui so not much that I can recomend tbh, are you using vscode? Sometimes vscode need to a window reload to get the proper types checks

NathanOP•2w ago

im using webstorm, and ive tried it also

leamsigc•2w ago

So the error is the console when runing the application Or is the ide

NathanOP•2w ago

in the ide

leamsigc•2w ago

Can you provide the nuxt config

NathanOP•2w ago

sure :

// https://nuxt.com/docs/api/configuration/nuxt-config
import * as path from 'path';

// eslint-disable-next-line no-undef
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  ui: {
    global: true
  },

  alias: {
    // eslint-disable-next-line no-undef
    '@shared': path.resolve(__dirname, '../shared/src'),
  },
  build: {
    transpile: ['@nuxt/ui']
  },

  modules: ['@nuxt/ui']
});

// https://nuxt.com/docs/api/configuration/nuxt-config
import * as path from 'path';

// eslint-disable-next-line no-undef
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  ui: {
    global: true
  },

  alias: {
    // eslint-disable-next-line no-undef
    '@shared': path.resolve(__dirname, '../shared/src'),
  },
  build: {
    transpile: ['@nuxt/ui']
  },

  modules: ['@nuxt/ui']
});

leamsigc•2w ago

It seems like you can import it as well like this import type { Button, ButtonVariant } from '@nuxt/ui/dist/runtime/types' Give it a try

leamsigc•2w ago

This is base on this issue https://github.com/nuxt/ui/issues/2408

GitHub

Problem with type imports when exported with nuxt layers · Issue #2...

Environment Operating System: Darwin Node Version: v20.9.0 Nuxt Version: 3.13.2 CLI Version: 3.14.0 Nitro Version: 2.9.7 Package Manager: [email protected] Builder: - User Config: - Runtime Modules: - Bui...

NathanOP•2w ago

already tried and i still got the same issue

leamsigc•2w ago

Ohh damn, this seems odd then, can you check on the node module folder and check on the nuxt ui folder if the types are there? It should be somewhere there if is installed

NathanOP•2w ago

yea they are sorry : 😅

leamsigc•2w ago

So is just the path that is not resolving correctly then.

NathanOP•2w ago

yea and i dont know why

leamsigc•2w ago

Let me try to replicate it locally

NathanOP•2w ago

i can give you acces to my repo if you want, send me a dm if you need

Gaming

Programming

Can't use import from "from '#ui/types' "