Importing moment into TypeScript project

Question

I am trying to use moment in my TypeScript project but when I use the line,

import moment from 'moment';

I get the error:

'node_modules/moment/moment' has no default export.

I have also tried,

import moment from 'moment/src/moment';

but then I get the error:

'Cannot find module moment/src/moment'.

Does anybody know a way of doing this? Thanks.

Does this work? import moment = require('./bower_components/moment/src/moment'); ? Or import moment = module('moment'); ? — Mr. Polywhirl
– Mr. Polywhirl, Commented Apr 27, 2016 at 14:45
See @Mr.Polywhirl's answer, "'node_modules/moment/moment' has no default export." means the script isn't a module — Ozrix
– Ozrix, Commented Apr 27, 2016 at 14:53
When I try import moment = module('moment') it gives the error "Cannot find namespace 'module'". Am I supposed to be including something for that? When I try the first piece of code (I am using node_modules) I get the error "Cannot find module '../node_modules/moment/src/moment'". — Yulric Sequeira
– Yulric Sequeira, Commented Apr 27, 2016 at 15:02
@Ozrix No it doesn't. It means that none of the exports are defined as default, so you need to tell it what you want to import. You can use * to import everything or curly braces to specify what you want. — rgvassar
– rgvassar, Commented Apr 27, 2016 at 15:55

rgvassar · Accepted Answer · 2016-04-27 15:10:55Z

29

The correct syntax is:

import * as moment from 'moment';

answered Apr 27, 2016 at 15:10

rgvassar

5,8612 gold badges27 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Heretic Monkey Over a year ago

You might need to use moment.Moment. E.g., {date: moment.Moment;}

David Driscoll Over a year ago

be careful if you use babel on top of the above syntax, babel will prevent the function moment() from work as expected, due to how it associates with the spec. You can add "allowSyntheticDefaultImports": true to your tsconfig.json to allow import moment from "moment"; to no longer throw an error.

Kevin Doyon Over a year ago

@DavidD thanks! That tsconfig.json setting seems needed for rollup, as using import * as moment from 'moment' gives an error: Cannot call a namespace ('moment') otherwise

ffxsam Over a year ago

Can anyone explain why import * as moment from 'moment' is the correct syntax for TS, but import moment from 'moment' is sufficient in JS?

CodeMind Over a year ago

This is not working with TS Version 3.6.2. even with "moduleResolution": "node", and "allowSyntheticDefaultImports": true, in tsconfig

|

Ru Chern Chong · Accepted Answer · 2019-04-16 12:58:13Z

11

I had the same issue and solved the problem in my project by adding allowSyntheticDefaultImports: true in compilerOptions in my tsconfig.json file and then I used the syntax

import moment from 'moment';

Reference: "https://momentjs.com/docs/#/use-it/typescript/"

edited Apr 16, 2019 at 12:58

Ru Chern Chong

3,78613 gold badges36 silver badges43 bronze badges

answered Apr 16, 2019 at 12:52

Tim K.

3242 silver badges4 bronze badges

2 Comments

Sebastián Rojas Over a year ago

You saved me some time, thankyou. This answer is the answer that works in all cases including angular libraries.

ZZZ Over a year ago

this should be the only correct answer, while most answers you can find in SO are just workarounds which are all clumsy, and I think Angular compiler can't be so dump.

Collectives™ on Stack Overflow

Importing moment into TypeScript project

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related