Nuxt•3w ago

Issue with import types with Nuxt UI Pro and Nuxt UI

Hello. I have an issue with Nuxt UI Pro. I installed it as the docs says, the issue is that I'm trying to make a form, as it is in the docs. import type { FormSubmitEvent } from '#ui/types'; import type { HeaderLink } from '#ui-pro/types' And I'm getting this errors: Cannot find module '#ui/types' or its corresponding type declarations.ts-plugin(2307) Cannot find module '#ui-pro/types' or its corresponding type declarations.ts-plugin(2307) I checked the node_modules/ @nuxt folder and the types are there. I changed the path to @nuxt/ui/dist/runtime/types but since nuxt/ui is installed as a dependency of ui-pro, it doesn't recognize it. I don't know what to do

11 Replies

kapa.ai•3w ago

Hi @nesivapama. 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 the knowledge sources, I can help you with this issue regarding importing types from Nuxt UI and Nuxt UI Pro. The error you're encountering is likely due to the way TypeScript is resolving the imports. Nuxt UI and Nuxt UI Pro provide a special import path for their types that should work in a properly configured Nuxt project. Here's how you can correctly import the types: 1. For Nuxt UI types:

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

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

2. For Nuxt UI Pro types:

   import type { HeaderLink } from '#ui-pro/types'

   import type { HeaderLink } from '#ui-pro/types'

These import paths are mentioned in the Nuxt UI documentation (https://ui.nuxt.com/getting-started/installation#typescript) and should work out of the box when Nuxt UI and Nuxt UI Pro are properly installed and configured. To ensure everything is set up correctly: 1. Make sure you've followed the Nuxt UI Pro installation guide (https://ui.nuxt.com/pro/getting-started/installation#setup) correctly. 2. Verify that your nuxt.config.ts file includes the necessary configuration:

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

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

3. Run nuxi typecheck to generate the necessary type files, as mentioned in the TypeScript documentation for Nuxt (https://nuxt.com/docs/guide/concepts/typescript#type-checking). 4. If you're still encountering issues, you might need to restart your development server or IDE to ensure the new type definitions are recognized. If you continue to face problems after trying these steps, it might be worth checking if there are any conflicts with other modules or if there's an issue with your project's TypeScript configuration. Remember, Nuxt UI Pro is a premium product, so make sure you have a valid license key set up as described in the license section of the documentation (https://ui.nuxt.com/pro/getting-started/installation#license). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

nesivapamaOP•2w ago

The issue persist after all you told me @kapa.ai what you told me does not fix the issue. It's stil the "Cannot finde module '#ui/types' or its corresponding type declarations

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize that the previous suggestion didn't resolve your issue. Let's explore some additional troubleshooting steps based on the information available in the knowledge sources. 1. First, make sure you have the latest version of Nuxt UI Pro installed. You can try updating to the edge version as described in the Nuxt UI Pro documentation (https://ui.nuxt.com/pro/getting-started/installation#edge):

   {
     "devDependencies": {
       "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
     }
   }

   {
     "devDependencies": {
       "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
     }
   }

After updating your package.json, run your package manager's install command. 2. If you're using a monorepo or layers setup, you might need to adjust your TypeScript configuration. As mentioned in a GitHub issue (https://github.com/nuxt/nuxt/issues/29171), you can try adding the following to your tsconfig.json:

   {
     "extends": "./.nuxt/tsconfig.json",
     "include": [
       "./.nuxt/tsconfig.json",
       "./types/*.d.ts"
     ]
   }

   {
     "extends": "./.nuxt/tsconfig.json",
     "include": [
       "./.nuxt/tsconfig.json",
       "./types/*.d.ts"
     ]
   }

3. Another potential solution is to use the typescript.tsConfig option in your nuxt.config.ts file:

   export default defineNuxtConfig({
     typescript: {
       typeCheck: true,
       tsConfig: {
         include: ['./types/*.d.ts'],
       },
     },
   });

   export default defineNuxtConfig({
     typescript: {
       typeCheck: true,
       tsConfig: {
         include: ['./types/*.d.ts'],
       },
     },
   });

4. If you're still encountering issues, it might be related to how Nuxt is generating type declarations. You can try running npx nuxi prepare to regenerate the Nuxt type declarations. 5. In some cases, IDE issues can persist even after fixing the configuration. Try restarting your TypeScript server in VS Code, as mentioned in a similar issue (https://github.com/nuxt/nuxt/issues/29152). If none of these solutions work, the problem might be more complex and related to your specific project setup. In that case, you might want to create a minimal reproduction of the issue and seek help from the Nuxt community or file an issue on the Nuxt UI Pro GitHub repository (if you have access to it as a Pro user). Remember, Nuxt UI Pro is a premium product, so make sure your license is properly activated as described in the activation documentation (https://ui.nuxt.com/pro/activate). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

nesivapamaOP•2w ago

@kapa.ai it's strange. the second thing you told me, adding things to tsconfig.json worked but if I stop the server and start again npm run dev, the issue comes back

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with this recurring issue. It's indeed strange that the problem reappears after restarting the development server. Let's explore some potential solutions based on the information we have: 1. Auto-generated TypeScript configuration: Nuxt automatically generates a .nuxt/tsconfig.json file with sensible defaults and your aliases. To ensure this file is always up-to-date, you can modify your package.json to include a prepare script that runs before your dev server starts. Add this to your package.json:

   {
     "scripts": {
       "prepare": "nuxi prepare",
       "dev": "npm run prepare && nuxt dev"
     }
   }

   {
     "scripts": {
       "prepare": "nuxi prepare",
       "dev": "npm run prepare && nuxt dev"
     }
   }

This way, the TypeScript configuration will be regenerated each time you start the dev server Nuxt TypeScript docs (https://nuxt.com/docs/guide/concepts/typescript#nuxttsconfigjson). 2. Extend the auto-generated configuration: Instead of directly modifying tsconfig.json, try extending the auto-generated configuration:

   {
     "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
       // Your custom options here
     }
   }

   {
     "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
       // Your custom options here
     }
   }

This approach is recommended in the Nuxt documentation (https://nuxt.com/docs/guide/directory-structure/tsconfig). 3. Use typescript.tsConfig in nuxt.config.ts: As mentioned in a GitHub issue (https://github.com/nuxt/nuxt/issues/29171), you can try adding the following to your nuxt.config.ts:

   export default defineNuxtConfig({
     typescript: {
       typeCheck: true,
       tsConfig: {
         include: ['./types/*.d.ts'],
       },
     },
   });

   export default defineNuxtConfig({
     typescript: {
       typeCheck: true,
       tsConfig: {
         include: ['./types/*.d.ts'],
       },
     },
   });

This configuration should persist across server restarts. 4. Check for conflicting configurations: Ensure that you don't have conflicting TypeScript configurations in your project. Look for any tsconfig.json files in subdirectories that might be interfering with the root configuration. 5. Clear Nuxt cache: Sometimes, clearing the Nuxt cache can help resolve persistent issues. Try running:

   npx nuxi cleanup

   npx nuxi cleanup

Then restart your development server. If the issue persists after trying these solutions, it might be worth creating a minimal reproduction of the problem and seeking help from the Nuxt community or filing an issue on the Nuxt GitHub repository. The intermittent nature of the problem suggests there might be a more complex interaction between your project setup and Nuxt's type generation process. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

nesivapamaOP•2w ago

@kapa.ai none of this really worked. I had to include this: "#ui/": ["./node_modules/@nuxt/ui/dist/runtime/"], "#ui-pro/": ["./node_modules/@nuxt/ui-pro/"] in tsconfig.json paths

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize that the previous suggestions didn't resolve your issue. Thank you for sharing the solution that worked for you. Your approach of manually specifying the paths in the tsconfig.json file is indeed a valid workaround when the automatic type resolution fails. Based on your solution, here's an explanation of why this works and how it relates to the Nuxt configuration: 1. Path mapping in tsconfig.json: By adding these paths to your tsconfig.json, you're explicitly telling TypeScript where to find the type definitions for Nuxt UI and Nuxt UI Pro. This is similar to the approach mentioned in the Nuxt documentation on TypeScript (https://nuxt.com/docs/guide/concepts/typescript#nuxttsconfigjson), where they discuss extending the auto-generated configuration. 2. Overriding auto-generated paths: The Nuxt documentation warns that overwriting options such as "compilerOptions.paths" with your own configuration will lead TypeScript to not factor in the module resolutions from ./.nuxt/tsconfig.json. This is exactly what you've done, but in this case, it solved your specific issue. 3. Alternative approach: Instead of directly modifying tsconfig.json, the Nuxt team recommends using the alias property in your nuxt.config.ts file. This approach is mentioned in the Nuxt Bridge TypeScript documentation (https://nuxt.com/docs/bridge/typescript#update-tsconfigjson). You could try this method as well:

   export default defineNuxtConfig({
     alias: {
       "#ui": "./node_modules/@nuxt/ui/dist/runtime",
       "#ui-pro": "./node_modules/@nuxt/ui-pro"
     }
   })

   export default defineNuxtConfig({
     alias: {
       "#ui": "./node_modules/@nuxt/ui/dist/runtime",
       "#ui-pro": "./node_modules/@nuxt/ui-pro"
     }
   })

This should achieve the same result while following Nuxt's recommended practices. 4. Potential drawbacks: While your solution works, it might make your project less portable or require updates if the structure of the @nuxt/ui or @nuxt/ui-pro packages changes in the future. For future reference, if you encounter similar issues with other Nuxt modules or dependencies, you might need to apply a similar workaround. However, it's always worth checking if there's an update to Nuxt UI Pro or Nuxt itself that might resolve these type resolution issues more elegantly. If you continue to face challenges with TypeScript integration in your Nuxt project, consider reporting this as an issue to the Nuxt UI Pro repository (if you have access as a Pro user) or the main Nuxt repository. This feedback can help the maintainers improve the type resolution process for future releases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Gaming

Programming

Issue with import types with Nuxt UI Pro and Nuxt UI