Vite not reporting type errors in .vue files during dev / build

[bartenra]

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• Read the docs.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

Type errors are not detected in .vue files, neither in dev mode (vite dev) nor when building (vite build).

Reproduction

• Create new vue-ts project using npm init @vitejs/app
• Modify src/components/HelloWorld.vue, add the following line:

let hello: boolean = "Hello"

Run vite dev: no error reported.

Run vite build: no error reported.

This is a duplicate of #749 which was closed.

System Info

• vite version: 2.1.0
• Operating System: Arch Linux
• Node version: v15.10.0
• Package manager (npm/yarn/pnpm) and version: 6.14.11

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

Buid log

$ npx vite build --debug
vite:config bundled config file loaded in 101ms +0ms
vite:config using resolved config: {
vite:config   plugins: [
vite:config     'alias',
vite:config     'vite:dynamic-import-polyfill',
vite:config     'vite:resolve',
vite:config     'vite:html',
vite:config     'vite:css',
vite:config     'vite:esbuild',
vite:config     'vite:json',
vite:config     'vite:wasm',
vite:config     'vite:worker',
vite:config     'vite:asset',
vite:config     'vite:vue',
vite:config     'vite:define',
vite:config     'vite:css-post',
vite:config     'vite:build-html',
vite:config     'commonjs',
vite:config     'vite:data-uri',
vite:config     'rollup-plugin-dynamic-import-variables',
vite:config     'vite:import-analysis',
vite:config     'vite:esbuild-transpile',
vite:config     'vite:terser',
vite:config     'vite:reporter'
vite:config   ],
vite:config   build: {
vite:config     target: [ 'es2019', 'edge16', 'firefox60', 'chrome61', 'safari11' ],
vite:config     polyfillDynamicImport: true,
vite:config     outDir: 'dist',
vite:config     assetsDir: 'assets',
vite:config     assetsInlineLimit: 4096,
vite:config     cssCodeSplit: true,
vite:config     sourcemap: false,
vite:config     rollupOptions: {},
vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
vite:config     minify: 'terser',
vite:config     terserOptions: {},
vite:config     cleanCssOptions: {},
vite:config     write: true,
vite:config     emptyOutDir: null,
vite:config     manifest: false,
vite:config     lib: false,
vite:config     ssr: false,
vite:config     ssrManifest: false,
vite:config     brotliSize: true,
vite:config     chunkSizeWarningLimit: 500
vite:config   },
vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
vite:config   configFile: '/home/bart/sandbox/vite-project/vite.config.ts',
vite:config   inlineConfig: {
vite:config     root: undefined,
vite:config     base: undefined,
vite:config     mode: undefined,
vite:config     configFile: undefined,
vite:config     logLevel: undefined,
vite:config     clearScreen: undefined,
vite:config     build: {}
vite:config   },
vite:config   root: '/home/bart/sandbox/vite-project',
vite:config   base: '/',
vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
vite:config   publicDir: '/home/bart/sandbox/vite-project/public',
vite:config   command: 'build',
vite:config   mode: 'production',
vite:config   isProduction: true,
vite:config   optimizeCacheDir: '/home/bart/sandbox/vite-project/node_modules/.vite',
vite:config   server: {},
vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
vite:config   assetsInclude: [Function: assetsInclude],
vite:config   logger: {
vite:config     hasWarned: false,
vite:config     info: [Function: info],
vite:config     warn: [Function: warn],
vite:config     error: [Function: error],
vite:config     clearScreen: [Function: clearScreen]
vite:config   },
vite:config   createResolver: [Function: createResolver]
vite:config } +3ms
vite v2.1.0 building for production...
✓ 15 modules transformed.
dist/assets/logo.03d6d6da.png    6.69kb
dist/index.html                  0.47kb
dist/assets/index.3b597bd0.css   0.34kb / brotli: 0.18kb
dist/assets/index.77a107c9.js    2.14kb / brotli: 0.92kb
dist/assets/vendor.6801b2a0.js   42.65kb / brotli: 15.36kb

[yyx990803]

That's expected: Vite explicit does NOT handle type checking by itself: https://vitejs.dev/guide/features.html#typescript

• During dev, your IDE should already report the errors.
• During build, the latest template does perform type checking already. Make sure to run npm init @vitejs/app@latest.

[bartenra]

@yyx990803 Thank you for your answer.

tsc --noEmit does not work for .vue files.

I used npm init @vitejs/app@latest, but during build type checking does not work.

[bartenra]

Ah, I used npx vite build.

npm run build does actually work.

[kikyous]

@yyx990803 type checking in IDE is not enough, I think we need a plugin like https://github.com/TypeStrong/fork-ts-checker-webpack-plugin

[Shinigami92]

@kikyous The newest template for ts already use vue-tsc

vite/packages/create-app/template-vue-ts/package.json

Line 6 in eb66b43

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

You could upgrade your own package.json

[kikyous]

@Shinigami92 but vue-tsc can not work in watch mode

[Shinigami92]

As Evan already said:

During dev, your IDE should already report the errors.