emberjs / ember-cli-babel

Ember CLI plugin for Babel
MIT License
153 stars 119 forks source link

7.26.7: Decorating class property failed. Please ensure that proposal-class-properties is enabled and runs after the decorators transform. #425

Closed NullVoxPopuli closed 2 years ago

NullVoxPopuli commented 2 years ago

Just got this in an OSS project (which I'm not sharing the link to, cause I have a toooon in flux :sweat_smile: ).

but anyway, just tracking the error here for discussion. if I come to a resolution, I'll post about it.

What's interesting about this error is that it's a runtime error. The build succeeded.

Using embroider:

Uncaught (in promise) Error: Decorating class property failed. Please ensure that proposal-class-properties is enabled and runs after the decorators transform.
    _initializerWarningHelper chunk.a5b0aa63f7c9da1d786b.js:44777
    _class chunk.a5b0aa63f7c9da1d786b.js:40318
    PageTitle chunk.a5b0aa63f7c9da1d786b.js:40325
    Ember 4
    getHelper manager.js:863
    <anonymous> runtime.js:2042
    evaluate runtime.js:1284
    evaluateSyscall runtime.js:5064
    evaluateInner runtime.js:5020

image

NullVoxPopuli commented 2 years ago

More info -- I was able to delete addon invocations until I could work with my own code, got this: (I also turned on sourcemaps): image

the compiled output though is this:

let DemoSelect = (_class = class DemoSelect extends _glimmer_component__WEBPACK_IMPORTED_MODULE_4__["default"] {
  editor = (0,_home_nullvoxpopuli_Development_NullVoxPopuli_limber_node_modules_babel_runtime_helpers_esm_initializerWarningHelper_js__WEBPACK_IMPORTED_MODULE_1__["default"])(_descriptor, this);
  demos = _snippets__WEBPACK_IMPORTED_MODULE_8__.NAMES;

  async select(demoName) {
    let demo = await (0,_snippets__WEBPACK_IMPORTED_MODULE_8__.getFromLabel)(demoName);
    this.editor.updateDemo(demo);
  }

}, (_descriptor = (0,_home_nullvoxpopuli_Development_NullVoxPopuli_limber_node_modules_babel_runtime_helpers_esm_applyDecoratedDescriptor_js__WEBPACK_IMPORTED_MODULE_0__["default"])(_class.prototype, "editor", [_externals_ember_service__WEBPACK_IMPORTED_MODULE_6__.inject], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: null
}), (0,_home_nullvoxpopuli_Development_NullVoxPopuli_limber_node_modules_babel_runtime_helpers_esm_applyDecoratedDescriptor_js__WEBPACK_IMPORTED_MODULE_0__["default"])(_class.prototype, "select", [_externals_ember_object__WEBPACK_IMPORTED_MODULE_5__.action, _ember_test_waiters__WEBPACK_IMPORTED_MODULE_7__.waitFor], Object.getOwnPropertyDescriptor(_class.prototype, "select"), _class.prototype)), _class);

(0,_externals_ember_component__WEBPACK_IMPORTED_MODULE_2__.setComponentTemplate)(_demo_select_hbs__WEBPACK_IMPORTED_MODULE_3__["default"], DemoSelect);

/***/ }),
NullVoxPopuli commented 2 years ago

what's interesting to me here is that the seems to be applied after the class.

initializeWarningHelper is def a part of that first assignment at the top of the class

NullVoxPopuli commented 2 years ago

Seems to be that

       cliBabelInstance.isPluginRequired(
         "proposal-class-properties"
       ),

is returning false for my environment -- which is correct, but, why are the decorators flaking out? :thinking: setting to false can get me passed the error, but it I need to figure out why the decorators plugin thinks class properties also need transpilation

NullVoxPopuli commented 2 years ago

embroider is using @babel/preset-env and is correctly using my targets (last 1 chrome, last 1 firefox).

So maybe the decorators plugin is losing track of my targets, perhaps?

bendemboski commented 2 years ago

FWIW, the same thing is happening in fractal-page-object

chriskrycho commented 2 years ago

This is exposed by #420, and in fact reflects what the original code that #420 tweaked was designed to address. It should be handled by @babel/preset-env and, transitively, caniuse-lite, so you might start by making sure those are up to date, including any transitive dependencies. I updated ember-cli-babel's direct dependencies on those, but if you have older ones, that may be the issue.

NullVoxPopuli commented 2 years ago

I just tried pinning to the latest versions of @babel/preset-env and caniuse-lite (via resolutions in a yarn monorepo), but the issue remains. I think there is maybe some other nuance I'm missing -- will check ember-cli-babel's direct dependencies next -- though, I've tried deleting my lockfile a time or two

chriskrycho commented 2 years ago

See #426 – will be updating status there. @NullVoxPopuli do you mind closing this in favor of #423 so we can centralize discussion there? Thanks.

NullVoxPopuli commented 2 years ago

I am having a hard time reproducing this issue tho. :thinking: super weird. I have a reproduction script tho: https://github.com/babel/ember-cli-babel/issues/422#issuecomment-996011788

NullVoxPopuli commented 2 years ago

this in favor of #423 so we can centralize discussion there? Thanks.

you bet! :tada:

NullVoxPopuli commented 2 years ago

I have a reproduction now -- posted here, in a less busy, still open issue: https://github.com/babel/ember-cli-babel/issues/447#issuecomment-1242747032

I also found that some files (post-minification) can be up to 70% smaller when class properties are not transpiled / polyfilled away... so.. I'm very eager to figure this out :upside_down_face: