Why does Vue.js3 `npm run build` give a bunch of errors: TS2304 "Cannot find name 'foo'" & TS2532 "Object is possibly 'undefined'"?

Question

I finished a Vue.js3 project using TypeScript. The last project I did with Vue was Vue.js2, and I had a simpler setup without vue-tsc.

It appears that if I run the default npm run build command, that calls vue-tsc --noEmit && vite build, I get 53 errors (multiple in all sorts of files).

These errors are never present during dev compile, and don't see any problems highlighted in VS code. I only see the slough of errors (likely related to my Typescript setup?) following the build attempt.

I was able to work around it, by removing the vue-tsc --noEmit from the command and only use: vite build. However, wonder if I'm missing anything or causing me any potential problems with my project?

Code snippets below:

build config in Vue app package.json

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview --port 5050",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },

E.g,

Errors I see when I build with vue-tsc (2 shown)

44         v-model="user.password"
                    ~~~~

src/components/Register.vue:44:18 - error TS2304: Cannot find name 'user'.

44         v-model="user.firstName"
                    ~~~~

src/components/Login.vue:48:25 - error TS2532: Object is possibly 'undefined'.
...
...53 more :(

Register.vue component (example of component flagged in error above)

NOTE: again, no errors on dev compile here.

<script lang="ts">
import RegisterButton from "./buttons/RegisterButton.vue";
import ValidationErrors from "./ValidationErrors.vue";
export default {
  name: "RegisterUser",
  components: {
    RegisterButton,
    ValidationErrors,
  },
  data() {
    return {
      user: {
        firstName: "",
        lastName: "",
        email: "",
        password: "",
      },
      errors: {},
    };
  },
  methods: {
    onValidationError(errors: Record<string, unknown>) {
      let err = {};
      for (const key in errors) {
        const message = errors[key]["message"];
        err[key] = message;
      }
      this.errors = err;
    },
  },
};
</script>

<template>
  <div class="container-sm mt-3">
    <h1 class="mb-4">Register a New User</h1>
    <ValidationErrors :errors="errors" />
    <!-- Registration Form -->
    <div class="mb-3">
      <input
        type="text"
        class="form-control form-control-lg"
        placeholder="First Name"
        v-model="user.firstName"
      />
    </div>
    <div class="mb-3">
      <input
        type="text"
        class="form-control form-control-lg"
        placeholder="Last Name"
        v-model="user.lastName"
      />
    </div>
    <div class="mb-3">
      <input
        type="email"
        class="form-control form-control-lg"
        placeholder="Email"
        v-model="user.email"
      />
    </div>
    <div class="mb-3">
      <input
        type="password"
        class="form-control form-control-lg"
        placeholder="Password"
        v-model="user.password"
      />
    </div>
    <RegisterButton :user="this.user" @validationError="onValidationError" />
  </div>
</template>

tsconfig.json setup

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@": ["src/*"],
      "store/*": ["src/store/*"]
    },
    "module": "es2022",
    "moduleResolution": "Node",
  }
}

Does anyone have an idea of what I might be missing? Might there be something incorrect or missing from my tsconfig.json?

Tl;DR

Running build command as vue-tsc --noEmit && vite build throws a bunch of errors that aren't present during dev compiles. If I build only via vite build, things do work. However, I'm new to vue-tsc and wondering if my setup is incorrect, or if I'm missing something.

Answer 1

I found the same problem, and solved it by upgrading the version of vue-tsc to 0.40.13 (the latest version)