vue-cli: Vue init with Vue 3, TypeScript and class-style components produces an error.

Version

4.5.3

Reproduction link

https://github.com/maikelvl/vue-cli-init-typescript-class-component

Environment info

  System:
    OS: Linux 4.14 Alpine Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7600K CPU @ 3.80GHz
  Binaries:
    Node: 14.8.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @ant-design-vue/babel-helper-vue-transform-on:  1.0.1
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.5.3
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.5.3
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.3
    @vue/cli-plugin-e2e-cypress: ~4.5.0 => 4.5.3
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.3
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.3
    @vue/cli-plugin-router: ~4.5.0 => 4.5.3
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.3
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.3
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.3
    @vue/cli-service: ~4.5.0 => 4.5.3
    @vue/cli-shared-utils:  4.5.3
    @vue/compiler-core:  3.0.0-rc.5
    @vue/compiler-dom:  3.0.0-rc.5
    @vue/compiler-sfc: ^3.0.0-0 => 3.0.0-rc.5
    @vue/compiler-ssr:  3.0.0-rc.5
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^5.0.2 => 5.0.2
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.0.0-rc.5
    @vue/runtime-core:  3.0.0-rc.5
    @vue/runtime-dom:  3.0.0-rc.5
    @vue/shared:  3.0.0-rc.5
    @vue/test-utils: ^2.0.0-0 => 2.0.0-beta.2
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^7.0.0-0 => 7.0.0-beta.2
    jest-serializer-vue:  2.0.2
    typescript: ~3.9.3 => 3.9.7
    vue: ^3.0.0-0 => 3.0.0-rc.5
    vue-class-component: ^8.0.0-0 => 8.0.0-alpha.6
    vue-eslint-parser:  7.1.0
    vue-hot-reload-api:  2.3.4
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.3 (3.0.6)
    vue-loader:  15.9.3 (16.0.0-beta.5)
    vue-router: ^4.0.0-0 => 4.0.0-beta.6
    vue-style-loader:  4.1.2
    vue-template-es2015-compiler:  1.9.1
    vuex: ^4.0.0-0 => 4.0.0-beta.4
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Generate project using @vue/cli@4.5.3 on Node v14.8.0:

$ vue init hello-world

Vue CLI v4.5.3
? Please pick a preset:                        Manually select features
? Check the features needed for your project:  Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you wan...   3.x (Preview)
? Use class-style component syntax?            Yes
? Use Babel alongside TypeScript (required...  Yes
? Use history mode for router? (Requires p...  Yes
? Pick a CSS pre-processor (PostCSS, Autop...  Sass/SCSS (with node-sass)
? Pick a linter / formatter config:            Prettier
? Pick additional lint features:               Lint on save
? Pick a unit testing solution:                Jest
? Pick an E2E testing solution:                Cypress
? Where do you prefer placing config for B...  In dedicated config files
? Save this as a preset for future projects?   Yes
? Save preset as:                              typescript-class-component
? Pick the package manager to use when ins...  Yarn

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn",
  "presets": {
    "typescript-class-component": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": true,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-pwa": {},
        "@vue/cli-plugin-router": {
          "historyMode": true
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {},
        "@vue/cli-plugin-e2e-cypress": {}
      },
      "vueVersion": "3",
      "cssPreprocessor": "node-sass"
    }
  }
}

What is expected?

$ yarn serve

 DONE  Compiled successfully in 3812ms                                                                                                   2:22:25 PM


  App running at:
  - Local:   http://localhost:8080/

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

What is actually happening?

$ yarn serve

 DONE  Compiled successfully in 3812ms                                                                                                   2:22:25 PM


  App running at:
  - Local:   http://localhost:8080/

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

ERROR in src/router/index.ts:8:5
TS2322: Type 'typeof Home' is not assignable to type 'undefined'.
     6 |     path: "/",
     7 |     name: "Home",
  >  8 |     component: Home
       |     ^^^^^^^^^
     9 |   },
    10 |   {
    11 |     path: "/about",

Not sure if this is pure vue-cli issue, because there are a lot of alpha/beta/rc Vue dependencies.

Disabling class-style components does not have this effect.