"moment" has no exported member 'default'
Asked Answered
P

5

36

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;
Praemunire answered 19/2, 2019 at 12:45 Comment(7)
Refer thisSeptuple
Version of moment?Jeter
@dileepkumarjami "moment": "^2.24.0"Praemunire
Did you try adding the above ?Jeter
@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 usingPraemunire
Try to re-run your project after trying @dileepkumarjami's suggestion, because it's necessary when you change tsconfig.jsonSeptuple
@dileepkumarjami - you are right needs to recompile i think :) thanks it's workingPraemunire
J
74

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

Jeter answered 19/2, 2019 at 14:18 Comment(5)
adding in tsconfig yes, but in which part of the tsconfig? root? compilerOptions? lib?Diviner
In the compilerOptions sectionFifty
adding to tsconfig.app.json worked, not tsconfig.jsonFerrigno
this solution worked for me in Angular 14. I had issues with wagmi/coreJabiru
Also you have to importing moment >> import moment from 'moment';Neuropath
H
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
Hines answered 19/2, 2019 at 12:52 Comment(1)
I'm having problem with word 'default'.Praemunire
P
4

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.

Protoxylem answered 11/12, 2019 at 20:33 Comment(0)
I
1

Add the following line in the tsconfig.json file:

"allowSyntheticDefaultImports": true
Inelegance answered 10/11, 2020 at 13:45 Comment(0)
D
0

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

externals: [
      'moment/moment',
       'moment'
   ]
Dismissal answered 10/2, 2020 at 10:22 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.