The Broccoli Plugin: [broccoli-persistent-filter:Babel] failed about ember-decorators

[rwjblue]

If you are using ember-cli < 2.13, you have to use:

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    babel6: {
      plugins: ['transform-decorators-legacy']
    }
  });

  return app.toTree();
};

But for [email protected]+ you can just do:

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    babel: {
      plugins: ['transform-decorators-legacy']
    }
  });

  return app.toTree();
};

[rwjblue]

@thec0keman - FWIW, I wouldn't do that manually more than once or twice 😝.

I'd probably make a lib/setup-decorators.js that has:

module.exports = function(addon) {
    addon.options = addon.options || {};
    addon.options.babel = addon.options.babel || {};
    addon.options.babel.plugins = addon.options.babel.plugins || [];

    if (addon.options.babel.plugins.indexOf('transform-decorators-legacy') === -1) {
      addon.options.babel.plugins.push('transform-decorators-legacy');
    }
};

Then in each of your in-repo-engines I'd do:

var setupDecorators = require('../setup-decorators');

module.exports = {
  init() {
    this._super.init && this._super.init.apply(this, arguments);
    setupDecorators(this);
  }
};

Or something like that...

[rwjblue]

We need to update the documentation here to show folks how to use it with ember-cli-babel@6:

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    babel: {
      plugins: ['transform-decorators-legacy']
    }
  });

  return app.toTree();
};

Would you happen to have time for that?

[GCorbel]

I don't understand why because I followed the steps you gave but I have this error message :

File: ember-mocha.js
The Broccoli Plugin: [broccoli-persistent-filter:Babel] failed with:
TypeError: The plugin "transform-decorators-legacy" didn't export a Plugin instance

I removed all my in repo-addons just to be sure. I have this babel files in my package.json :

cat package.json | grep babel
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "ember-cli-babel": "^6.0.0",

My ember-cli-build is a copy/paste of the @rwjblue one.

What's the error ?

[rwjblue]

@benbabics double check my comment in #90 (comment). Unless you transposed when typing in here, you should be using options.babel.plugins but your snippet looked like you had options.babel.optional

[GCorbel]

@benbabics this is normal. It's just an eslint warning. Try to do yarn add babel-eslint and add parser: 'babel-eslint' in your .eslintrc.js . Your project should work anyway.

[GCorbel]

I close this issue because this is not related to ember-computed-decorators.

[kellyselden]

I changed my code to the new style, and the error changed to:

The Broccoli Plugin: [broccoli-persistent-filter:Babel] failed with:
ReferenceError: Unknown plugin "transform-decorators-legacy" specified in "base" at 0, attempted to resolve relative to "package-hint-historic-resolver/adapters"
    at C:\code\package-hint-historic-resolver\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17

[rwjblue]

@kellyselden - Did you install the plugin? In babel 6 all of the plugins are separate packages, so you would have to yarn add --dev babel-plugin-transform-decorators-legacy (or npm equivalent) first.

[kellyselden]

After doing that, new message is:

The Broccoli Plugin: [broccoli-persistent-filter:Babel] failed with:
TypeError: The plugin "transform-decorators-legacy" didn't export a Plugin instance
    at PluginManager.validate (C:\Users\kelly\AppData\Roaming\npm\node_modules\ember-cli\node_modules\babel-core\lib\transformation\file\plugin-manager.js:164:13)

[rwjblue]

Can you do npm ls babel-core? Are you using [email protected] or an older version?

[kellyselden]

That did it. I had yet to merge in [email protected]. The strange thing is it was working on Travis without any changes. Only local dev was failing. I don't think it's Windows related because the poster is Unix.

[GCorbel]

I changed for transform-decorators-legacy and installed babel-plugin-transform-decorators-legacy but there is no change.

[GCorbel]

Do you have any update? I still have the error.

[thec0keman]

Is someone else working on updating the documentation? Otherwise I can take a stab at it tomorrow.

[GCorbel]

@thec0keman did you found the solution ?

[thec0keman]

We aren't 100% of the way there yet. All of our addons are on babel 6 with little effort.

For the main app, things are a bit more complicated by in-repo addons and engines. So far this has meant:

• making sure each in-repo addon has "ember-computed-decorators": "*" in its package.json
• making sure each in-repo addon correctly updates this code in index.js:

  init: function(app) {
    this._super.init && this._super.init.apply(this, arguments);

    this.options = this.options || {};
    this.options.babel = this.options.babel || {};
    this.options.babel.plugins = this.options.babel.plugins || [];

    if (this.options.babel.plugins.indexOf('transform-decorators-legacy') === -1) {
      this.options.babel.plugins.push('transform-decorators-legacy');
    }
  }

I think the second one was the biggest troll. It looks like if you try to add the pre-babel 6 setup code from any addon, ember-cli gets very confused.

[benbabics]

This thread makes me feel dumb. Do I need to execute the script above that @rwjblue is talking about?

As stated above by @GCorbel I too am getting Unexpected token because of a decorator (I did not have this issue for a separate app running [email protected], ember-cli-babel@^5.1.6.

I have a brand new ember app using [email protected].
In ember-cli-build.js I have the following:

var app = new EmberApp(defaults, {
  babel: {
    optional: ['transform-decorators-legacy']
  }
});

I have installed the babel plugin: yarn add --dev babel-plugin-transform-decorators-legacy, and when I run npm ls babel-core, I get the following:

npm ls babel-core
[email protected] /somepath/client
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected]
│       └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected]
│       └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └─┬ [email protected]
│ │     └── [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └─┬ [email protected]
│   │   └── [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected]
│       └─┬ [email protected]
│         └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └─┬ [email protected]
│ │     └── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └─┬ [email protected]
│   │   └── [email protected]
│   ├─┬ [email protected]
│   │ └─┬ [email protected]
│   │   └─┬ [email protected]
│   │     └── [email protected]
│   ├─┬ [email protected]
│   │ └─┬ [email protected]
│   │   └─┬ [email protected]
│   │     └── [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected]
│       └─┬ [email protected]
│         └── [email protected]
└─┬ [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected]

Any insights on how to get this running would be greatly appreciated. :)

[GCorbel]

Hi,

I reproduced the bug here : https://github.com/GCorbel/decorator_bug

This is related to addons. It works with a brand new project but it fails when I add all addons I have for my project. I continue to clarify the situation.

[GCorbel]

It seems than ember-cli-mocha "0.13.2" create an error. Upgrade solve the problem but I have the same with a few other addons.

[benbabics]

Doh! That's exactly what I did wrong, @rwjblue. With that the build is successful again, however it does complain:

$ ember s
Livereload server on http://localhost:49153

/somepath/app/pods/components/signup-form/component.js
  31:3  error  Parsing error: Unexpected character '@'
✖ 1 problem (1 error, 0 warnings)

Build successful (7679ms) – Serving on http://localhost:4200/

Any thoughts?

[benbabics]

👍🏻

[GCorbel]

@benbabics can you try to add ember-cli-mocha 0.13.2 just to confirm you have the same behavior than me? Thanks.

[GCorbel]

With a little more investigation, I saw this commit solved the issue. @rwjblue you did it. (Thanks for your amazing contribution to the Ember community).

I found the solution for other packages. Many of them depends of ember-cli-babel "^5.0" so it takes parameters we send in our ember-cli-build file and pass it in the old version. It fails because options are not compatible.

I tried to force to use the version 6 of ember-cli-babel by changing the yarn.lock file. It works but there is some problems with addons that use some es6 synthaxes.

I think we have to solutions : force all addons to update and don't be backward compatible or find a way to accept babel 5 options.

@kellyselden and @rwjblue what you think ?

[rwjblue]

@GCorbel - I don't fully understand what you mean. Each "layer" (app and addon) can determine how it is transpiled. Prior to releasing ember-cli-babel@6 as the default in [email protected] we tested apps and addons with various combinations of ember-cli-babel@5 and ember-cli-babel@6 and confirmed that each "layer" can function just fine using their own specific versions (as long as all plugins needed/added by the "layer" are also using the same).

[GCorbel]

I understand but option from ember-cli-build aren't passed in "layers" ? It fails with options I gave in this file with addons that depends of ember-cli-babel 5. I think it will search transform-decorators-legacy but it doesn't seems to find it. By forcing all addons to use babel 6, it works.

I may be wrong I'm not sure to understand all too.

[rwjblue]

As I mentioned above, in general, addons have always controlled their own transpilation. If a given addon is reading the host apps configuration and "doing something" with it to affect its own transpilation, then it will need to be updated to deal with ember-cli-babel@5 vs ember-cli-babel@6. Most addons do not do this, and therefore are not affected.

I think this will be much more productive if we could talk concretely about specific combos of addons, so I can make sure that I understand what is going on for you and how we can address. Can you provide a demo app that reproduces the issues you are facing?

[GCorbel]

You're right. I will give you an example very soon.

[GCorbel]

I did this repo when you can reproduce the bug. You can just to yarn && ember build to have the bug. It do this for a lot of addons.

[GCorbel]

I did this branch with a working version where I force version of ember-cli-babel as you can see in this commit.

I have no idea what it do that. @rwjblue let me know if I can help more.

[GCorbel]

I finally found the reason and it was stupid thing. This is because I added a .babelrc file before I found the the with ember-mocha and I forgot it after. I removed this file and it works again.

Sorry for the time wasted and thank you.