-
-
Notifications
You must be signed in to change notification settings - Fork 5.4k
Description
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:
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: