Nuxt•5mo ago

Resolving TS issues in custom module

I changed my tsconfig to:

{
  "extends": "./.nuxt/tsconfig.json",
  "exclude": [
    "dist",
    "node_modules",
    "playground",
    "docs",
    "test"
  ]
}

{
  "extends": "./.nuxt/tsconfig.json",
  "exclude": [
    "dist",
    "node_modules",
    "playground",
    "docs",
    "test"
  ]
}

from

  "extends": "./playground/.nuxt/tsconfig.json",

  "extends": "./playground/.nuxt/tsconfig.json",

Is this good change? Should i reference to ./playground types? Because previously stuff like #app and #imports worked and there were used very often in my app, but I am not sure if this a good practice. Because of that currently my nitroplugin doesn't work import type { NitroApp } from 'nitropack', do I have to install the package for that?

5 Replies

kapa.ai•5mo ago

Hi @Norbiros. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Switching your tsconfig.json to extend from ./.nuxt/tsconfig.json in the root of your project is the recommended approach for Nuxt projects. This file is auto-generated by Nuxt and contains all the necessary aliases and sensible defaults for your app, including support for #app and #imports auto-imports. You should not reference the ./playground/.nuxt/tsconfig.json unless your main source code actually lives inside the playground directory, which is uncommon and generally not best practice for a standard Nuxt setup. Referencing the root .nuxt/tsconfig.json ensures your editor and TypeScript tooling recognize all Nuxt-specific types and aliases correctly Nuxt tsconfig docs, Nuxt TypeScript concepts. If you are having issues with imports like #app and #imports after changing the tsconfig, make sure you have run nuxi prepare or nuxt prepare to generate the .nuxt/tsconfig.json file, as it is not committed to version control and must exist for TypeScript to resolve those aliases Nuxt Bridge TypeScript. Regarding your Nitro plugin and the import:

import type { NitroApp } from 'nitropack'

import type { NitroApp } from 'nitropack'

You do not need to install nitropack manually. Nuxt provides the necessary types via its own dependencies and the auto-generated types. If you are getting type errors, ensure your tsconfig.json is set up as above and that you have run the Nuxt prepare step. If you still have issues, check that your module or plugin is not being built or type-checked in isolation without access to the main project's .nuxt/tsconfig.json—local modules should also have a tsconfig.json extending the root .nuxt/tsconfig.json if they are outside the main source tree GitHub issue discussion. In summary: - Extending from ./.nuxt/tsconfig.json in your root is correct and best practice. - Do not reference ./playground/.nuxt/tsconfig.json unless your code is actually in playground. - Run nuxi prepare to generate the necessary files. - You do not need to install nitropack manually for types. If you follow these steps and still encounter issues, double-check that your local modules or layers also have the correct tsconfig.json setup, as missing or misconfigured TypeScript configs in local modules can cause resolution problems GitHub issue comment. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

NorbirosOP•5mo ago

@kapa.ai I am creating a NUXT MODULE, not project. There are not auto imports in nuxt modules

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying that you are developing a Nuxt module, not a Nuxt project. For Nuxt modules, auto-imports do not work for files inside your module’s runtime directory (e.g., src/runtime/composables). This is because auto-imports are not enabled for files within node_modules (where published modules live) for performance reasons. As a module author, you must explicitly register any composables, utils, or other assets you want to expose to the host Nuxt app using utilities like addImports or addImportsDir from @nuxt/kit Nuxt Module Runtime Directory. Example: Registering a composable for auto-import in a Nuxt module

import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImports({
      name: 'useComposable',
      as: 'useComposable',
      from: resolver.resolve('runtime/composables/useComposable')
    })
  }
})

import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImports({
      name: 'useComposable',
      as: 'useComposable',
      from: resolver.resolve('runtime/composables/useComposable')
    })
  }
})

Or, to register an entire directory:

import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImportsDir(resolver.resolve('runtime/composables'))
  }
})

import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImportsDir(resolver.resolve('runtime/composables'))
  }
})

This makes your composables available for auto-import in the host Nuxt app Injecting Composables With addImports and addImportsDir. Summary: - Auto-imports do not work automatically for code inside a Nuxt module’s runtime directory. - You must explicitly register composables or utils using addImports or addImportsDir in your module setup. - This is the standard and recommended approach for Nuxt module authors. If you need TypeScript support for these auto-imported composables, Nuxt will handle the type generation for the host app once you register them as shown above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

Gaming

Programming

Resolving TS issues in custom module

Did you find this page helpful?