tsc --watch not updating files when outDir present in tsconfig.json

Question

I am trying to write a nodejs command line app with Typescript and I have the following tsconfig file:

{
"compilerOptions": {
    "module": "commonjs",
    "outDir": "dist"
},
"include": ["src/*.ts"]
}

When I use tsc everything works as expected (*.js files appear in the dist folder).

However, when I run tsc -w, the js files are created in the dist folder at first, but not updated when I change any of the ts files. Tsc seems to be seeing and compiling changes just fine, but fails to write the actual js files.

4:23:04 PM - File change detected. Starting incremental compilation...
4:23:04 PM - Compilation complete. Watching for file changes.

When I omit the outDir parameter from the tsconfig everything works (js files are being updated when chaning ts files). This is not a desired solution since I want js output to be in dist folder instead of src.

It also works correctly when I skip using the tsconfig.json file and run it directly:

tsc -w --outDir dist src/app.ts

Am I doing something wrong?

Running on win10, tsc 2.6.2, node 7.9.0

Threequarter

Seems to work correctly in macOS High Sierra with those specific versions of tsc and node. – Haire

Thanks. I tested it under Mac too and indeed it works. So it is a windows issue. – Threequarter

Answer 1

I think I have this figured out.

Typescript 2.6 came with new --watch implementation. When downgrading to 2.5.3 everything works fine.

So this seems to be an issue with the new --watch thingy that manifests under specific conditions (win10, using outDir in tsconfig).

Reported it as a bug in Typescript issue tracker - https://github.com/Microsoft/TypeScript/issues/20739

Threequarter

Answer 2

For me this was fixed by disabling the option 'Use "safe write" (save changes to a temporary file first)' in WebStorm:

When enabled, the IDE deletes and renames files, which seems to confuse tsc --watch.

(To see what it's doing, use tsc --extendedDiagnostics --listEmittedFiles. Extended logs in Arnelism's GitHub issue.)

Triplex

Answer 3

Get to the latest nightly build:

npm install -g typescript@next

Pave

Answer 4

For me the problem was trying to run the webpack serve from WSL2. When I ran it from Powershell the live reload works just fine though. I wonder why that is...

Brachium