Angular-cli: bug(moment-adapter): "_rollupMoment__default is not defined"

[kaito3desuyo]

(related with https://github.com/angular/angular/issues/36248)

Reproduction

https://github.com/kaito3desuyo/angular-test

Steps to reproduce:

1. clone this repository
2. ng build --prod
3. npm i -g http-server
4. move root directory to dist/angular-test Folder
5. http-server
6. open http://localhost:8080

This issue only occurs with production builds.

Expected Behavior

Screen is displayed correctly

Actual Behavior

Screen goes blank with console error

Environment

• Angular: 9.1.0
• CDK/Material: 9.2.0
• Browser(s): Chrome 80.0.3987.149
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 x64 1909 18363.720

[LanderBeeuwsaert]

I'm also using the moment-adapter so most probably the cause is the same.

[jnfaerch]

Edit: Noted wrong package :/

Can recreate with "@angular-devkit/build-angular": "~0.901.0"

"Resolved" with "@angular-devkit/build-angular": "~0.900.7"

[keserwan]

Same here, @jnfaerch suggestion worked.

[mgameover]

Same issue: main.95606efb9a87c022e413.js:1 Uncaught ReferenceError: _rollupMoment__default is not defined
@jnfaerch suggestion worked

[newargus]

Same Here:

[wasiddiqui]

facing the same issue
tried to build with @angular-devkit/build-angular": "~0.900.7" but not working

[mgameover]

@wasiddiqui, ~0.907.0 worked for me.
My project is using another lib, that was also built with ~0.901.0. once I've rebuilt that lib and my project, the issue has gone.
So you might need to check your dependencies.

[wasiddiqui]

MY ISSUE RESOLVED by workaround
Steps

1. Allow "allowSyntheticDefaultImport":true in tsconfig.json under compilerOptions.
2. Change "@angular-devkit/build-angular": "~0.901.0" to @angular-devkit/build-angular": "~0.900.7"

3. Import moment like this

import * as _moment from 'moment';
import { default as _rollupMoment } from 'moment';

const moment = _rollupMoment || _moment;

1. npm install
2. ng build

[blackholegalaxy]

ISSUE RESOLVED

Issue is not resolved, this is a workaround. We should'nt have to downgrade or change moment import.

[crisbeto]

I spent some time investigating it and it's most-likely an issue with build-angular like mentioned above. I've narrowed it down to somewhere between 0.900.3 and 0.901.0-next.4. The issue comes from the following lines:

var Jg = n("wd/R");
const Zg = _rollupMoment__default || Jg

Compared to the ones from a working version:

Ng = n("wd/R"),
Vg = n.n(Ng).a || Ng

I'm transferring the issue over to the correct repo.

[marsc]

Same problem here in production build only with "@angular-devkit/build-angular": "~0.901.0". Downgraded for now.

[ArtemeeSenin]

Have the same problem but with
main-es2015.8a5dc9b260c775d8aa4b.js:1 Uncaught ReferenceError: dragulaExpt__default is not defined ("@angular-devkit/build-angular": "~0.901.0")

[TheParad0X]

Same problem here after an update from Angular 9.0.5 to the latest

[mikejunt]

Yep, also seeing this issue with moment after upgrading

[atlesj]

Same

[fpmk]

any news?

[pabloxn]

Same problem

[deepakgonda]

Same problem with the production build.

[acherniak]

Any good news?

[jasoninrapid]

We're seeing the same problem on an Angular 8 to Angular 9 upgrade we did on March 26. Details:

• ng2-dragular module got transpiled with the same bad "dragulaExpt__default" referenced above.
• Downgrading angular devkit fix it for us. Our (fixed) entry in the dev dependencies in package.json looks like: "@angular-devkit/build-angular": "0.900.7"

[spock123]

I think most of us are stuck on 9.0.x for now. I can't risk workarounds or downgraded dependencies. Better to wait until this gets sorted out - at least for me.

[demisx]

Same issue after upgrading Angular to the latest. Had to downgrade @angular-devkit/build-angular to v0.900.7 to get rid of the same error as @ArtemeeSenin's.

[albert-asin]

same here

[alinaresz]

Same problem after upgrading to "@angular-devkit/build-angular": "^0.901.0"
The workaround by @jnfaerch to downgrade to "^0.900.7", worked for me.

[neaptolem]

Same problem as @jasoninrapid
Thank you for any updates.

[showjefb]

Took a while to track down (wish I had visited here first), but I have the same scenario as many. 0.900.7 works while 0.901.0 breaks my build versions.

[Fzwael]

Lost one day looking for this 😢

[blogcraft]

ISSUE RESOLVED

Issue is not resolved, this is a workaround. We should'nt have to downgrade or change moment import.

Actually, that's how Angular Material docs recomends using moment:
https://material.angular.io/components/datepicker/overview

// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the * as
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the default as syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment, Moment} from 'moment';

const moment = _rollupMoment || _moment;

[demisx]

Please note that this issue breaks the prod build even for those who don't use Moment.js and _rollupMoment. Some regression has been introduced going from 0.900.7 to 0.901.0.

[ViieeS]

The new @angular-devkit/build-angular has a problem compiling @angular/material-moment-adapter:

Possible workaround is just to add this to polyfills.ts:

window['_rollupMoment__default'] = null;

[gwidonw]

Please note that this is not only problem with Moment - I'm getting the same error with ng2-dragula lib

[mduft]

Same here with ng2-dragula after updating from 9.0.0 to 9.1.0..

[4typen]

The new @angular-devkit/build-angular has a problem compiling @angular/material-moment-adapter:

Possible workaround is just to add this to polyfills.ts:

window['_rollupMoment__default'] = null;

This is probably the better workaround instead of downgrading the angular-devkit.

I have btw. the same issue with "getAngularJSGlobal" and "_rollupMoment__default" in our AngularJS/Angular 9.1 Hybrid App.

[mucbits]

Thank you @4typen, I was just trying to fix that and your workaround is much better!

[sebrojas14]

I tried to upgra to Angular 9.1.0 and a lot of libraries broken with errors like this.

[JosepAlacid]

I just don't understand how to apply @mgechev fix or I don't understand why this issue is closed.

[mgechev]

@JosepAlacid the issue is fixed by this PR https://github.com/angular/angular-cli/pull/17364. We'll release the fix on Wednesday.

[JosepAlacid]

I will go on until then with the "window['_rollupMoment__default'] = null;" workaround.
Thanks for your kind response.

[danielehrhardt]

[spock123]

@danielehrhardt Is that with @mgechev 's fix or?

[danielehrhardt]

@danielehrhardt Is that with @mgechev 's fix or?

Yes

[mgechev]

The fix is not our yet. @danielehrhardt did you build the CLI from source?

[mtpultz]

Downgrading the devkit has problems if you run npm audit fix in your deployments. This seemed to fix it until a couple days ago and now we're getting an error

An unhandled exception occurred: Cannot find module 'webpack-dev-server

So we've switched to the solution of adding window['_rollupMoment__default'] = null; to polyfills.ts

[gultyaev]

@JosepAlacid the issue is fixed by this PR #17364. We'll release the fix on Wednesday.

Still not working. Just updated my deps to the latest ones and still same error.

[cedricduffournet]

I think this is because angular-cli has not been released yet, still in v9.1.0.

[OckePocke]

I tried the new version 9.1.1, that has been released today, and it solved the issue for me.

[mgechev]

As @OckePocke mentioned, we released CLI 9.1.1 today. If the problem still persist for you, feel free to open a new issue linking this one.

[Rajarml]

The 9.1.1 CLI release seems to have fixed the same issue I got.
No more window['_rollupMoment__default'] = null;-in-polyfills.ts workaround needed.

[skonx]

No more window['_rollupMoment__default'] = null; but Moment imports should be updated like there : https://stackblitz.com/angular/qrmxxmanejy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

[JosepAlacid]

And don't forget to add
"allowSyntheticDefaultImports": true,
at compilerOptins in tsconfig.json

[skonx]

And don't forget to add
"allowSyntheticDefaultImports": true,
at compilerOptins in tsconfig.json

@JosepAlacid indeed 😉

[hamfastgamgee]

This fix made my "ng test" configuration use Typescript 3.6, meaning that any files using the safe navigation (Elvis) operator don't compile correctly. Is there something special I need to do (angular.json edits, etc.) so that only build optimization is impacted?

[mgechev]

@hamfastgamgee optional chaining (safe navigation, elvis, etc.) is part of TypeScript 3.7.

[hamfastgamgee]

@mgechev Right, and Angular 9.1.x supports 3.8. But after this fix to use 3.6 in the build optimizer, "ng test" is running as 3.6 for me, meaning that code is not working if it uses 3.7 or 3.8 features. I'm trying to figure out if it's something wrong in my config that's causing "ng test" to use the wrong TS version, or if this effectively causes TS 3.7+ to be unsupported again and should have been documented more explicitly.

[JACrazy]

Sad to see we're back to 3.6, was really liking optional chaining

[mgechev]

@JACrazy no need to go back to 3.6. We fixed this issue and published the fix on npm.

[JACrazy]

@JACrazy no need to go back to 3.6. We fixed this issue and published the fix on npm.

Great to hear!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}