Babel not auto-configured when used in an addon

[buschtoens]

I just tried to use ember-decorators in an addon and was happy to see that rwjblue@9328992 removed the setup section from the README, including the setup for usage in addons.

However, I still had to include the init patch in my addon's index.js. Was that piece of the README removed by accident or should this work without manually adding the plugins in index.js?

[rwjblue]

It should work properly in addons also, can you whip up a demo repo so we can all try to poke at it.

[buschtoens]

Yeppa 🙂

https://github.com/buschtoens/ember-light-table-cell-type-multi-value/tree/ember-decorators-auto-config

Edit: I pushed an ember-decorators-auto-config branch for your convenience. 😉

[pzuraq]

ok, so it looks like the issue here is that Ember-CLI considers dependencies in an addon to actually be addon dependencies, and devDependencies to be the Dummy app's dependencies. By putting ember-decorators in devDeps, it included the addon for the Dummy app (with the dummy app as the parent) and so it only added the plugins to your Dummy app's transpiled code, not the actual addon code. Including it in dependencies applies it to both.

Not sure if this behavior is documented in Ember-CLI but we should definitely document it in our README.

[kellyselden]

@pzuraq Very relevant tomdale/ember-cli-addon-tests#106 (comment)

[buschtoens]

Oh gosh. What a rookie mistake. 🤦‍♂️
Thank you, guys!

Adding the -S option should fix it: ember install -S ember-decorators

I don't think that's a problem exclusive to ember-decorators, but I am happy to submit a PR adding a note to the installation instructions regarding add-ons.

[pzuraq]

Yeah, that'd be awesome 👌

[allthesignals]

I think I'm having a similar issue. I don't understand the proper way to install this dependency for an addon. Everything I try lands with:

Build Error (Babel)

ember-labs-maps/components/labs-layers-tooltip.js: Unexpected token (10:2)

   8 |
   9 | export default class LabsLayersTooltipComponent extends Component {
> 10 |   @computed('top', 'left', 'offset')
     |   ^

What are the correct steps for installing this in an addon?

[pzuraq]

If you run ember install ember-decorators it should also install @ember-decorators/babel-transforms at the latest version. Can you confirm that the babel transforms addon has been added to your package.json?

[allthesignals]

Thanks, @pzuraq - yes, this is a snippet of my package.json:

  "dependencies": {
    "ember-cli-babel": "^6.6.0",
    "ember-decorators": "2.0.0"
  },
  "devDependencies": {
    "@ember-decorators/babel-transforms": "^2.0.0",
    "babel-eslint": "8.2.3",
    //...

[pzuraq]

ah, if this is an addon you'll have to include it in dependencies. We should definitely document this, and possibly update the blueprint to install it in the correct place.

[allthesignals]

Happy to PR something, here's where I successfully landed:

  "dependencies": {
    "ember-cli-babel": "^6.6.0",
    "ember-decorators": "2.0.0",
    "@ember-decorators/babel-transforms": "^2.0.0",
    "babel-eslint": "8.2.3",
    "ember-cli-htmlbars": "^2.0.1",
    "ember-cli-htmlbars-inline-precompile": "^1.0.0"
  },
  "devDependencies": {
   //...

[pzuraq]

I don't think babel-eslint should be necessary since apps that include your addon will not be linting your files (but they will be building them, hence needing the transforms)

[luketheobscure]

Same problem when developing a lazily-loaded in-repo ember engine. The solution seems to be to make sure @ember-decorators/babel-transforms and ember-decorators are in the dependencies block of the host.

[jalligator]

wow, I spent my whole afternoon chasing this down. I'm happy to update the documentation if someone wants to point me in the direction of how to do that. This really needs to be documented.

[pzuraq]

@jalligator I think a "Usage in Addons" page would be great to add, and perfect for this.