node.js - Varför ger Vue.js3 `npm run build` en massa fel: TS2304 "Kan inte hitta namnet 'foo'" & TS2532 "Objektet är möjligen 'undefined'?"

Jag avslutade ett Vue.js3-projekt med TypeScript. Det senaste projektet jag gjorde med Vue var Vue.js2, och jag hade en enklare uppsättning utan vue-tsc.

Det verkar som att om jag kör standardkommandot npm run build, som anropar vue-tsc --noEmit && vite build, får jag 53 fel (flera i alla slags filer).

Dessa fel uppträder aldrig under utvecklingskompilering, och jag ser inga problem markerade i VS Code. Jag ser bara mängden fel (troligen relaterade till min Typescript-konfiguration?) efter byggförsöket.

Jag kunde lösa det genom att ta bort vue-tsc --noEmit från kommandot och endast använda: vite build. Dock undrar jag om jag missar något eller om det kan orsaka några potentiella problem med mitt projekt?

Kodsnuttar nedan:

build-konfiguration i Vue-appens 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"
  },

T.ex.

Fel jag ser när jag bygger med vue-tsc (2 visade)

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 :(

Komponenten Register.vue (exempel på komponent som flaggades som fel ovan)

OBS: igen, inga fel vid utvecklingskompilering här.

<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-inställning

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

Har någon en idé om vad jag kan sakna? Kan det finnas något fel eller något saknas i min tsconfig.json?

Sammanfattning

Att köra byggkommandot som vue-tsc --noEmit && vite build genererar en massa fel som inte finns vid utvecklingskompileringar. Om jag bara bygger via vite build fungerar det dock. Jag är dock ny på vue-tsc och undrar om min setup är felaktig, eller om jag missar något.

Svar #1

Jag stötte på samma problem, och löste det genom att uppgradera versionen av vue-tsc till 0.40.13 (den senaste versionen)

Svar #2

det måste fungera efter att du tagit bort vue-tsc --noEmit från build-raden i package.json.

"build": "vue-tsc --noEmit && vite build",

måste vara

"build": "vite build",

för mitt fall har jag också en konfigurationsfil så:

"build": "vite build --config vite-app.config.ts"

Relaterade artiklar