Awesome-TypeScript-Loader error on webpack rebuild

Question

When I run "npm start" webpack build everything successfully. When I then go and change a file and save, it attempt to rebuild and I get the following error

C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\awesome-typescript-loader\src\instance.ts:334
        const changedFiles = Object.keys(mtimes).map(toUnix);
                                    ^
TypeError: Cannot convert undefined or null to object
    at Compiler.<anonymous> (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\awesome-typescript-loader\src\instance.ts:334:37)
    at next (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\tapable\lib\Tapable.js:140:14)
    at Compiler.compilerInvalid (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\webpack-dev-middleware\lib\Shared.js:144:5)
    at next (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\tapable\lib\Tapable.js:140:14)
    at Compiler.compiler.plugin (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\webpack\lib\CachePlugin.js:32:5)
    at next (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\tapable\lib\Tapable.js:140:14)
    at Compiler.<anonymous> (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\awesome-typescript-loader\src\watch-mode.ts:12:13)
    at Compiler.applyPluginsAsyncSeries (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\tapable\lib\Tapable.js:142:13)
    at Watching._go (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\webpack\lib\Compiler.js:43:16)
    at Watching.invalidate (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\webpack\lib\Compiler.js:121:8)
    at Watching.<anonymous> (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\webpack\lib\Compiler.js:106:8)
    at EventEmitter.watcher.once (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\webpack\lib\node\NodeWatchFileSystem.js:44:4)
    at EventEmitter.g (events.js:291:16)
    at emitTwo (events.js:106:13)
    at EventEmitter.emit (events.js:191:7)
    at EventEmitter._onTimeout (C:\Users\me\Source\Repos\PTCCompass\Web.Angular\node_modules\watchpack\lib\watchpack.js:139:7)
    at ontimeout (timers.js:365:14)
    at tryOnTimeout (timers.js:237:5)
    at Timer.listOnTimeout (timers.js:207:5)

Here is my package.json

  "dependencies": {
    "@angular/common": "2.4.6",
    "@angular/compiler": "2.4.6",
    "@angular/core": "2.4.6",
    "@angular/forms": "2.4.6",
    "@angular/http": "2.4.6",
    "@angular/material": "2.0.0-beta.1",
    "@angular/platform-browser": "2.4.6",
    "@angular/platform-browser-dynamic": "2.4.6",
    "@angular/platform-server": "2.4.6",
    "@angular/router": "3.4.6",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "@vaadin/angular2-polymer": "^1.0.0",
    "ag-grid": "~8.0.1",
    "ag-grid-enterprise": "~8.0.1",
    "ag-grid-ng2": "~8.0.0",
    "animate.css": "^3.5.2",
    "assets-webpack-plugin": "^3.4.0",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-select": "^1.12.1",
    "bootstrap-tour": "^0.11.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "http-server": "^0.9.0",
    "icheck": "^1.0.2",
    "ie-shim": "^0.1.0",
    "jasmine-core": "^2.5.2",
    "lz-string": "^1.4.4",
    "metismenu": "2.0.2",
    "nestable": "^0.2.0",
    "ng2-modal": "0.0.24",
    "ng2-tag-input": "^0.7.9",
    "pace": "0.0.4",
    "pace-progress": "^1.0.2",
    "primeng": "^1.1.4",
    "reflect-metadata": "^0.1.9",
    "rxjs": "~5.1.0",
    "summernote": "^0.8.2",
    "zone.js": "0.7.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~2.4.6",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "2.5.41",
    "@types/node": "^6.0.38",
    "@types/selenium-webdriver": "2.53.38",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^2.0.0",
    "angular-router-loader": "^0.4.0",
    "angular2-template-loader": "^0.6.0",
    "assets-webpack-plugin": "^3.4.0",
    "awesome-typescript-loader": "~3.0.6",
    "codelyzer": "~2.0.0-beta.4",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.26.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.12.0",
    "html-webpack-plugin": "^2.21.0",
    "imports-loader": "^0.7.0",
    "istanbul-instrumenter-loader": "1.2.0",
    "jasmine-core": "^2.5.2",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.1",
    "ngc-webpack": "^1.0.2",
    "node-sass": "^4.1.1",
    "npm-run-all": "^4.0.0",
    "parse5": "^3.0.1",
    "protractor": "^4.0.10",
    "raw-loader": "0.5.1",
    "rimraf": "~2.5.4",
    "sass-loader": "^4.1.1",
    "script-ext-html-webpack-plugin": "^1.3.2",
    "source-map-loader": "^0.1.5",
    "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.2",
    "ts-node": "^2.0.0",
    "tslint": "4.2.0",
    "tslint-loader": "^3.3.0",
    "typedoc": "^0.5.3",
    "typescript": "2.0.10",
    "url-loader": "^0.5.7",
    "v8-lazy-parse-webpack-plugin": "^0.3.0",
    "webpack": "2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-dev-server": "2.4.1",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "3.0.0"
  },

The change that started this was reverting angular back to 2.4.6 from 2.4.7. On 2.4.7 I was getting an error about Token is null, so reverted back to 2.4.6 which fixed that, but now every time I save a file my webpack server crashes. Any ideas?

Answer 1

I was experiencing the same issue using webpack 2.

"awesome-typescript-loader": "^3.0.4",
"ts-loader": "^2.0.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"

Updating ts-loader => 2.0.1 and awesome-typescript-loader => 3.0.7 has resolved this issue for me. I can't speak for webpack 1.

Answer 2

This is a defect that was identified from us while deprecating a property on watchpack. However we didn't realize that people were relying on the private api endpoints. Therefore, we should have just rolled it back. Keep an eye on the tracking issue:

https://github.com/TypeStrong/ts-loader/issues/479

Answer 3

I am having the same issue and tracked it down to watchpack being updated to version 1.3.0. Create a shrinkwrap file using "npm shrinkwrap --dev" and change the watchpack version to 1.2.1 and re-run npm install. That fixed it for me.

Answer 4

For what it's worth, I get the same error using ts-loader, but only when testing with karma.