Nuxt•6d ago

Nuxt app/ folder structure error 500

Hello, Trying to move to app/ folder structure, but I keep having this error :

Cannot find module '~/app/utils/ui/button' imported from 'D:/Projects/nuxt-base/app/components/kit/button/index.vue'. - If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution. - Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead. Read more: https://vitest.dev/guide/common-errors

Cannot find module '~/app/utils/ui/button' imported from 'D:/Projects/nuxt-base/app/components/kit/button/index.vue'. - If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution. - Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead. Read more: https://vitest.dev/guide/common-errors

I didn't touch tsconfig, utils and components are both in app/ I have this in my nuxt.config.ts though :

    components: [
        '~/components',
        {
            path: '~/components/structure',
            global: true,
            pathPrefix: false
        },
    ],

    components: [
        '~/components',
        {
            path: '~/components/structure',
            global: true,
            pathPrefix: false
        },
    ],

3 Replies

kapa.ai•6d ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can help with your Nuxt app folder structure error. The issue appears to be related to import paths after moving to the new app/ folder structure. The Problem The error indicates that Nuxt can't find the module at ~/app/utils/ui/button. This is likely because when using the new app/ folder structure, the ~ and @ aliases point directly to the app/ directory, not to the root with app/ appended. Solution When using the new app/ folder structure, you should modify your imports to use just ~/utils/ui/button instead of ~/app/utils/ui/button. The ~ and @ aliases already point to your srcDir (which is now app/). For your components configuration, you should also update it:

components: [
    '~/components',  // This is correct - points to app/components
    {
        path: '~/components/structure',
        global: true,
        pathPrefix: false
    },
],

components: [
    '~/components',  // This is correct - points to app/components
    {
        path: '~/components/structure',
        global: true,
        pathPrefix: false
    },
],

Additional Context According to the Nuxt documentation, when using the new directory structure: 1. The default srcDir becomes app/ Source 2. The ~ and @ aliases point to your srcDir (app/) Source If you're using the new directory structure with compatibility version 4, make sure you've properly migrated by following these steps: 1. Move your assets/, components/, composables/, layouts/, middleware/, pages/, plugins/, and utils/ folders under app/ 2. Keep nuxt.config.ts, content/, layers/, modules/, public/, and server/ folders outside the app/ folder Source You can also check if your tsconfig.json is properly set up:

{
  "extends": "./.nuxt/tsconfig.json"
}

{
  "extends": "./.nuxt/tsconfig.json"
}

This will ensure you get the auto-generated path aliases from Nuxt Source. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

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

OmnislashOP•6d ago

Them I forgot I was importing some manually, thanks Kapi 🙂

Gaming

Programming

Nuxt app/ folder structure error 500

Did you find this page helpful?