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

[maikelvl]

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/[email protected] 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

Vue CLI preset

{
  "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.

[StringKe]

I have the same problem

[TobiasGraml11]

I have the same issue as well. Interesting thing is, that the page is loaded "without issues"

[syphzur]

I have the same issue. @TobiasGraml11 @StringKe Did you fix that?

[longletian]

I also have the same issue

[Danielratmiroff]

i have the same problem

[TobiasGraml11]

I have the same issue. @TobiasGraml11 @StringKe Did you fix that?

@syphzur I could only fix the first issue by replacing Home with the import statement directly. So not importing and saving it in the Home variable.

[quboqin]

I updated vue cli to 4.5.4, but the problem still exists
<img width="789" alt="Screen Shot 2020-08-24 at 9 45 27 AM" ##src="https://user-images.githubusercontent.com/36749496/90995454-9c91cf00-e5ee-11ea-82fc-1a9493df1c93.png">

[StringKe]

@sodatea 有临时更改的方式，可以暂时使用么？

[haoqunjiang]

@posva @ktsn @pikax Could you take a look at this issue?

[ktsn]

I already sent a patch. vuejs/core#1943

[haoqunjiang]

Fixed in rc.8

[maikelvl]

@sodatea and @ktsn You're awesome. Thanks. ❤️

[Kritten]

I still encounter this problem with @vue/cli 4.5.4:

ERROR in src/modules/app/app.router.ts:20:5
TS2322: Type 'typeof import("/home/kritten/WebstormProjects/gamesdb/frontend/node_modules/vue/dist/vue")' is not assignable to type 'undefined'.
    18 |     path: '/login',
    19 |     name: 'login',
  > 20 |     component: Login,
       |     ^^^^^^^^^
    21 |   },
    22 |   {
    23 |     path: '/',

@sodatea which package do mean that should have version rc.8?

[maikelvl]

@Kritten "vue": "3.0.0-rc.8"

[Kritten]

@maikelvl aah ok, but I'm on RC.9 and it is still the same error

[maikelvl]

@Kritten Ok. If you provide a GitHub link to your code I could take a look for you.

[Kritten]

@maikelvl that would be awesome!
I temporarily made my repo public: https://github.com/Kritten/gamesdb/tree/development
Please check out the development branch and look in the /frontend directory for the vue project.

And please note that the serve script requires an .env file (can be empty for this purpose) one directory up
"serve": "env-cmd -f ../.env vue-cli-service serve --port 4022"

or you simply remove that part ;)

[maikelvl]

@Kritten I've set it up and after quite some searching I found your problem. The shims-vue.d.ts file in your project is not updated. The vue-cli does this correctly.

Use the following code:

// frontend/src/shims-vue.d.ts

declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

[Kritten]

@maikelvl You are a lifesaver! Thank you, it does work now!
How can I ensure to not miss such important file updates again?
With the vue upgrade command?

[maikelvl]

@Kritten You're welcome. 😊 Happy to help.
vue upgrade might work, but I'm not sure that would have worked. I suggest running a vue create test app and compare the output to your project.