Ember Cli - Transpiling vendor ES6 dependency in ember-cli-build?

Question

I'm writing an Ember.js application using Ember Cli, and I want to include a non-bower dependency - basically a dependency from my vendor folder.

The instructions on doing so is telling me to add the following line into my ember-cli-build.js file:

app.import('vendor/dependency-to-include.js');

That would work fine with a normal ES5 flavored dependency, but what if I want to add a dependency written in ES6?

Right now it just delivers it to the browser untouched, which produces an error like:

Uncaught SyntaxError: Unexpected reserved word

because my ES6 flavored dependency uses the following syntax:

import Util from './util

I'm guessing that I need to tell ember-cli-build to transpile this particular dependency before passing it on to the browser, but how do I go about doing that?

Thanks

Answer 1

For transpiling imported dependencies you need to run the imported file(s) through the broccoli addon broccoli-babel-transpiler . For a basic example, checkout this file: https://github.com/thefrontside/ember-impagination/blob/2fa38d26ef1b27a3db7df109faa872db243e5e4c/index.js . You can adapt this addon to an in-repo addon for your project. See this link for the background discussion and @rwjblue and @cowboyd on the actual fix: https://github.com/ember-cli/ember-cli/issues/2949

Answer 2

Are you currently including Babel within your project? I would have thought that it checks your vendor directory the same as it does everything else and converts the ES6 code to ES5.

The other option would be to just convert the file to ES5 manually whenever you need to include a vendor file with ES6 syntax. Not necessarily ideal, but if it's a static file then it's something you'll need to do once and then forget about.