Why does my Vue file cause a TS6504 error and ask me if I meant to "allowJs"?

Question

I have a simple Vue 3 project that uses TypeScript and is giving the following error when I run vue-tsc --noEmit.

error TS6504: File '/proj/src/pages/Index.vue.__VLS_template.jsx' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/proj/src/pages/Index.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/proj/src/pages/PassLayout.vue.__VLS_template.jsx' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

error TS6504: File '/proj/src/pages/PassLayout.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

The files in question Index.vue and PassLayout.vue do not have <script> sections; they're <template> only.

PassLayout.vue

<template>
  <router-view />
</template>

Why am I getting these errors?

Answer 1

Without explicitly specify a <script> block with a the lang="ts" attribute, vue-tsc assumes the file is JavaScript instead of TypeScript.

Either set "allowJs": true in the compilerOptions in your tsconfig.json.

Or add the following to any single-file components that don't have an explicit script block.

<script setup lang="ts"></script>