Using .babelrc for Babel 6 plugins will interfere w/ add-ons/dependencies that use Babel 5

[bttf]

I'm trying to use a plugin (babel-plugin-transform-object-rest-spread) with the latest version of ember-cli-babel. Since it's not included as a preset in babel-preset-env, I'm forced to configure babel directly via .babelrc or package.json

According to Babel, it will search parent directories for a babelrc if it does not have one in its project dir. I am seeing this happening with some add-ons that are trying to use the plugin, which is a Babel 6 plugin, when the add-on is using babel v5.x.x, causing issues.

I was able to confirm by removing/replacing the .babelrc file

[rwjblue]

I need to update the docs for this (would love a PR to the README once you get it working). The basic gist is:

// ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    babel: {
      plugins: [
        [require('babel-plugin-transform-object-rest-spread').default, /* any options needed for it */]
      ]
    }
  });

  return app.toTree();
}

[rwjblue]

FWIW, I do not believe we are allowing usage of .babelrc yet (if we are, I need to fix that 😉 )...

[stefanpenner]

FWIW, I do not believe we are allowing usage of .babelrc yet (if we are, I need to fix that 😉 )...

Ya, as far as I know .babelrc stuff doesn't work correctly \w symlinks and npm linking and stuff, so ya... Not sure if we can ever quite support it (unless babel fixes this)

[Turbo87]

@rwjblue should it be this instead?

// ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'babel6': {
      plugins: [
        ['transform-object-rest-spread', /* any options needed for it */]
      ]
    }
  });

  return app.toTree();
}

• babel6 instead of babel
• plugin referenced by name instead of required directly

[rwjblue]

@Turbo87 - babel6 is only needed for ember-cli < 2.13 (e.g. when ember-cli itself is still sharing the host apps babel configuration for its fallback transpilation).

[simonihmig]

Hm, found this issue, but cannot get this to work. With this #134 (comment) I get:

TypeError: Cannot read property '__esModule' of undefined
    at Function.normalisePlugin (/Users/simonihmig/Projects/tlw/node_modules/babel-core/lib/transformation/file/options/option-manager.js:142:20)
    at /Users/simonihmig/Projects/tlw/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (native)
    at Function.normalisePlugins (/Users/simonihmig/Projects/tlw/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/simonihmig/Projects/tlw/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/simonihmig/Projects/tlw/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/simonihmig/Projects/tlw/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/simonihmig/Projects/tlw/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/simonihmig/Projects/tlw/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at Babel.transform (/Users/simonihmig/Projects/tlw/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/index.js:78:21)

[rwjblue]

@simonihmig - Not sure if that is actually related to what this issue was about initially? Can you make a repro and report a separate issue?

[simonihmig]

@rwjblue sorry for the confusion. In a clean fresh app, I do get the same exception with your proposed config, but I did get it to work when not requiring it directly as @Turbo87 suggested. So this config was working for me:

babel: {
  plugins: [
    ['transform-object-rest-spread']
  ]
}

It did not work in the first place in an existing app, but that was due to some other upgrade issue (ember-cli-mocha)...

So actually no issue to report, other than an example like this should maybe be mentioned in the docs as part of #127.

[lolmaus]

Doesn't work for me in an addon's dummy app.

I have this:

module.exports = function (defaults) {
  var app = new EmberAddon(defaults, {
    babel : {
      plugins : [
        'transform-object-rest-spread',
      ],
    },

This doesn't help. :( I still get "SyntaxError: Unexpected token" at an object spread.

I also tried providing an incorrect plugin name -- and I don't see any error.

Please help.

[Turbo87]

@lolmaus depending on your Ember CLI version you might have to use babel6 instead of babel

[lolmaus]

@Turbo87 I'm on Ember CLI 2.13.2. I had tried babel6, didn't help.

[lolmaus]

Resolved with this in my addon's index.js:

  treeForAddon (tree) {
    let addon = this.addons.find(addon => addon.name === 'ember-cli-babel') // find your babel addon

    return addon.transpileTree(tree, {
      babel : {
        plugins : [
          'transform-object-rest-spread',
        ],
      },
    })
  },

[lolmaus]

Wait, this messes up addon modules names. 😭 Same as this.

Come on, is it currently impossible to use rest/spread in Ember addons?

[rwjblue]

@lolmaus - Not really sure what you expect to get with that tone. The functionality you desire is present and quite simple to use.

[rwjblue]

The issue that was originally reported here has been addressed (a .babelrc file will no longer be used by ember-cli-babel).

Closing...

[telmaantunes]

thanks @rwjblue, using babel6 worked!

[alvarocastro]

To answer what @lolmaus said (since I came here for the same reason) this is how I solved it:

// index.js
init () {
	this._super.init.apply(this, arguments);

	if (!this.options.babel.plugins) {
		this.options.babel.plugins = [];
	}

	this.options.babel.plugins.push('transform-object-rest-spread');
}

[camnicklaus]

@rwjblue I'm a bit frustrated by this same issue. fwiw it just doesn't seem to be simple to use (at least not from an addon)
I'm tying to use the spread operator in an addon and am including the babel plugin and it's config in the addon.
Is the expectation that it should work when consumed by another app (w/o adding any config to the consuming app)?
please bear in mind that I'm a bit of a junior dev (working on an application that was built by much smarter folks than me) so there maybe additional config that is causing issues that I'm not understanding.