21

I'm using Vue 3, Vite and TypeScript. I wanted to give a try of building Vue project with TypeScript. The configuration has been really difficult so far. I've been looking at various documentations but I'm struggling to achieve my goal. The project shouldn't build and throw errors if there's something wrong with the code.

I'm attaching the code below and I'd like to ask for help, please.

App.vue

<template>
  <header>
    <h1>The Learning Resources App</h1>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

// import StoredResource from '//StoredResource';

interface VueData {
  storedResources: StoredResource[];
}

export default defineComponent({
  name: 'App',
  data(): VueData {
    return {
      storedResources: [
        {
          id: 'official-guide' as number,
          title: 'Official Guide',
          description: 'The official Vue.js documentation.',
          link: 'https://vuejs.org/',
        },
        {
          id: 'google',
          title: 'Google',
          description: 'Learn to google...',
          link: 'https://www.google.co.uk/',
        },
      ],
    };
  },
});
</script>

package.json

{
  "name": "the-learning-resources-app---vue-js-ts",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 5001",
    "test": "jest src",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5001/ 'npx cypress open'",
    "test:e2e:ci": "start-server-and-test 'npm run build && npm run preview' http://127.0.0.1:5001/ 'npx cypress run'",
    "cypress": "cypress run",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix",
    "format": "prettier -w .",
    "prepare": "husky install"
  },
  "dependencies": {
    "vue": "^3.2.36"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/jest": "^28.1.1",
    "@types/jsdom": "^16.2.14",
    "@types/node": "^16.11.36",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/tsconfig": "^0.1.3",
    "cypress": "^9.7.0",
    "eslint": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-vue": "^8.2.0",
    "husky": "^8.0.1",
    "jest": "^26.6.3",
    "jsdom": "^19.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "start-server-and-test": "^1.14.0",
    "ts-jest": "^26.5.6",
    "typescript": "~4.7.2",
    "vite": "^2.9.9",
    "vitest": "^0.13.0",
    "vue-jest": "^5.0.0-alpha.10",
    "vue-tsc": "^0.35.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "/@/*": [
        // / to begin with.
        "src/*"
      ]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "types": ["vite/client", "jest", "@types/jest", "node", "cypress"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
Rafal Adam Krohne
  • 437
  • 1
  • 3
  • 15
  • What is your error and why did you comment out `StoredResource` while your using it – net-js Jun 08 '22 at 12:33
  • I only get error inside VS Code. While commented out ```StoredResource``` VS Code will show me Cannot find name 'StoredResource'.ts(2304) 'StoredResource' is not defined. - that is how it suppose to work. But the project still builds and dev environment also runs. I'd rather everything to crash if there's error inside the code. I hope that makes sense – Rafal Adam Krohne Jun 08 '22 at 12:38
  • add the `//@ts-ignore` comment above the line if your program else check if the file is there in that path – net-js Jun 08 '22 at 13:40
  • I think we've got a misunderstanding over here. I'm sorry if I can't explain everything correctly. I would like the the console to fail on npm run build/dev if there's error inside TS. At the moment TS errors are ignored and I'm not sure why – Rafal Adam Krohne Jun 08 '22 at 14:05
  • I cannot reproduce the issue in this [StackBlitz](https://stackblitz.com/edit/vitejs-vite-6d1zua?file=src%2FApp.vue). The build correctly fails. – tony19 Jun 09 '22 at 04:44
  • Hi, thank you very much for this. I can confirm the build correctly fails. Build also fails on my local machine too (not sure what was wrong before). Although, would you be able to explain why npm run dev is not picking up any errors? https://stackblitz.com/edit/vitejs-vite-z8y5tc – Rafal Adam Krohne Jun 09 '22 at 06:55
  • 12
    From [docs](https://vitejs.dev/guide/features.html#typescript): `Vite only performs transpilation on .ts files and does NOT perform type checking. It assumes type checking is taken care of by your IDE and build process (you can run tsc --noEmit in the build script or install vue-tsc and run vue-tsc --noEmit to also type check your *.vue files).`. So you should lean on your IDE to point out the errors in your TypeScript. Use Volar in VS Code, for instance. – tony19 Jun 10 '22 at 20:24
  • I ain't sure how I've missed that inside the documentation. Anyway, thank you very much for raising this and making everything clear. I think I was hoping this will work similar as React with TS. Thank you very much for your time for helping me out! – Rafal Adam Krohne Jun 11 '22 at 07:08

4 Answers4

17

From docs: Vite only performs transpilation on .ts files and does NOT perform type checking. It assumes type checking is taken care of by your IDE and build process (you can run tsc --noEmit in the build script or install vue-tsc and run vue-tsc --noEmit to also type check your *.vue files).. So you should lean on your IDE to point out the errors in your TypeScript. Use Volar in VS Code, for instance.

Citing @tony19 comment. This should be the right answer.

Guiqft
  • 171
  • 1
  • 3
  • 3
    whilst your answer is objectively true to the question and communicates what vite is meant to be and what it isn't, most developers will be coming here looking for something of a solution. I'd say https://stackoverflow.com/a/76020900/4364101 is a solution. – Jordan Mackie May 01 '23 at 20:08
12

I solved this with the npm package npm-run-all by updating the package.json scripts as follows.

"vite": "vite",
"watch-tsc": "tsc --watch --noEmit"
"start": "npm-run-all --parallel watch-tsc vite"
akai
  • 352
  • 1
  • 6
  • 16
  • 2
    This worked for my react app. Thanks! – Holt Mansfield Feb 04 '23 at 20:48
  • This answer is like a charm. It works in react projects which created with Vite and Typescript. But it doesn't show the error in browser or console. How can we have something like Webpack? – Ali Bayat Mokhtari Feb 28 '23 at 19:46
  • @AliBayatMokhtari I might be wrong but to me it seems impossible by design. This system decouples runtime errors from compilation errors, which to me actually works better as a workflow (e.g. application doesn't break for an error in a file I'm not currently using) – akai Mar 02 '23 at 09:59
  • @AliBayatMokhtari the answer by Eugene Snihovsky worked for me, and it will show the errors in the browser. – liquidki Jul 21 '23 at 02:21
11

For any other developers with this question. You can use vite-plugin-checker for this case.

Install plugin

npm install --save-dev vite-plugin-checker
# or
yarn add -D vite-plugin-checker

In your vite.config.ts

import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    // your plugins
    checker({
      typescript: true,
    }),
  ],
  // your config
})
Eugene Snihovsky
  • 470
  • 7
  • 15
1

I fixed this on dev by using this package.

"dev": "concurrently \"vite\" \"tsc --watch --noEmit\""

Arctodus
  • 5,743
  • 3
  • 32
  • 44
mikejackowski
  • 51
  • 5