Nuxt•5w ago

Nuxt 4 / relative imports path in server routes

After set compatibilityVersion: 4 the relative imports import prisma from '~/server/utils/prisma' in my server routes doesn't work anymore. I can set import prisma from '../../../server/utils/prisma' but it would be nice to have them a bit more relative. Anyone knows, how to set them correctly? Tnx

6 Replies

kapa.ai•5w ago

Hi @Dennis. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt 4, the directory structure has changed significantly, which affects how imports work, especially between the client and server code. The Issue with Server Imports in Nuxt 4 With compatibilityVersion: 4, the default directory structure has changed. The serverDir now defaults to <rootDir>/server rather than <srcDir>/server, which means that the ~/ alias (which points to your source directory) no longer resolves correctly for server files. Solutions for Server Imports 1. Use the # Alias for Server Imports The recommended approach is to use the # prefix for server imports:

import prisma from '#server/utils/prisma'

import prisma from '#server/utils/prisma'

2. Create Custom Aliases You can define custom aliases in your nuxt.config.ts:

export default defineNuxtConfig({
  future: { compatibilityVersion: 4 },
  alias: {
    '@server': './server'
  }
})

export default defineNuxtConfig({
  future: { compatibilityVersion: 4 },
  alias: {
    '@server': './server'
  }
})

Then import using:

import prisma from '@server/utils/prisma'

import prisma from '@server/utils/prisma'

3. Use the shared Directory For code that needs to be shared between client and server, Nuxt 4 introduces the shared/ directory:

shared/
  utils/
    prisma.ts

shared/
  utils/
    prisma.ts

Files in shared/utils/ and shared/types/ are auto-imported when using compatibilityVersion: 4 as mentioned in the documentation. Why This Happens This change is part of the new directory structure in Nuxt 4, where: - srcDir defaults to app/ - serverDir defaults to <rootDir>/server (not inside srcDir) - This separation improves IDE type-safety and performance as explained in the upgrade guide The separation of server and client code into different contexts is intentional to ensure better type safety and IDE support, as they run in different environments with different available imports. Remember that if you're using layers or modules, there are additional considerations for relative paths and aliases as documented here. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

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

DennisOP•5w ago

unfortenetly that is not working @kapa.ai

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that the solutions I suggested aren't working for you. Let's explore some additional approaches based on the knowledge sources. Alternative Solutions for Server Imports in Nuxt 4 Using Nitro Aliases For server-side code, you might need to configure aliases specifically in the Nitro configuration:

export default defineNuxtConfig({
  future: { compatibilityVersion: 4 },
  nitro: {
    alias: {
      '#db': fileURLToPath(new URL('./server/database/', import.meta.url)),
    },
  },
  alias: {
    // for typecheck reasons
    '#db': fileURLToPath(new URL('./server/database/', import.meta.url)),
  },
})

export default defineNuxtConfig({
  future: { compatibilityVersion: 4 },
  nitro: {
    alias: {
      '#db': fileURLToPath(new URL('./server/database/', import.meta.url)),
    },
  },
  alias: {
    // for typecheck reasons
    '#db': fileURLToPath(new URL('./server/database/', import.meta.url)),
  },
})

This approach defines the alias in both places to ensure it works for both runtime and TypeScript as shown in this GitHub issue. Workaround for Server TypeScript Support There was a bug in Nuxt 3.16.0 where aliases weren't properly generated in tsconfig.server.json. If you're experiencing this issue, you can manually add paths to your Nitro TypeScript config:

nitro: {
  typescript: {
    tsConfig: {
      compilerOptions: {
        paths: {
          "#external": [
            fileURLToPath(new URL("./external", import.meta.url)),
          ],
          "#external/*": [
            fileURLToPath(new URL("./external", import.meta.url)) + "/*",
          ],
        }
      }
    }
  },
}

nitro: {
  typescript: {
    tsConfig: {
      compilerOptions: {
        paths: {
          "#external": [
            fileURLToPath(new URL("./external", import.meta.url)),
          ],
          "#external/*": [
            fileURLToPath(new URL("./external", import.meta.url)) + "/*",
          ],
        }
      }
    }
  },
}

This workaround was suggested in GitHub issue #31325. Check for Vue App Aliases in Server Runtime One common error is using Vue app aliases in server runtime. If you're seeing errors like:

ERROR Vue app aliases are not allowed in server runtime. [importing #build/types/nitro-imports from ../src/plugins/kafka-plugin.ts]

ERROR Vue app aliases are not allowed in server runtime. [importing #build/types/nitro-imports from ../src/plugins/kafka-plugin.ts]

Make sure you're using the correct imports for server-side code. For example, use #imports instead of @nuxt/app as mentioned in this Stack Overflow post. Ensure You're Using the Latest Version Some alias-related issues were fixed in recent Nuxt patches. If possible, try updating to the latest version:

npx nuxi upgrade --force

npx nuxi upgrade --force

If you're still experiencing issues, could you share more details about: 1. Your exact Nuxt version 2. The specific error message you're seeing 3. The structure of your project directories 4. The exact import statement that's failing This would help provide a more targeted solution to your specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

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

DennisOP•5w ago

@kapa.ai Unfortenetly your solutions did not work, but simple autoimport works 😅

Gaming

Programming

Nuxt 4 / relative imports path in server routes

Did you find this page helpful?