Vue version

3.2.45

Link to minimal reproduction

https://github.com/qnp/vue3-pug-template-ts-assertion-bug

Steps to reproduce

1. Clone the repository.
2. Run yarn then yarn dev
3. Open the app URL in your browser
4. You see a blank page and an error in the console:

Uncaught SyntaxError: Unexpected identifier 'as' (at App.vue?vue&type=template&lang.js:5:63)

What is expected?

As stated by the official documentation, type assertion in templates should be properly compiled.

This is the case when using a regular HTML template (you can uncomment the given template in src/App.vue if you want to make sure). This compiles properly in build (yarn build), and should compile also properly in dev server ( yarn dev).

What is actually happening?

In dev server, the app crashes with a runtime error because it is not properly compiled:

Uncaught SyntaxError: Unexpected identifier 'as' (at App.vue?vue&type=template&lang.js:5:63)

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 22.93 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 109.0
    Firefox Developer Edition: 71.0
    Firefox Nightly: 76.0a1
    Safari: 15.6.1
  npmPackages:
    vue: ^3.2.45 => 3.2.45

Any additional comments?

Maybe this is only related with Vite (I use v4.0.4), but as the type assertion usage in templates is part of the official VueJS documentation, and as Vite is the officially recommended bundler, I think it is relevant to address the issue in VueJS project. If I'm wrong, I'll open the issue on Vite side.

Best regards

It's a vite bug, and I have reported this bug to vite and provided a pr for this, look this way.

@Jevon617 thanks.