webpack 5 + Vue + TS-Loader how to use generics?

[Anubarak]

I tried to use generics with webpack and while I have no problems in my current Vite project I have no clue how to make it working with webpack.

I always receive TS2304: Cannot find name 'T'.
For example

<script setup lang="ts" generic="T extends string">
interface Props {
  modelValue: T;
}
const props = defineProps<Props>();
</script>

<template>{{ modelValue }}</template>

Is there a way to enable generics with this TS Loader and webpack 5? I created a minimal repo here
https://codesandbox.io/p/sandbox/webpack-vue-3-forked-p67wfr?welcome=true

Expected Behaviour

• Vue generics should work

Actual Behaviour

• Vue generics won't work -> see error above

Steps to Reproduce the Problem

• create a Vue component and try to use generics with webpack

Location of a Minimal Repository that Demonstrates the Issue.

https://codesandbox.io/p/sandbox/webpack-vue-3-forked-p67wfr?welcome=true

[Anubarak]

So I guess this is not possible?

[kamilwylegala]

@Anubarak I stumbled upon the same problem. I decided to give a try to rspack. And it helped. Migration was really straight forward (documentation is really helpful).

Requirements for it was only having vue-loader > v17.2.0. Also adding vue-tsc is required, since rspack only transpiles typescript. But just installing it helped, I have errors highlighted in IDE (phpstorm).

My build is reduced from 12sec to 3sec and generics support in Vue's single file component works now.