Watch API caching stale errors and not supporting lib compiler option

[johnnyreilly]

TypeScript Version: 2.7.0-dev.20180120

Search Terms:
watch API

Code

See this illustration repo: https://github.com/johnnyreilly/typescript-ts-loader-watch-api-illustration

Expected behavior:

• when files are changed the TypeScript compiler will detect changes
• the TypeScript compiler will support the lib compiler option

Actual behavior:

• when files are changed the TypeScript compiler does not detect changes
• the TypeScript compiler will error if you attempt to use the lib compiler option

Related Issues:

• Api for creating program in watch mode and using builder to get incremental emit/semantic diagnostics #20234 - PR that added watch API support to TypeScript
• Using the new watch api of compiler TypeStrong/ts-loader#685 - PR that added watch API support to ts-loader

---

Taken from the illustration repo:

New Watch API issues illustration

With TypeScript 2.7 support for the API is being exposed. This wonderful PR by @sheetalkamat to ts-loader added support for the API to ts-loader.

Naturally I'm super-excited about this! We pushed out v3.3.0 of ts-loader including support for the new watch API (which is available in the night builds).

Alas, the watch API functionality doesn't seem to be working as expected. It's unclear whether the problem is with the watch API or with the implementation in ts-loader. I found and fixed a suspected minor issue with the ts-loader watch API support. However everything else looks correct as best I can judge.

There's 2 issues I've spotted:

• The new watch API is not detecting file changes
• The new watch API does not find the TypeScript APIs (lib.dom.d.ts etc) - if you use lib in your tsconfig.json there are problems.

I'm wondering if this is actually a problem with the watch API itself.

Here is a simple repro of the issues I've seen.

Not detecting file changes

1. Clone this repo
2. yarn install
3. run either yarn start (to use webpack-dev-server) or yarn watch (to use webpack --watch)
4. See the following in the console:

ERROR in ./src/render.ts
[tsl] ERROR in C:\source\typescript-ts-loader-watch-api-illustration\src\render.ts(2,5)
      TS2304: Cannot find name 'i'.

ERROR in ./src/render.ts
[tsl] ERROR in C:\source\typescript-ts-loader-watch-api-illustration\src\render.ts(2,7)
      TS2304: Cannot find name 'am'.

ERROR in ./src/render.ts
[tsl] ERROR in C:\source\typescript-ts-loader-watch-api-illustration\src\render.ts(2,10)
      TS2304: Cannot find name 'an'.

ERROR in ./src/render.ts
[tsl] ERROR in C:\source\typescript-ts-loader-watch-api-illustration\src\render.ts(2,13)
      TS2552: Cannot find name 'error'. Did you mean 'Error'?
webpack: Failed to compile.

5. comment out line 2 in render.ts (the error) and save the file
6. note webpack rebuilds but TypeScript continues to report the same errors; it fails to acknowledge the file change.

If you amend the webpack.config.js to set experimentalWatchApi: false and repeat steps 3-6 then you will see that behaviour is as desired. But this is without using the new watch API.

Usage of lib in tsconfig.json does not work

1. comment out line 2 in render.ts (the error) and save the file
2. Uncomment the lib section in your tsconfig.json so it looks like this:

{
    "compilerOptions": {
        "sourceMap": true,
        "lib": [
            "dom",
            "es2015"
        ],
    }
  }

3. run yarn watch
4. See the following in the console:

C:\source\typescript-ts-loader-watch-api-illustration [master ↑2 +0 ~3 -0 !]> yarn watch
yarn run v1.3.2
$ webpack --watch

Webpack is watching the files…

ts-loader: Using typescript@2.7.0-dev.20180120 and C:\source\typescript-ts-loader-watch-api-illustration\tsconfig.json
Using watch api
Hash: cec32e52daf1e2bcf519
Version: webpack 3.10.0
Time: 671ms
        Asset     Size  Chunks             Chunk Names
dist/index.js  6.85 kB       0  [emitted]  main
   [0] ./src/index.ts 89 bytes {0} [built]
   [1] ./src/render.ts 164 bytes {0} [built] [1 error]

ERROR in ./src/render.ts
[tsl] ERROR in C:\source\typescript-ts-loader-watch-api-illustration\src\render.ts(3,5)
      TS2304: Cannot find name 'document'.

ERROR in C:\source\typescript-ts-loader-watch-api-illustration\tsconfig.json
[tsl] ERROR
      TS6053: File 'C:/lib.dom.d.ts' not found.

ERROR in C:\source\typescript-ts-loader-watch-api-illustration\tsconfig.json
[tsl] ERROR
      TS6053: File 'C:/lib.es2015.d.ts' not found.

[sheetalkamat]

This should be fixed by TypeStrong/ts-loader#715

[johnnyreilly]

Excellent work @sheetalkamat - thanks so much! I'll take a look at this tonight and report back

[johnnyreilly]

Both the issues reported here are resolved - thanks so much! I've released a new version of ts-loader this morning that includes the fixes. I'll keep testing with more complex projects and report back if any other issues occur.

https://github.com/TypeStrong/ts-loader/releases/tag/v3.3.1