Importing types into Vue's SFCs doesn't work when using Pug.

[mareszhar]

Describe the bug

Note: I saw that it's recommended to report issues inside Vue's SFC in the vue/next repo, but I only face this issue when I use Vite and not when I use the Vue CLI, so that's why I decided to report it here.

---

Using an imported type inside a Vue component makes Vite's dev server render a completely blank page.

<script setup lang="ts">
import { someTypeScriptInterface } from "./types"
import { ref } from "vue"

// The line below will cause a fail even if the value passed to ref matches the Ref's typing:
const myRef = ref<someTypeScriptInterface>({ ... })
</script>

But, interestingly, the error only occurs if I'm using Pug in the component's template!

Setting the component's template back to HTML fixes the issue.

I should also note that:

• My IDE does not complain. Using an imported type in a SFC works fine with the linter and I get full type inference support.
• If I run npm run serve or npm run build instead of npm run dev, the app is compiled without any issues and works perfectly if I check it on the local development server.
• The problem only occurs with npm run dev, preventing me from using Vite's HMR.
• If I build the same project using Vue's CLI instead of Vite, I can use Pug in the template and type imports in the script tag. The page doesn't go blank and HMR still works.

I've been loving Pug and Vite, so I hope I don't have to give up on any of them. Any help fixing this bug or correcting a mistake on my end is extremely appreciated. Thank you ❤️ !

Reproduction

You can clone this minimal reproduction repo to reproduce the problem.

System Info

System:
  OS: Windows 10 10.0.19042
  CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Memory: 1.61 GB / 7.86 GB
Binaries:
  Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
  npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
  Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.53)
  Internet Explorer: 11.0.19041.1202

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Shinigami92]

Could you try import type { someTypeScriptInterface } from "./types" instead?

[mareszhar]

@Shinigami92 Yes! Thank you!! That fixes the problem in my example and most uses of imported types in Vue ❤️

I've noticed, however, that it doesn't work with defineProps:

import type { User } from "./types"

defineProps<User>() // this line will cause a crash

When I do that, I get the error type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type. But, the error doesn't occur if I define the exact same interface in place:

interface User { ... } // define user interface inside SFC

defineProps<User>() // this works! (???)

Maybe this is a bug with Vue's compiler or am I perhaps missing another keyword to correctly use the imported interface with defineProps?

Thank you so much for your support!

[Niputi]

vuejs/core#4982
vuejs/core#4294 (comment)