Can't get the plugin to work with Nuxt and Vitest

[datsenkoboos]

Hi, i'm trying to use Vitest and Nuxt 3 with its "explicit" imports from '#imports' which is declared in tsconfig.json: tsconfig.json in the root of the project

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

"./.nuxt/tsconfig.json"

{
  "compilerOptions": {
    ...
    "paths": {
      ...
      "#imports": [
        "C:/path/to/project/nuxt-build/.nuxt/imports"
      ...
    }
   ...
  },

Vitest can't resolve the import even with vite-tsconfig-paths:

vite.config.ts

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

Am i doing anything wrong?

[aleclarson]

I'm not familiar with Nuxt. Why do they use #imports specifically? I suppose this plugin is tripping on the # character somewhere, but haven't tested it myself. PR welcome

[akasection]

Hello! I also encountered this issue and seems to find the root cause (though I'm unsure how to fix that)

A bit more explanation:

So basically Nuxt dev used custom paths like ~/, #imports etc. to allow importing some nuxt framework functions into Vue files. To make the intellisense working with this behaviour, the Nuxt adds the resolve alias and generate custom tsconfig with relative paths under <rootDir>/.nuxt/tsconfig.json

So in most common Nuxt project, we will have two tsconfig:

1. <rootDir>/tsconfig.json (which extends below)
2. <rootDir/.nuxt/tsconfig.json

Later in nuxt update, every path aliases on the .nuxt tsconfig now has relative paths with added ../ (up a folder), which previously it was absolute paths. Though in actual development, there is no behaviour change at all. Most Vue files can import things from #import just fine.

Now the problem is on Vitest, using vite-tsconfig-paths, somehow, the plugin will resolve the tsconfig alias #import into.. let's say, ../node_modules/nuxt/dist/app , but it doesn't account that the tsconfig position was on .nuxt, but rather resolved relatively to rootDir instead.

So, absolutely, vite-tsconfig-paths will resolve any path aliases of .nuxt/tsconfig.json into like <rootDir>/../<things> which is parent folder of the project itself.

Overall, it's not just the #imports alias that broken, but all aliases (including the ~ alias, @ and any relative aliases. The absolute pathes are unaffected.

in summary, currently any tsconfig that has relative paths AND placed inside subfolders of root project will misbehave:

// This is broken
"paths": {
      "~": [
        ".."
      ],
      "~/*": [
        "../*"
      ],
     "assets": [
        "../assets"
      ],
      "public": [
        "../public"
      ],
      "public/*": [
        "../public/*"
      ],
}

[JasonLandbridge]

@datsenkoboos or @akasection, did you guys ever managed to find a solution for this?

[JasonLandbridge]

This might be related to this issue here: https://github.com/nuxt/nuxt/issues/26512

It seems nuxt changed the way their tsconfig.json are generated which might lead to non-working extends

[akasection]

@JasonLandbridge not a solution though; just a workaround.

For nuxt >= 3.8, adding baseUrl temporarily fixes the problem, though it may leads undesirable effects later on (im not sure too)

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./.nuxt/",
  }

[LiNCH35]

For me it also helped to downgrade the vite version to 4.3.9

[matthew-dean]

@akasection

For nuxt >= 3.8, adding baseUrl temporarily fixes the problem, though it may leads undesirable effects later on (im not sure too)

This definitely did not work and broke the most things.

@LiNCH35

For me it also helped to downgrade the vite version to 4.3.9

This had no effect. I think ultimately this plugin doesn't actually support tsconfig paths.

[danielroe]

Here's an example of how to do the resolution:

https://github.com/nuxt/module-builder/blob/main/src/commands/build.ts#L279-L295

[JasonLandbridge]

@akasection Thank you very much! This indeed fixed my issue!