momentjs breaks sourcemaps

[holiber]

• I'm submitting a ...
  [x] bug report
• What is the current behavior?
  When I import momentjs in clean project all sourcemaps became broken

how to reproduce:

1. install project from repo
2. install momentjs: npm install moment
3. in app.component.ts:
   add import
   import * as moment from 'moment/moment';
   in ngOnInit method add momentjs usage:
   var date = moment(new Date()).format();
4. run 'npm start'
5. try to open 'home.component.ts' in chrome devtools:

home.component.ts contains main.browser.ts

Any idea how to fix? Maybe it's momentjs problem, or webpack config?

• Angular version: 2.0.0-rc.1
• Browser: Chrome 51

[holiber]

import with const moment = require('moment/moment') also no helps

[PatrickJS]

can you set
devtool: 'cheap-module-source-map',
to
devtool: 'source-map',
in
webpack.dev.js
https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.dev.js#L53

[holiber]

@gdi2290 with devtool: 'source-map' now I got error in browser console
Failed to parse SourceMap: http://localhost:3000/main.map

main.map.txt

There is an opinion, that this problem caused with some localization characters in map file

[PatrickJS]

can you add moment to be ignored
helpers.root('node_modules/moment')
https://github.com/AngularClass/angular2-webpack-starter/blob/4a07eef656df71c8fc48d125f7b6a670a1e96046/config/webpack.common.js#L120...L124

[holiber]

@gdi2290 with 'node_modules/moment' in source-map-loader excludes also no effect. Furthermore, moment definitions still present in main.map file.

[PatrickJS]

do you have [Disable Cache] on? I can't reproduce it

[holiber]

Yes, my browser cache was disabled. So, after few experiments I found, what it's google chrome v51.0 problem. On chrome "canary" all source maps are valid. @gdi2290, thanks for your answer!

[holiber]

But it's still strange what helpers.root('node_modules/moment') in sourcemap-loader excludes has no effect =/

[yangmillstheory]

@holiber how did you find out that this is a Chrome 51 problem? How did you fix it?

Using git bisect today, I found out that the introduction of momentjs into our builds broke source maps on Chrome Version 51.0.2704.103 (64-bit).

Webpack config has devtool: 'cheap-module-source-map'.

A fix for us was to include either of the following as a Webpack plugin:

• new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-us/)
• new webpack.IgnorePlugin(/^\.\/locale/, /moment$/)

Note that the first solution works but is broken, since there's no en-us files in moment/locale for v2.13.0 - I just got it via copy-pasta from another project. The second solution should be preferred.

Ping @lanceharper @ccastarivale; this happened in https://github.com/trueprint/arivale-coach-client/commit/37b7a12b54e4068613b5d487c6cb12bda7a77823.

[holiber]

@yangmillstheory, I installed "Chome Canary" - version of Google Chrome that contains all last changes and bugfixes. Canary Chrome has no problems with sourcemaps. I don't know how to fix it in Chrome 51.0.