Installing dygraphs with bower install fails on Ember.js

Question

Issuing a statement:

bower install dygraphs --save

And than adding reference to dygraphs:

app.import('vendor/dygraphs/src/dygraph.js')

Causes an error:

Uncaught SyntaxError: Unexpected identifier

on line:

import DygraphLayout from './dygraph-layout';

And:

Uncaught ReferenceError: define is not defined at ember-adater-file .js:1

What can be the cause of this and how to fix it?

Answer 1

You are trying to app.import an ES6 module, which is not supported.

Since Ember is discouraging the use of bower, you can try installing dygraphs through npm

npm install --save-dev dygraphs

And use ember-browserify to import it.

npm install --save-dev ember-browserify

Then in your code you can do

import Dygraph from "npm:dygraph";

And use it right away in your component.