ember-typescript-cli v2

[XuluWarrior]

I am having difficulty getting ember-decorators to work with ember-cli-typescript v2.

Originally, I was running [email protected] and [email protected] using experimentalDecorators and all was working.

I made sure to update ember-cli-babel to 7.7.3 and @babel/core, etc to 7.4.3, and then installed [email protected]. At which point I not been able to get decorators working again.

Initially I got this compile error

 - broccoliBuilderErrorStack: TypeError: Property value expected type of string but got null
    at Object.validate (/Users/a/WebstormProjects/mercury-orig/node_modules/@babel/types/lib/definitions/utils.js:161:13)
    at validate (/Users/a/WebstormProjects/mercury-orig/node_modules/@babel/types/lib/validators/validate.js:17:9)
    at builder (/Users/a/WebstormProjects/mercury-orig/node_modules/@babel/types/lib/builders/builder.js:46:27)
    at Object.StringLiteral (/Users/a/WebstormProjects/mercury-orig/node_modules/@babel/types/lib/builders/generated/index.js:335:31)
    at PluginPass.AssignmentExpression (/Users/a/WebstormProjects/mercury-orig/node_modules/@babel/plugin-proposal-decorators/lib/transformer-legacy.js:167:167)
    at newFn (/Users/a/WebstormProjects/mercury-orig/node_modules/@babel/traverse/lib/visitors.js:193:21)

If I remove all the decorators from a given file then this error disappears for that file.

I then tried install @ember-decorators/babel-transforms and the project compiles but when I run my tests I get errors like this

TypeError: An element descriptor's .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "undefined"
    at Object.toElementDescriptor (http://localhost:4200/assets/vendor.js:149477:17)
    at Object.toElementFinisherExtras (http://localhost:4200/assets/vendor.js:149508:28)
    at Object.decorateElement (http://localhost:4200/assets/vendor.js:149395:44)
    at Object.<anonymous> (http://localhost:4200/assets/vendor.js:149360:45)
    at Array.forEach (<anonymous>)
    at Object.decorateClass (http://localhost:4200/assets/vendor.js:149358:18)
    at _decorate (http://localhost:4200/assets/vendor.js:149298:25)
    at Module.callback (http://localhost:4200/assets/mercury.js:11741:49)
    at Module.exports (http://localhost:4200/assets/vendor.js:111:32)
    at requireModule (http://localhost:4200/assets/vendor.js:32:18)

I've tried disabling experimentalDecorators and get

error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

I wondered if I would have any more success with [email protected] but (without installing @ember-decorators/babel-transforms I get the Property value expected type of string but got null error.

Is there some combination of modules and compile flags that I should be using to get this to work.

[XuluWarrior]

One thing I have noticed is that a number of our ember add-on dependencies using ember-cli-babel@^6. So while the top level installed version of ember-cli-babel is 7.7.3, some add-ons have a private dependency on 6.18.0.

Could this be a factor in my issue?

[simonihmig]

Seeing the same, after upgrading e-d from 5.x to 6.0 (and going back to stage 1 decorators). Seems to be related to having a quoted property, at least for me...

This fails the build with that TypeError: Property value expected type of string but got null error:

  @attribute
  'data-test-foo' = true;

While this works:

  @attribute
  dataTestFoo = true;

[XuluWarrior]

@simonihmig That was very helpful I found that our code also has quoted properties.

A quick hack to transformer-legacy.js "fixes" this. But I don't know enough Babel to know what a real fix would be.

    path.replaceWith(_core().types.callExpression(state.addHelper("initializerDefineProperty"), [_core().types.cloneNode(path.get("left.object").node), _core().types.stringLiteral(path.get("left.property").node.name), _core().types.cloneNode(path.get("right.arguments")[0].node), _core().types.cloneNode(path.get("right.arguments")[1].node)]));

->

    path.replaceWith(_core().types.callExpression(state.addHelper("initializerDefineProperty"), [_core().types.cloneNode(path.get("left.object").node), _core().types.stringLiteral(path.get("left.property").node.name || path.get("left.property").node.value), _core().types.cloneNode(path.get("right.arguments")[0].node), _core().types.cloneNode(path.get("right.arguments")[1].node)]));

Unfortunately, I'm now getting runtime issues which I'm looking into now.

[buschtoens]

I would bet that usage of ember-cli-typescript is not relevant here, but that this is a bug in the legacy decorators implementation of babel.

[dfreeman]

It looks like there's an issue for this in the Babel repo, but it hasn't gotten any love yet https://github.com/babel/babel/issues/10059

[fpauser]

Note: babel/babel#10059 was fixed with babel/babel#10578 (support string literal properties)