Props are undefined during initialization when using @Prop decorator from vue-property-decorator during production

[pauloevpr]

Reproduction repo: https://github.com/pauloevpr/reproduction-vite-plugin-vue-2-props-issue

When defining props using the @Prop decorator from vue-property-decorator, the props are undefined during the component's initilization when running in Production.

If you take for instance the following class component:

<template>
  <div>
    <span>{{ someValue }}</span>
  </div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

class TestClass {
  constructor(value: string) {
    console.log(`value when initialing data: ${value}`)
  }
}

@Component
class ChildComponent extends Vue {
  @Prop({required: true, type: String}) someValue!: string;
  dataField = new TestClass(this.someValue);

  beforeMount() {
    console.log(`value beforeMount: ${this.someValue}`)
  }
}
export default ChildComponent;
</script>

When the component is rendered, the following output will appear on the console:

value when initialing data: undefined
value beforeMount: XXXXXXX

The expected output should be:

value when initialing data: XXXXXXX
value beforeMount: XXXXXXX

The issue only happens:

• During production when the application is built using vite build;
• When using @Prop decorator to define props. It seems to work fine when props are defined inside the @Component decorator's parameter;

Packages and Versions:

{
  "name": "vue2-vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue-property-decorator": "^9.1.2",
    "vue-class-component": "^7.2.6",
    "vite-plugin-vue2": "^1.8.1",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "vite": "^2.5.0",
    "vue-template-compiler": "^2.6.14",
    "typescript": "^4.3.5"
  }
}

[jamesabell]

I'm also running into this issue. The work around would be to set the property in the created lifecycle hook, but I'm also concerned about why this is different behaviour from webpack.

[mariusheine]

Setting useDefineForClassFields: false in tsconfig compilerOptions like proposed here solved it for me