Skip to content

With typeCheck: true, vue-tsc checks /server dir with the wrong tsconfig file #31989

@Anoesj

Description

@Anoesj

Environment

Any environment

Reproduction

https://stackblitz.com/edit/github-epjdwiy5?file=server%2Fapi%2Ftest.get.ts

Describe the bug

Nuxt's TypeScript setup is split up in two contexts:

  • /server (<rootDir>/server/tsconfig.json, which extends <rootDir>/.nuxt/tsconfig.server.json)
  • and everything else (<rootDir>/tsconfig.json, which extends <rootDir>/.nuxt/tsconfig.json).

When you modify those contexts manually through nuxt.config.ts, those two contexts can become quite different. For example, one might want to define an alias for the /server directory only and not make it available elsewhere too (see repro). Maybe you want to add certain files to include for the /server dir, but not for the rest of the application. Or perhaps you even want to manually add certain auto-imports for the app, but not for the /server dir.

When typescript.typeCheck is set to true, Nuxt seems to use a custom Vite plugin that transforms and prepends files that need to be type checked with a comment that tells vite-plugin-checker to check those files. That in turn runs vue-tsc and uses its output to display it in the CLI and in the dev server UI. Currently, that doesn't take those two TS contexts into account. It always runs vue-tsc on all files that need to be type checked with the general/app <rootDir>/tsconfig.json. That means the /server directory is now typechecked with the wrong TS config file. When adding a console.log(userConfig) in vite-plugin-checker/dist/main.js in the checker function, this is confirmed by its output:

{ vueTsc: { tsconfigPath: '/var/www/experiments/nuxt-typecheck-wrong-tsconfig/tsconfig.json' } }

So to recap: in the repro, I wanted an alias called #alias-test only to work in the server directory. It does, but vue-tsc tells me I have a TS error, because that alias does not exist. That's because the alias is not registered in the main TS config (<rootDir>/tsconfig.json) and vue-tsc wrongfully type checks the /server dir with that TS config file:

Image

Why is this a problem? Well, in the runtime, the written code from the repro works perfectly, but once you deploy your app and your CI/CD fails a build, because you have TS errors, this starts to suck.

Ideally, Nuxt would somehow run vite-plugin-checker twice, with different TS config files and scanning different files. Even more ideally, the whole TypeScript config setup might need a rework, because there are other issues, like /shared using the general/app tsconfig file (<rootDir>/tsconfig.json), while its files could also run in the server TS context. I won't dive into that here though.

Additional context

Note: In StackBlitz, the TS error that vue-tsc outputs in the CLI is also displayed in the "IDE" editor itself. In VS Code (with the Vue (Official) extension), this is not the case:

Image

Logs

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions