Encountering a strange issue while creating a new app using vue-cli: the HelloWorld component is throwing an error with decorators, despite not making any changes as all code and configurations are from vue-cli.
Here is the specific error message:
ERROR in /Users/JohnSmith/test/src/components/HelloWorld.vue
37:1 Unable to resolve signature of class decorator when called as an expression.
Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type 'typeof HelloWorld': extend, nextTick, set, delete, and 7 more.
35 | import { Component, Prop, Vue } from 'vue-property-decorator';
36 |
> 37 | @Component
| ^
38 | export default class HelloWorld extends Vue {
39 | @Prop() private msg!: string;
40 | }
A workaround was discovered:
@Component({
props: {
msg: {type: String},
},
})
export default class HelloWorld extends Vue {
// @Prop() private msg!: string;
}
The goal is to use decorators without errors in the generated dummy project.
Environment setup:
- macOS High Sierra 10.13.6
- node v11.3.0 (with brew)
- npm 6.4.1
- yarn 1.12.3 (with brew)
- Vue CLI v3.2.1
- brew doctor is fine
Vue-cli options used for project creation:
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
No information found regarding this particular issue.
Any insights on the source of the problem would be greatly appreciated.
Thank you for your assistance!