HerringtonDarkholme / av-ts

A modern, type-safe, idiomatic Vue binding library
MIT License
216 stars 11 forks source link

Props throw `TypeError: Cannot redefine property: xxx` (with workaround) #81

Open whitetrefoil opened 2 years ago

whitetrefoil commented 2 years ago

I just got this error during upgrading of legacy project.

Post here just In case 😹 anyone else meets this problem during upgrading.

Workaround

Set "target" of TypeScript to "ES2021" or lower.

Analysis

TS changes the transpiled JS code of class properties when targeting ES2022 or higher (not sure started from what version of TS, just tested the latest v4.8.4).

// for a prop
@Prop disabled = p({type: Boolean, default: false})

// ES2021 or lower
_this.disabled=Object(av_ts__WEBPACK_IMPORTED_MODULE_1__["p"])({type:Boolean,default:false});

// ES2022 or higher
_defineProperty(_assertThisInitialized(_this),"disabled",Object(av_ts__WEBPACK_IMPORTED_MODULE_1__["p"])({type:Boolean,default:false}));

Since collectData in core.ts also uses defineProperty, this change causes redefine property errors.

HerringtonDarkholme commented 2 years ago

Thanks for the debugging tip! decorator is too complex to be used :(

whitetrefoil commented 2 years ago

Anyway the workaround works. Since Vue 3 has been release for long, I guess only aged projects use this now, targeting ES2021 should be totally enough. 😹