@vue/compat not working with Typescript (missing template or render function)

[dwgray]

Vue version

3.2.47 with @vue/compat 3.2.47

Link to minimal reproduction

https://github.com/dwgray/vue-compat-typescript

Steps to reproduce

run yarn serve from the root of this project and then open the localhost URL that is emitted to the command line in a browser.

What is expected?

The vue-cli starter template application.

What is actually happening?

A blank page.

Console shows:

vue.runtime.esm-bundler.js?fe26:1595 
        
       [Vue warn]: Component is missing template or render function. 
  at <App>

vue.runtime.esm-bundler.js?fe26:1595 
        
       [Vue warn]: Component is missing template or render function. 
  at <App>

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
    Memory: 8.22 GB / 31.75 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1265.0), Chromium (110.0.1587.46)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.1.0 => 3.2.47

Any additional comments?

I am trying to migrate a vue 2.0 application that I created with the vue-cli to vue 3.0 using the migration build and running into issues immediately.

For this repro, I created a new vue.js 2.0 application using the vue-cli with the following options:

vue create vue-compat-typescript

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-s
ass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

I then started applying the steps described in the migration build documentation. This pull request shows the changes I applied.

It seems like I am running the migration build at least close to correctly in that:

1. The project compiles cleaning
2. The first warning I'm seeing is a deprecation warning

But the vue application doesn't successfully mount. I'm seeing a blank browser window and no vue code being injected.

I'm pretty sure this isn't the same issue as #4330, since I'm including the shim mentioned in that issue. I've tried both with just that shim (which is what I'm showing in the repo) and the combination of the new shim and the shim that was created by the vue-cli template.

[LinusBorg]

This is not really related to Typescript per se, but rather to the compat version of Vue.extend(), which does not get handled properly in the compat code of h().

Should be a straightforward fix.

[dwgray]

Thanks Linus. Let me know if there is anything I can do to help this along.