EDIT: this is actually about any npm package which is not designed to play along with ember. In my case, I tried to make crypto-js work, but it seems to be always the same trouble with any npm package not specially designed for ember cli.
I want to use cryptoJS in my ember app, which I'm currently refactoring with ember cli, but I'm having a lot of trouble importing all the third party packages and libraries I'm already using, like for example cryptoJS.
CryptoJS at least has a package for npm, I don't even want to think about what happens if some of my included libraries don't have a package...
Am I just missing the point in the documentation of ember-cli or is it really not described how to import other npm packages and also how to inlcude non-package libraries properly to keep them under version control and dependency control?
If I follow the description of the crypto-js package manual:
var CryptoJS = require("crypto-js"); console.log(CryptoJS.HmacSHA1("Message", "Key"));
I get and error in my ember build
utils/customauthorizer.js: line 1, col 16, 'require' is not defined.
Thanks for any help on this, I'm very excited about the ember cli project, but importing my existing ember app has been quite painful so far...
EDIT:
Just importing unfortunately does not work.
import CryptoJS from 'crypto-js';
throws during the build
daily@dev1:~/VMD$ ember build version: 0.1.2 Build failed. File: vmd/utils/customauthorizer.js ENOENT, no such file or directory '/home/daily/VMD/tmp/tree_merger-tmp_dest_dir-F7mfDQyP.tmp/crypto-js.js' Error: ENOENT, no such file or directory '/home/daily/VMD/tmp/tree_merger-tmp_dest_dir-F7mfDQyP.tmp/crypto-js.js' at Error (native) at Object.fs.statSync (fs.js:721:18) at addModule (/home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:84:46) at addModule (/home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:133:9) at addModule (/home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:133:9) at /home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:59:7 at $$$internal$$tryCatch (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:470:16) at $$$internal$$invokeCallback (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:482:17) at $$$internal$$publish (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:453:11) at $$rsvp$asap$$flush (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1531:9)
Ember CLI, Ember's command line interface, provides a standard project structure, a set of development tools, and an addon system. This allows Ember developers to focus on building apps rather than building the support structures that make them run.
Ember Data is also designed to work with streaming servers, like those powered by WebSockets. You can open a socket to your server and push changes into Ember Data whenever they occur, giving your app a real-time user interface that is always up-to-date.
The easiest and recommended answer is to use ember-browserify
. (as support for bower packages will be removed in the future.)
This is an example for using the npm package dexie
within an Ember CLI app.
Install browserify: npm install ember-browserify --save-dev
Install dexie (or whatever module you need): npm install dexie --save-dev
Import the module like this: import Dexie from 'npm:dexie';
UPDATE (April 2021):
ember-browserify has now been is deprecated in favor of either ember-auto-import or ember-cli-cjs-transform
(see the deprecation warning at the top of ember-browserify)
UPDATE: I got this to work much better and straight forward! Thanks to the comment of @j_mcnally!
Will leave the first answer down there so everyone can see what trouble I was coming from :)
What I did:
bower install crypto-js=svn+http://crypto-js.googlecode.com/svn/#~3.1.2 --save
In my file Brocfile.js
I could just do app.import('bower_components/crypto-js/build/rollups/hmac-md5.js');
No manual downloading or moving files, just managing a dependency, much better solution!
But honestly, it was still a lot of vodoo! Until I found the documentation... sweet: http://bower.io/docs/api/#install
OLD approach
I got this to work, but I can not tell how pretty or correct that approach is. Including third party packages or libraries with ember cli is pretty far away from straight forward or self explaining.
The ressources which led me to my working solution were:
The following steps I took to get it working:
mkdir vendor/crypto-js
app.import('vendor/crypto-js/hmac-md5.js');
to the Brocfile.js
file"CryptoJS"
to the "predef"
key in the .jshintrc
fileThen the build worked and I could eventually use the library.
Sadly I didn't get the npm package to work! I had to manually download the zip file, unzip it and move it to the correct location and if the version changes, it's not under any version/dependency control... I will not mark this as an answer, since it does not satisfy me at all, but at least I wanted to share what I did to make it work for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With