vue-tsc failing with Error "Referenced Project may not disable emit" on vue project

Question

When updating my project to use the latest @vue/tsconfig version (version 0.5.1 as of this writing) the command vue-tsc fails with error

Referenced project 'd:/repos/project/tsconfig.node.json' may not disable emit

The project is build with Vite and Vue3 and was working without a problem prior to this update. Adding a "noEmit": false to the specified tsconfig fixes this.

This error comes from a breaking change of vue-tsc setting "noEmit": true in their default tsconfig @vue/tsconfig/tsconfig.json which my tsconfig extends.

My question is: are there any drawbacks from adding "noEmit": false to the tsconfig.node.json (which is used by vite). I have read, that noEmit tells typescript to not emit any output (like JavaScript files or type declarations) when it compiles my code.

Below are some minimal tsconfigs both for vue and vite used in my project (located in the project root folder):

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "noImplicitAny": false,
    "allowJs": true,
    "ignoreDeprecations": "5.0"
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

tsconfig.node.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
  "compilerOptions": {
    "composite": true,
    "types": ["node"],
    "noEmit": false // this was added
  }
}

Answer 1

I'm assuming you meant @vue/[email protected] instead of vue-tsc.

The upstream tsconfig.json addition of "noEmit": true is likely breaking your project because you're also running vue-tsc --noEmit somewhere in your package.json scripts.

If you look at a recent GitHub commit in the create-vue starter kit, you'll notice they repeated the same "noEmit": true addition in local tsconfig.json files, but removed the --noEmit flag to match, making a zero-sum change:

// package.json
- "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+ "type-check": "vue-tsc --build --force"

// tsconfig.app.json, tsconfig.node.json
+ "noEmit": true,

On your end, you should be able to solve your problem by updating your package.json scripts to match theirs.

---

My question is: are there any drawbacks from adding "noEmit": false to the tsconfig.node.json (which is used by vite).

I'm far from a TypeScript expert, but my understanding is you don't ever want to emit files from TS when using Vite, since Vite is handling the compilation for you. (I would imagine vite build passes the necessary flags behind the scenes.)

That said, if you keep this flag disabled and don't see any superfluous files being generated throughout your project, then it's probably fine? (Regardless — I would still follow create-vue's approach.)

Also see this SO answer on usage of this flag.

---

As an aside, it's worth mentioning that create-vue now generates a tsconfig.json that looks like:

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

You may have an easier time following along with future changes by updating your codebase to match this structure. You can browse those files here: https://github.com/vuejs/create-vue/tree/v3.9.1/template/tsconfig/base.