`@event` stopped working after upgrading babel preset/plug-in

[vs-savelich]

After updating babel I have noticed that @event is working incorrectly. This probably affects some other decorators as well. It happens when instance of a class containing events is being created. Babel doesn't "see", that properties have been defined on class prototype already and defines new set of properties, which are undefined. After some investigation I found out, that assigning this to false fixes the problem. Is there any reason that property descriptor has to be configurable?

babelrc:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "esmodules": true
                },
                "modules": false
            }
        ]
    ],
    "plugins": [
        "lodash",
        "@babel/plugin-transform-runtime"
    ]
}

babel versions: "@babel/runtime": "^7.14.0", "@babel/core": "^7.14.3", "@babel/plugin-transform-runtime": "^7.14.3", "@babel/preset-env": "^7.14.2", "babel-plugin-lodash": "^3.3.4"

webpack version: 5.38.1

knockout-decorators version: 2.0.0

[nmocruz]

@vs-savelich did you find a way to use this with babel? I also got event properties

[vs-savelich]

@nmocruz unfortunately no.

[viceice]

I'm now seeing the same issue since changeing my typescript compiler target to es2022. 🤔

class SomeClass {
  @event
  on: SomeType;
}

will be compiled to

class SomeClass {
  on; // <-- this is the problem
  constructor() {
  }
}
__decorate([
        knockout_decorators_1.event
    ], SomeClass.prototype, "on", void 0);

So it's overriding the prototype property 😕

Targeting ES2021 fixes the issue:

class SomeClass {
  constructor() {
  }
}
__decorate([
        knockout_decorators_1.event
    ], SomeClass.prototype, "on", void 0);

[viceice]

• https://stackoverflow.com/questions/75098049/why-is-typescript-optional-class-property-is-set-to-undefined-for-es2022

[viceice]

Another fix it to use declare

• https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier

  class SomeClass {
  @event
  declare on: SomeType;
  }