Webpack + Typescript + watch results in error TS2554 only on re-compilation

Question

Software involved:

• webpack 4.8.3
• typescript 2.8.3
• ts-loader 4.3.0

Webpack configuration:

rules: [
    {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: ['ng-annotate-loader', 'ts-loader']
    },
    ...
]

This compiles my project fine on a single build (webpack --mode development).

However, it starts to produce errors when building in watch mode:

$ webpack --progress --watch --mode development
Webpack is watching the files…

Hash: e8f3fc158b2b6feaad07                                                                  
Version: webpack 4.8.3
Time: 75713ms
Built at: 05/15/2018 3:25:27 PM
          Asset       Size      Chunks             Chunk Names
          ...

(The build is fine. Now I change one file, and it rebuilds:)

[./ts/foo/foo.ts] 3.82 KiB {foo} [built] [1 error]
[./ts/foo/controllers/bar.ts] 3.8 KiB {baz} {foo} [built]
[./ts/foo/baz.ts] 4.21 KiB {baz} [built] [1 error]
    + 668 hidden modules

ERROR in .../ts/foo/foo.ts
./ts/foo/foo.ts
[tsl] ERROR in .../ts/foo/foo.ts(84,9)
      TS2554: Expected 0 arguments, but got 1.

ERROR in .../ts/foo/baz.ts
./ts/foo/baz.ts
[tsl] ERROR in .../ts/foo/baz.ts(105,9)
      TS2554: Expected 0 arguments, but got 1.

The lines it refers to are all lines containing console.log calls, e.g.:

console.log(`Using locale ${locale}`);

Again, if I abort the watch and build from scratch, it works just fine. What's the problem here?

For testing I have removed ng-annotate-loader; no change.
This started happening after upgrading the build toolchain from Webpack 3 to 4 with associated upgrades to Typescript from 2.3.x. In the old versions build --watch works fine.

Answer 1

I think that the problem is related to webpack.NewWatchingPlugin (the default watching plugin), but you can force webpack to use the old file watching logic if you add new webpack.OldWatchingPlugin() plugin. The OldWatchingPlugin is more stable than NewWatchingPlugin.

There are a variety of reasons why webpack might not working properly:

• If no files are outputted (with different hashes), it is likely a configuration issue, not a file watching issue.
• Having not enough file watchers causes file watcher in Webpack won't recognize the changes.