46

I'm using JSPM, AngularJS, TypeScript, SystemJS and ES6 and my project is running pretty well... unless I try to use momentJS.

This is the error I get:

TypeError: moment is not a function

This is part of the code:

import * as moment from 'moment';

More:

var momentInstance = moment(value);

If I debug it, moment is an object not a function:

enter image description here

This is what my moment.js JSPM package looks like:

module.exports = require("npm:moment@2.11.0/moment.js");

I've read a lot and couldn't find a way to solve this... any ideas?

Some things I've read/tried:

How to use momentjs in TypeScript with SystemJS?

https://github.com/angular-ui/ui-calendar/issues/154

https://github.com/jkuri/ng2-datepicker/issues/5

Typescript module systems on momentJS behaving strangely

https://github.com/dbushell/Pikaday/issues/153

Thanks!

2
  • who did you do your injection dependency of moment in angular ?
    – AlainIb
    Feb 8, 2016 at 15:13
  • @AlainIb hi, thanks for your comment. I'm sorry, but do you mean why? If so, what would you recommend as an alternative? Thanks again.
    – eestein
    Feb 8, 2016 at 15:15

6 Answers 6

101

Simply remove the grouping (* as) from your import statement:

import moment from 'moment';

Without digging too deeply in to the source code, it looks like moment usually exports a function, that has all kinds of methods and other properties attached to it.

By using * as, you're effectively grabbing all those properties and attaching them to a new object, destroying the original function. Instead, you just want the chief export (export default in ES6, module.exports object in Node.js).

Alternatively, you could do

import moment, * as moments from 'moment';

to get the moment function as moment, and all the other properties on an object called moments. This makes a little less sense when converting ES5 exports like this to ES6 style, because moment will retain the same properties.

4
  • @eestein Cheers. Here's the MDN article on import. In my opinion, it's a little too brief right now, but it does cover most of the syntax.
    – Oka
    Feb 8, 2016 at 15:39
  • 8
    I too had tried import * as moment from 'moment' which gave me the "moment is not a function" error. Changing it as you suggested to import moment from 'moment' just changes the error to moment_1.default is not a function. what is going on here? (It seems that changing the way I import has caused typescript to compile my moment() function call into a moment_1.default function call.)
    – uglycoyote
    May 12, 2017 at 6:22
  • I had to add "allowSyntheticDefaultImports": true under compilerOptions in tsconfig.json file Jul 15, 2022 at 9:07
  • I came here when get runtime error moment_1.default is not a function. Then I changed import moment from 'moment'; => import * as moment from 'moment'; and this worked. Feb 8 at 7:47
3

This worked for me:

import moment from 'moment/src/moment'
0

A beginner JS mistake that was giving me the same error:

foobar(moment) {
  console.log(moment().whatever());
}

Naming a parameter moment breaks access to the moment() function.

0

AS plot in the official documentation momentJs my problems were solved via nodeJS approach:

var moment = require('moment');
moment(); //this does not emit the errors
0

To get moment work as a function, if you are using ES6 and babel, you must import it in this way:

import moment from 'moment'

and not, as written in the documentation

import * as moment from 'moment'
0

Remove this

import * as moment from "moment";

add this instead

import moment from "moment";

And that is how it is used in your context

{moment(finalOrder.order.order.order.dateOrdered).format("MM-DD-YYYY")}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.