Import jquery with ember-cli - ember.js

Since ember-cli 0.0.34 jquery is removed from the .jshint file as predefined.
So jquery needs to be imported, but I get the following error when doing it:
import $ from 'jquery';
The error I get is:
ENOENT, no such file or directory 'S:\...\tmp\tree_merger-tmp_dest_dir-Nb27WzDk.tmp\jquery.js'
Error: ENOENT, no such file or directory 'S:\...\tmp\tree_merger-tmp_dest_dir-Nb27WzDk.tmp\jquery.js'
at Object.fs.statSync (fs.js:684:18)
at addModule (S:\...\node_modules\ember-cli\node_modules\broccoli-es6-concatenator\index.js:81:46)
.....

I solved the problem by not importing jquery at all. jQuery is available via Ember.$ (link)
So I changed my code to use Ember.$(...) instead of $(...)

I've ran into the same problem after I updated ember-cli to 0.0.34. Although I was still able to use $ (jQuery) in my code, JSHint kept throwing the error:
project/views/blah.js: line 6, col 9, '$' is not defined.
You can edit your .jshintrc and add $ back to predef.
{
"predef": {
// ...
"$": true,
// ...
},
// ...
}
Would definitely prefer a method using import too.
Not sure if this will be of any help, but I was able to locate the file during build by using the line below, but it caused some issues in the browser:
import $ from 'vendor/jquery/dist/jquery';

$ becomes available after rendering / instantiation, as per usual use of jQuery.
If jQuery is desired to be used otherwise is requires the Ember prefix.
Handlebars is likewise available as Ember.Handlebars, albeit the Ember extended version.

I solved the problem by adding this code to my JS file
import jQuery from 'ember';

Newer versions of Ember/Ember-CLI allow for destructuring, making importing libraries much easier.
import Ember from 'ember';
const { $, get, set } = Ember;
Would bring in jquery, getters and setters.

Make sure you've listed #ember/jquery in your dependencies within package.json of the consumed app/addon. It might look something like this:
"#ember/jquery": "^1.1.0"
Then you can continue to use jquery in the recommended way:
import $ from 'jquery';

Related

Emberjs : how to import after 'npm install'

Trying to use howler.js (https://github.com/goldfire/howler.js#documentation) in a Controller.
There is no addon for Howler but it exists as a npm package.
I did an npm install and subsequently got an update in package.json like this :
"dependencies": {
"bootswatch": "^4.0.0",
"howler": "^2.0.9",
"npm": "^5.8.0"
}
In the controller I added this import
import {Howl} from 'howler';
But when I try to execute the code I get a runtime error
Could not find module 'howler' imported from 'foo/controllers/bar'
When I do a find for *howl* this is what I find
./node_modules/howler/dist/howler.js
./node_modules/howler/dist/howler.core.min.js
./node_modules/howler/dist/howler.min.js
./node_modules/howler/dist/howler.spatial.min.js
./node_modules/howler/src/howler.core.js
./node_modules/howler/src/plugins/howler.spatial.js
Should my import have a path to these files as part of it ? If so which one ?
Would appreciate some advice about whether there's something obviously wrong in what I've done there.
Emberjs version is 3.0.
Thanks
You can import the howler.js inside your ember-cli-build.js like this
app.import('node_modules/howler/dist/howler.min.js')
Then you can use Howl as global variable inside you ember app.

Ember.HTMLBars.compile is undefined in Ember 2.7

In our application we use the template compiler at runtime by calling Ember.HTMLBars.compile with a handlebars template. Example code:
let myTemplate = `{{foo}}`;
application.register(`template:my-template`, Ember.HTMLBars.compile(myTemplate));
I've tried to upgrade from Ember 2.6 to Ember 2.7 but I get the following error in the developer console if I try to compile the template:
_ember.default.HTMLBars.compile is not a function()
In the documentation I couldn't find anything about the compile method being removed from the HTMLBars compiler.
How can I still use/enable the HTMLBars compiler at runtime in my application?
import original ember-template-compiler.js in ember-cli-build.js
app.import('bower_components/ember/ember-template-compiler.js');
I was needed to compile template during runtime
und used https://www.npmjs.com/package/ember-cli-handlebars-inline-precompile.
Try this:
import hbs from 'htmlbars-inline-precompile';
application.register(`template:my-template`, hbs`{{foo}}`);
Since there is less information provided, first try and check the error source.
presumably a library it is, you need to open your developers console [lets say chrome] and then click on the error which will direct you to where the error originates from so you can adjust or rectify the code...

How do I turn off deprecation warnings in ember.js 2.3?

I've seen this:
How to disable deprecation warnings in Ember.js?
and this:
https://coderwall.com/p/ekugbw/turn-off-ember-deprecation-warnings
and now my code looks like this:
//app.js
import Ember from 'ember';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
Ember.deprecate = () => {};
Ember.warn = function(i){};
and my environment file right now includes this:
EmberENV: {
LOG_STACKTRACE_ON_DEPRECATION: false,
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},
This has gotten me half the results I wanted: the log stacktrace is gone, but I still get the one line deprecation warnings. While I will be using these warnings to as a guideline to refactor in the future, the logging of these deprecation warnings is interfering with my debugging process. I need them gone - temporarily. The source of these deprecations are most likely the libraries I use (legacy-controller, legacy-view, auth0, etc.) but regardless, I need to silence these warnings so that they do not pollute the console.
I'm using Ember 2.3, and I suspect the solutions I found (linked in this question) are for Ember 1.13.
If you want to selectively enable deprecations for future work, I suggest using ember-cli-deprecations-workflow.
You can install it with ember install ember-cli-deprecation-workflow, and then follow the instructions on the README to populate the whitelist.
You need to stop the loggin of deprecations. Try this:
RAISE_ON_DEPRECATION = false;

How to use third party npm packages with ember cli app

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)
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:
how to use third party javascript from ember-cli route
https://github.com/stefanpenner/ember-cli/issues/757
The following steps I took to get it working:
I manually downloaded the library https://code.google.com/p/crypto-js/downloads/detail?name=CryptoJS%20v3.1.2.zip and unziped it
I manually created a directory in my vendor directory: mkdir vendor/crypto-js
I appended app.import('vendor/crypto-js/hmac-md5.js'); to the Brocfile.js file
I added "CryptoJS" to the "predef" key in the .jshintrc file
Then 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.
As Timm describes, using browserify gets the code injected into your ember app. However, I was having trouble actually using the injected module. In order to do that I had to actually create the module with New before I could use it:
In order to import an NPM module.
1) install browserify:
npm install ember-browserify --save-dev
2) install your modele:
npm install my-module --save-dev
3) Import your module into your ember file of interest (app/controller/post.js):
import Module from 'npm:my-module';
4) use the module from within your code by creating the module with New:
var output = new Module(var1, var2, etc.);
even though this is an old thread thought I would contribute as I spent a while doing this. The specific package I was trying to link to ember was 'd3plus' and had to do a variety of things to get it to work.
npm install ember-browserify --save-dev
npm install d3plus --save-dev
ember install ember-cli-coffeescript
npm install --save-dev coffeeify coffeescript
then in your component do
import d3plus from 'npm:d3plus';
For a long time I was getting runtime errors when it was searching for the coffescript and figured this would be helpful for people specifically looking for d3plus.
As stated by Pablo Morra on a comment of the simplabs' post "Using npm libraries in Ember CLI", third party npm modules can be imported on Ember.js from version 2.15 directly without the need of addons or wrappers:
https://www.emberjs.com/blog/2017/09/01/ember-2-15-released.html#toc_app-import-files-within-node_modules
Unfortunately documentation is still on work and it doesn't say that npm modules can be imported, only bower and vendor ones:
https://github.com/emberjs/guides/issues/2017
https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/
I've gotten 2 solutions to import third party npm modules directly on Ember.js from the Ember CLI documentation about managing dependencies, although it's also out-of-date and says that npm modules can't be imported, only bower and vendor ones:
npm module as Standard Anonymous AMD Asset
https://ember-cli.com/managing-dependencies#standard-anonymous-amd-asset
AMD: Asynchronous Module Definition
I prefer and use this way because it avoids global variables and follows the import convention of Ember.js.
ember-cli-build.js:
app.import('node_modules/ic-ajax/dist/amd/main.js', {
using: [
{ transformation: 'amd', as: 'ic-ajax' }
]
});
amd is the type of transformation applied, and ic-ajax is the module name to be used when it's imported on a javascript file.
on Ember.js javascript file (router, component...):
import raw from 'ic-ajax';
// ...
icAjaxRaw( /* ... */ );
raw is a module exported by ic-ajax.
That's the way it worked for me although the Ember CLI documentation shows the import other way that didn't work for me, maybe because of the specific package I was importing:
import { raw as icAjaxRaw } from 'ic-ajax';
//...
icAjaxRaw( /* ... */ );
npm module as global variable
https://ember-cli.com/managing-dependencies#standard-non-amd-asset
ember-cli-build.js:
app.import('node_modules/moment/moment.js');
on Ember.js javascript file (router, component...):
/* global moment */
// No import for moment, it's a global called `moment`
// ...
var day = moment('Dec 25, 1995');
/* global moment */ is an annotation for ESLint not to show an error when building the project because moment() is not defined in the file.
npm module as Standard Named AMD Asset
https://ember-cli.com/managing-dependencies#standard-named-amd-asset
Ember CLI also shows a third option that didn't work for me, maybe because of the specific package I was importing:
ember-cli-build.js:
app.import('node_modules/ic-ajax/dist/named-amd/main.js');
on Ember.js javascript file (router, component...):
import { raw as icAjaxRaw } from 'ic-ajax';
//...
icAjaxRaw( /* ... */ );
npm module as AMD JavaScript modules
https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/#toc_amd-javascript-modules
The way described on Ember.js documentation about Managing Dependencies didn't work for me either, maybe because of the specific package I was importing:
ember-cli-build.js:
app.import('node_modules/ic-ajax/dist/named-amd/main.js', {
exports: {
'ic-ajax': [
'default',
'defineFixture',
'lookupFixture',
'raw',
'request'
]
}
});
on Ember.js javascript file (router, component...):
import { raw as icAjaxRaw } from 'ic-ajax';
//...
icAjaxRaw( /* ... */ );

How to import named amd's and its exports in ember-cli

I'm trying to import ic-modal into an ember-cli project, but for some reason I keep getting this error:
Uncaught Error: <ic-test#view:toplevel::ember278> Handlebars error: Could not find property 'ic-modal-trigger' on object (generated application controller).
I have the following import statements:
app.import('vendor/ic-styled/main.js');
app.import('vendor/ic-modal/dist/named-amd/main.js', {
'ic-modal': [
'ModalComponent',
'ModalFormComponent',
'ModalTriggerComponent',
'ModalTitleComponent',
'modalCss'
]
});
Any help with this would be great?!
In Brocfile.js:
app.import('bower_components/ic-styled/main.js');
app.import('bower_components/ic-modal/dist/named-amd/main.js');
Replace bower_components with vendor in the above if you're still using an older version of Ember-CLI.
Then use:
import ICModal from 'ic-modal';
// Can now utilise ICModal, ICModal.ModalForm etc
The Broccoli build and ES6 module transpiler should take care of the rest.
(Side-note: when using Coffeescript, put the import statement in backticks as the standard Coffeescript compiler doesn't handle the ES6 syntax.)