Moment.js and 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


#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.


#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 (http://emberjs.com/api/data/classes/DS.Transform.html).

`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”?


#12

Depends on which version of Ember CLI you’re using, it changed recently.


#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.