Importing .vue Single File Components in server-side nodemon process

I need to render a Vue component into resulting HTML on the server side. The component is declared in MyComponent.vue SFC file. I'm using vue-server-renderer to do that. Currently I need this for Vue 2 project but it'll soon migrate to Vue 3.

The code to render HTML:

import { createRenderer } from 'vue-server-renderer'
import Vue from 'vue'
import MyComponent from '@/server/MyComponent.vue'


function renderMyComponentHtml(): Promise<string> {
  const renderer = createRenderer()
  const component = new Vue(MyComponent)
  return new Promise<string>((resolve, reject) => {
    renderer.renderToString(component, (err, html) => {
      if (err) reject(err)
      else resolve(html)
    })
  })
}

The MyComponent.vue is simple, but please note that it has to be in Typescript:

<template>
  <i>hello, {{ name }}</i>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'

export default Vue.extend({
  name: 'MyComponent',
  props: {
    name: {
      type: String as PropType<string>,
      default: 'user',
    },
  },
})
</script>

With that I'm getting the following error:

<template>
^

SyntaxError: Unexpected token '<'
    at Object.compileFunction (node:vm:353:18)
...

... on the first line of the .vue file. Looks like I need to configure some kind of transformer or preprocessor for SFC .vue files for either nodemon or node.

My nodemon.json, if it has any relevance:

{
  "restartable": "rs",
  "ignore": [".git", "node_modules/**/node_modules"],
  "verbose": true,
  "execMap": {
    "ts": "node -r tsconfig-paths/register --require ts-node/register"
  },
  "watch": ["src/"],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "js,json,ts,vue"
}

Bonus points if you show me how to supply values for props of the component (name in my example here).