babel plugin Static Block issue and tracked() assertion

[Alberto Cantú Gómez]

Hello, im getting this error when trying to serve the dummy app of a v1 addon with a v2 addon as dependency whose dist was built with this package.

Static class blocks are not enabled. Please add @babel/plugin-transform-class-static-block to your configuration

The v1 addon has ember-cli-babel 8.2.0 "which supposedly don't need it anymore, but still getting it 🤔

Here's a component in the dist of the addon

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { later } from '@ember/runloop';
import { buildValidationMessages, notifyValidityChange } from '../../utils/build-validation-messages.js';
import { g, i, n } from 'decorator-transforms/runtime';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';

class ValidatedFormFieldBase extends Component {
  validationProperty = 'args.value';
  //cache for comparing
  lastIsValid;
  lastIsTouched;
  static {
    g(this.prototype, "_validationErrorMessages", [tracked], function () {
      return null;
    });
  }
  #_validationErrorMessages = (i(this, "_validationErrorMessages"), void 0);
  static {
    g(this.prototype, "isTouched", [tracked], function () {
      return false;
    });
  }
  #isTouched = (i(this, "isTouched"), void 0);
  get validations() {
    return this.args.validations || {};
  }
  get hasErrorMessages() {
    return this._validationErrorMessages?.length || this.error?.length > 0;
  }
  get isValid() {
    return !this.isInvalid;
  }
  get isInvalid() {
    return this.hasErrorMessages;
  }
  get isInvalidAndTouched() {
    return !!(this.isInvalid && this.isTouched);
  }
  get formHasBeenValidated() {
    return this.isTouched;
  }
  set formHasBeenValidated(value1) {
    this.isTouched = value1;
  }
  get customValidations() {
    return this.args.customValidations || [];
  }
  get rowClasses() {
    return this.args.rowClasses || '';
  }
  get rowExtra() {
    return this.args.rowExtra || {};
  }
  get label() {
    return this.args.label || '';
  }
  get error() {
    return this.args.error || [];
  }
  get options() {
    return this.args.options || [];
  }
  get validationErrorMessages() {
    let error1 = [];
    if (this.error.length > 0) {
      error1.push(...this.error);
    }
    if (this._validationErrorMessages && this._validationErrorMessages.length > 0) {
      error1.push(...this._validationErrorMessages);
    }
    if (error1.length === 0) {
      return null;
    }
    return error1;
  }
  constructor(owner1, args1) {
    super(owner1, args1);
    this.args.register?.(this);
  }
  //Should be executed by the child on start
  setValidationMessages() {
    this._validationErrorMessages = buildValidationMessages.call(this, this.validationProperty);
  }
  //Should be executed by the child on value update
  static {
    n(this.prototype, "setValidationMessages", [action]);
  }
  didUpdateValue() {
    later(() => {
      if (!this.isDestroyed && !this.isDestroying) {
        this.setValidationMessages();
        this.notifyValidityChange();
      }
    }, 1);
  }
  static {
    n(this.prototype, "didUpdateValue", [action]);
  }
  notifyValidityChange() {
    notifyValidityChange(this, this.args.onValidityChange);
  }
  static {
    n(this.prototype, "notifyValidityChange", [action]);
  }
  setIsTouched(val1) {
    this.isTouched = val1;
    this.notifyValidityChange();
  }
  /**
  * This is just a default handleChange, you should override this method
  * if you need to or use whatever mechanism to bubble the changed
  * value outside and then notifyValidityChanges
  *
  * @override
  * @param {*} e
  */
  static {
    n(this.prototype, "setIsTouched", [action]);
  }
  handleChange(e1) {
    const value1 = e1.target.value;
    this.args.onChange(value1);
    this.notifyValidityChange();
  }
  static {
    n(this.prototype, "handleChange", [action]);
  }
  willDestroy() {
    super.willDestroy();
    this.args.unregister?.(this);
  }
  static #_ = setComponentTemplate(precompileTemplate("\n    {{!--@glint-expect-error--}}\n    {{yield this}}\n  ", {
    strictMode: true
  }), this);
}

export { ValidatedFormFieldBase as default };
//# sourceMappingURL=field-base.js.map

Also tried adding the plugin and ember-cli-babel is telling its no longer needed

[Alberto Cantú Gómez]

I extracted the repro but I couldnt actually get the same bug, but I did got a new one:

[Alberto Cantú Gómez]

https://github.com/betocantu93/repro-eui

[Edward Faulkner]

I think you need ember-auto-import >= 2.7.0.

[Alberto Cantú Gómez]

@ef4 yup! v2.7.0 made it work for static block error, thanks!

but im still getting the tracked() one

[Alberto Cantú Gómez]

Seems like this.prototype is undefined

static {
    g(this.prototype, "_validationErrorMessages", [tracked], function () {
      return null;
    });
  }

[Alberto Cantú Gómez]

I think something was cached or so, it's now working.

This package ~v1.0.3
Ember cli babel ~8.2.0
Ember auto import ~2.7.0

Rebuilt, rereleased and it's now working. Thanks!