Moment.js and ember-cli

Ember CLI
1

Hi

I am trying to get moment.js working with ember-cli. It give my the following errors when i start the server. Anyone help me please ?

i have this in my bower.json

{
  "name": "example",
  "dependencies": {
    "handlebars": "~1.3.0",
    "jquery": "^1.11.1",
    "qunit": "~1.12.0",
    "ember-qunit": "~0.1.5",
    "ember": "1.5.1",
    "ember-data": "1.0.0-beta.8",
    "ember-resolver": "~0.1.1",
    "ic-ajax": "~1.x",
    "loader": "stefanpenner/loader.js#1.0.0",
    "ember-cli-shims": "stefanpenner/ember-cli-shims#0.0.2",
    "ember-load-initializers": "stefanpenner/ember-load-initializers#0.0.2",
    "ember-qunit-notifications": "^0.0.1",
    "ember-cli-test-loader": "rjackson/ember-cli-test-loader#0.0.2",
    "pretender": "trek/pretender#0.0.6",
    "bootstrap": "~3.1.1",
    "moment": "~2.7.0"
  }
}

and in my Brokfile.js

var EmberApp = require(ā€˜ember-cli/lib/broccoli/ember-appā€™);

var app = new EmberApp({ name: require(ā€˜./package.jsonā€™).name,

// for some large projects, you may want to uncomment this (for now) es3Safe: true,

minifyCSS: { enabled: true, options: {} },

getEnvJSON: require(ā€˜./config/environmentā€™) });

app.import({ development: ā€˜vendor/ember-data/ember-data.jsā€™,
production: ā€˜vendor/ember-data/ember-data.prod.jsā€™ }, {
ā€˜ember-dataā€™: [ ā€˜defaultā€™ ] });

app.import(ā€˜vendor/ic-ajax/dist/named-amd/main.jsā€™, { ā€˜ic-ajaxā€™: [ ā€˜defaultā€™, ā€˜defineFixtureā€™, ā€˜lookupFixtureā€™, ā€˜rawā€™, ā€˜requestā€™, ] });

app.import({development:ā€˜vendor/route-recognizer/dist/route-recognizer.jsā€™}); app.import({development:ā€˜vendor/FakeXMLHttpRequest/fake_xml_http_request.jsā€™}); app.import({development:ā€˜vendor/pretender/pretender.jsā€™});

app.import(ā€˜vendor/momentjs/moment.jsā€™);

app.import(ā€˜vendor/bootstrap/dist/js/bootstrap.jsā€™); app.import(ā€˜vendor/bootstrap/dist/css/bootstrap.cssā€™);

module.exports = app.toTree();

In ember-cli version 33 i get this error when i try and do ember server :

    watch ENOENT
Error: watch ENOENT
  at errnoException (fs.js:1019:11)
  at FSWatcher.start (fs.js:1051:11)
  at Object.fs.watch (fs.js:1076:11)
  at Watcher.watchdir (/Users/rmoss/Desktop/ABB/ember-apps/node_modules/ember-cli/node_modules/broccoli-sane-watcher/node_modules/sane/index.js:184:20)
  at new Watcher (/Users/rmoss/Desktop/ABB/ember-apps/node_modules/ember-cli/node_modules/broccoli-sane-watcher/node_modules/sane/index.js:63:10)
  at sane (/Users/rmoss/Desktop/ABB/ember-apps/node_modules/ember-cli/node_modules/broccoli-sane-watcher/node_modules/sane/index.js:21:10)
  at EventEmitter.Watcher_addWatchDir [as addWatchDir] (/Users/rmoss/Desktop/ABB/ember-apps/node_modules/ember-cli/node_modules/broccoli-sane-watcher/index.js:59:17)
  at /Users/rmoss/Desktop/ABB/ember-apps/node_modules/ember-cli/node_modules/broccoli/lib/builder.js:66:35
  at tryCatch (/Users/rmoss/Desktop/ABB/ember-apps/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/-internal.js:163:16)
  at invokeCallback (/Users/rmoss/Desktop/ABB/ember-apps/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/-internal.js:172:17)
  at /Users/rmoss/Desktop/ABB/ember-apps/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:186:17
  at flush (/Users/rmoss/Desktop/ABB/ember-apps/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/asap.js:51:9)
  at process._tickCallback (node.js:415:13)

and on ember-cli version 34 i get :

ā€¦ Uhoh. Got error listen EADDRINUSE ā€¦ Error: listen EADDRINUSE at errnoException (net.js:904:11) at Server._listen2 (net.js:1042:14) at listen (net.js:1064:10) at Server.listen (net.js:1138:5) at Server.listen (/home/rmoss_uk/Desktop/ABB/ember-apps/schedmanui/node_modules/ember-cli/node_modules/tiny-lr/lib/server.js:138:15) at resolver (/home/rmoss_uk/Desktop/ABB/ember-apps/schedmanui/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/node.js:183:26) at initializePromise (/home/rmoss_uk/Desktop/ABB/ember-apps/schedmanui/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/-internal.js:202:9) at new Promise (/home/rmoss_uk/Desktop/ABB/ember-apps/schedmanui/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:149:9) at /home/rmoss_uk/Desktop/ABB/ember-apps/schedmanui/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/node.js:152:20 at tryCatch (/home/rmoss_uk/Desktop/ABB/ember-apps/schedmanui/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/-internal.js:163:16) at invokeCallback (/home/rmoss_uk/Desktop/ABB/ember-apps/schedmanui/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/-internal.js:172:17) at /home/rmoss_uk/Desktop/ABB/ember-apps/schedmanui/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:186:17 at flush (/home/rmoss_uk/Desktop/ABB/ember-apps/schedmanui/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/asap.js:51:9) at process._tickCallback (node.js:415:13)

events.js:72 throw er; // Unhandled ā€˜errorā€™ event ^ Error: listen EADDRINUSE at errnoException (net.js:904:11) at Server._listen2 (net.js:1042:14) at listen (net.js:1064:10) at net.js:1146:9 at dns.js:72:18 at process._tickCallback (node.js:415:13)

thanks a lot

2

I think you want app.import(ā€˜vendor/moment/moment.jsā€™)

3

hi Nick

yes thanks i had just seen that mistake!! thanks

I still couldnt get it to work without doing this in the brocfile :

app.import({development:ā€˜vendor/moment/moment.jsā€™}, { ā€˜momentā€™: [ ā€˜defaultā€™ ] });

With this i can now start the server but can not seem to get access to moment from my component.

i have added this to the top of my component file:

import moment from 'moment'

and then trying to access in component via :

moment()

Can you help with this please ?

thanks a lot

4

A couple of quick notes:

  1. The ember-cli team is planning on releasing the official AMD import module any day now. So it may just be worth waiting it out 2 - 3 more days. https://github.com/stefanpenner/ember-cli/pull/803#issuecomment-45904816

  2. Iā€™m successfully using moment.js as a legacy global (non-AMD) with ember-cli, and I outlined the exact procedure I used to set it up at https://github.com/josh-padnick/ember-cli/blob/gh-pages/_posts/2013-04-08-managing-dependencies.md. So, you could set it up as non-AMD for now and convert over once official AMD support comes out.

Also, as you can see in the Pull Request thread, the core team members intend to write a more detailed guide once they release it.

HTH,

Josh

1 Like
5

thanks a lot for the help

6

Here are the steps I take to add moment.js to ember-cli

From the command line install moment.js to your project with bower

bower install moment --save

edit Brocfile.js adding

...
app.import('vendor/moment/moment.js');
...

Moment will be added as a global variable with a global namespace. For this to work with jshint you must update the file .jshintrc.

...  
"predef": {
  "document": true,
  "window": true,
  "WowENV": true,
  "moment": true
},
...

Now you have moment() available in your controllers. No need to import moment elsewhere within the ember app.

I discovered the .jshintrc part at ember cliā€™s website under Using Modules & the Resolver / Using global variables or external scripts. Read there about testing.

2 Likes
7

Hi @jamieb

This works well thanks. I just had an issue when trying to call save() on my records with LSadapter. I get an error that says it cannot find Transform ā€˜momentā€™.

Any ideas how to fix this?

Jonas

8

Hi @wieseljonas, I had a bit of fun with this not so long ago.

Youā€™re trying to save a ā€˜momentā€™ object to your local storage and ember-data doesnā€™t know how to serialize that as JSON. You need to add a transform class for moment objects (Transform - 4.6 - Ember API Documentation).

`import DS from 'ember-data'`

MomentTransform = DS.Transform.extend
  deserialize: (serialized)->
    return moment(serialized, "YYYYMMDD");
  serialize: (deserialized)->
    return deserialized.format("YYYYMMDD");

`export default MomentTransform`

That might work. Although if you care about times youā€™ll obviously need to mess with the serialization format to get it to work.

9

P.S.

app.import({development:'vendor/route-recognizer/dist/route-recognizer.js'}); app.import({development:'vendor/FakeXMLHttpRequest/fake_xml_http_request.js'}); app.import({development:'vendor/pretender/pretender.js'});

is not doing what you think it is. To import assets in dev environment only, do

if (app.env === 'development') {
  app.import('vendor/route-recognizer/dist/route-recognizer.js');
  ...
}
10

Or just use:

npm install --save-dev ember-cli-pretender

Which does this for you. :wink:

11

I think the folder is called ā€œbower_componentsā€ not ā€œvendorā€?

2 Likes
12

Depends on which version of Ember CLI youā€™re using, it changed recently.

1 Like
13

I found a way to find a path for Brokfile. I installed Sugar.js via Bower and tried to google documentation for proper path, because ā€˜vendor/sugar/sugar.jsā€™ didnā€™t work.

Finally, I guessed that I can use command-line ā€˜findā€™ tool to search:

find tmp/ -name "*sugar*"

Then I searched for moment.js, compared path, and included into Brokfile this:

app.import('bower_components/sugar/release/sugar.min.js');

It works!

For moment.js I just used npm install --save-dev ember-cli-moment and updated .jshintrc with moment: true:

"predef": {
  "moment": true
}
14

You can also give ember-config generator a try. I just integrated auto installation of sugar.js

15

I am having similar issues. I have posted a stackoverflow question about it if anyone cares to chime in. It is driving me bonkersā€¦ :confused: I have done everything the docs say to do. But Iā€™m starting to wonder if it is a bug in version 0.0.46 of Ember CLI. I was able to get this to work in 0.0.44 just fine.

16

Found the problem. There were some old files sitting inside the public/assets folder (vendor.js vendor.css appname.js appname.css) that were causing unknown conflicts. Deleted those and bam, it works.