Cannot read property 'substr' of undefined

[kaiza]

TypeError: Cannot read property 'substr' of undefined
at Function. (...\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:115:26)

Version: 0.5.6

This problem seems to be related to trying to parse a js file containing a long //# sourceMappingURL at the end. For example, by trying to use the typemoq library in an Angular 2 application, as per this SO issue:

http://stackoverflow.com/questions/40002699/typemoq-and-angular-cli-dont-work-together#comment67466029_40002699

If I delete the //# sourceMappingURL line from typemoq.js the source node loads fine.

[morrisonbrett]

I'm seeing this same error here: https://github.com/mozilla/source-map/blob/master/lib/source-node.js#L95

For me, I can reproduce in an Angular 2 TypeScript file:

THIS breaks:

@Component({
  selector: 'tab-bar',
  templateUrl: 'tabs.html'
})

THIS works:

@Component({selector: 'tab-bar',templateUrl: 'tabs.html'})

[jackytse]

Don't write two or more classes in the same ts file. I think it's a bug of 'source-map'.

[ScallyGames]

Manually applying this patch resolves this issue.
http://stackoverflow.com/a/41923610/4068027

[edmondtm]

Not only in Ionic-app. I also have the error on my Angular 4 app. When I run ng serve.

92% chunk asset optimization pathtofile/node_modules/source-map/lib/source-node.js:95
          var code = nextLine.substr(0, mapping.generatedColumn -
                             `^`

TypeError: Cannot read property 'substr' of undefined
    at Function.<anonymous> (pathtofile/node_modules/source-map/lib/source-node.js:95:30)
    at Array.forEach (native)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/pathtofile/node_modules/source-map/lib/source-map-consumer.js:155:14)
    at Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (/pathtofile/node_modules/source-map/lib/source-node.js:80:24)

[tromey]

There's a patch you can try - see #257. Before merging it, though, I'd like a regression test, and I still don't know how to write one. If you have a recipe for reproducing (the simpler the better, and for best results really walk me through the setup), that would be super helpful.

[david-hollifield]

I can reproduce using the project angular-cache. If I try import "angular-cache" with devtool: "source-map" you'll get this error every time.

[sxcooler]

Got same error with Preact-based project.

[lahdekorpi]

Isn't two or more classes in one ts-file valid?

[ivanfretes]

The fit of the issue is very simple, create other file exclusively your class! (e.g modal-item.ts)