typescriptvue.jsvuejs3

TypeScript configuration issue in a Vue 3 app


I am trying to add TypeScript to a large Vue 3 app which is using the options API. I think I have things largely working ok (I can serve the app and see it in the browser), but there seems to be a small config issue I can't get past.

In my root tsconfig.json file, there is an error for the tsconfig.app.json reference which says:

"Referenced project ... may not disable emit".

If I add "noEmit": false to the compilerOptions section in tsconfig.app.json then the error in the root tsconfig.json file goes away. However, I then get an error in the tsconfig.app.json file which says

"Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set"

I'm not explicitly using the allowImportingTsExtension option in any of my own configs, and in this case I am setting noEmit, so this error seems somewhat unusual.

Not sure how I can past these errors? For reference, here are my configs:

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "outDir": "./wwwroot/dist",
    "allowJs": true,
    "strict": false,
    "noEmit": false,
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

The app is using Vue 3.5.6, and the following devDependencies:

package.json

"devDependencies": {
    "@tsconfig/node20": "20.1.4",
    "@types/node": "22.9.0",
    "@vitejs/plugin-vue": "5.2.0",
    "@vue/tsconfig": "0.6.0",
    "rollup-plugin-copy": "3.5.0",
    "sass": "1.79.1",
    "typescript": "5.6.3",
    "vite": "5.4.11",
    "vite-plugin-vue-devtools": "7.6.4",
    "vue-tsc": "2.1.10"
}

Solution

  • The solution at this point seems to be to explicitly disable allowImportingTsExtensions in the tsconfig.app.json file. the noEmit option should also be explicitly disabled.

    With both of these options configured, I have no errors in either the root tsconfig, or tsconfig.app files.

    See this issue in the Vue github: https://github.com/vuejs/tsconfig/issues/10