"moment" has no exported member 'default'

Question

I'm using moment.js to change the local date format for my application but getting the following error:

"moment" has no exported member 'default' when importing the library.

Below is my code:

import {Inject, Injectable, Optional} from '@angular/core';
import {DateAdapter, MAT_DATE_LOCALE, MatDateFormats} from '@angular/material';
import * as _moment from 'moment';
import {default as _rollupMoment, Moment} from 'moment';

const moment = _rollupMoment || _moment;

Refer [this](https://stackoverflow.com/questions/35166168/how-to-use-moment-js-library-in-angular-2-typescript-app) — Tushar Walzade, Feb 19 '19 at 12:52
@dileepkumarjami Thanks you for the quick replay - added just , but still error exist - one improvement is now it's not showing any redline for default keyword I'm using — Amit Golhar, Feb 19 '19 at 13:17
Try to re-run your project after trying *@dileepkumarjami*'s suggestion, because it's necessary when you change *tsconfig.json* — Tushar Walzade, Feb 19 '19 at 14:13
@dileepkumarjami - you are right needs to recompile i think :) thanks it's working — Amit Golhar, Feb 19 '19 at 14:14

dileepkumar jami · Accepted Answer · 2019-04-25T12:43:29.180

74

Try adding "allowSyntheticDefaultImports": true to your tsconfig.json under the "compilerOptions"

edited Apr 25 '19 at 12:43

answered Feb 19 '19 at 14:18

dileepkumar jami

2,185
12
15

4

adding in tsconfig yes, but in which part of the tsconfig? root? compilerOptions? lib? – Seyhmus Gokcen Apr 14 '19 at 20:26
In the `compilerOptions` section – Paulo Luan Oct 24 '19 at 12:58
4

adding to `tsconfig.app.json` worked, not `tsconfig.json` – liwevire Jul 28 '20 at 18:51
this solution worked for me in Angular 14. I had issues with wagmi/core – Shemang David Nov 21 '22 at 13:07
Also you have to importing moment >> `import moment from 'moment';` – mohamad Aug 05 '23 at 14:46

veben · Answer 2 · 2019-02-19T13:02:46.890

7

You seems to have trouble importing moment

As you can see in the documentation, For Typescript 2.x try adding "moduleResolution": "node" in compilerOptions in your tsconfig.json file and then use any of the below syntax:

import * as moment from 'moment';
import moment = require('moment');

PS: Make sure you have installed moment.js with npm:

npm install --save moment

edited Feb 19 '19 at 13:02

answered Feb 19 '19 at 12:52

veben

19,637
14
60
80

1

I'm having problem with word 'default'. – Amit Golhar Feb 19 '19 at 12:58

MJ X · Answer 3 · 2019-12-11T20:49:12.187

Here you go with a complete solution to this problem:

First:

 npm install moment --save
 npm install @angular/material-moment-adapter

Second:

in your package.json under dependencies make sure you have the following code:

    "@angular/material-moment-adapter": "^8.2.3",

Third:

in your tsconfig.json file under compileroptions add the following:

"allowSyntheticDefaultImports": true

Forth:

Modify your component with the following codes:

import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import * as _moment from 'moment';
import { default as _rollupMoment } from 'moment';

const moment = _rollupMoment || _moment;
export const MY_FORMATS = {
parse: {
  dateInput: 'LL',
},
display: {
  dateInput: 'YYYY-MM-DD',
  monthYearLabel: 'YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'YYYY',
 },
};

@Component({
 selector: 'app-newsfeedform',
 templateUrl: './newsfeedform.component.html',
 styleUrls: ['./newsfeedform.component.css'],
 providers: [
  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },

  { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
],
})

Fifth:

In your component.html file datepicker like bellow code:

     <mat-form-field appearance="outline" fxFlex>
                    <input matInput [matDatepicker]="publishdate" placeholder="Publish Date"
                        formControlName="publishdate">
                    <mat-datepicker-toggle matSuffix [for]="publishdate"></mat-datepicker-toggle>
                    <mat-datepicker #publishdate></mat-datepicker>
                </mat-form-field>

That is it you can customize Angular material datepicker any format you want just modify the format given above.

score 1 · Answer 4 · edited Nov 10 '20 at 14:33

1

Add the following line in the tsconfig.json file:

"allowSyntheticDefaultImports": true

edited Nov 10 '20 at 14:33

Elletlar

3,136
7
32
38

answered Nov 10 '20 at 13:45

Manjunath Reddy R

31
3

score 0 · Answer 5 · edited Feb 10 '20 at 11:30

0

in gulpfile.js in externals section add 'moment/moment' and 'moment' both

externals: [
      'moment/moment',
       'moment'
   ]

edited Feb 10 '20 at 11:30

Hima

1,249
1
14
18

answered Feb 10 '20 at 10:22

Shashank Singh

37
4

"moment" has no exported member 'default'

5 Answers5