fork-ts-checker-webpack-plugin crashes with "Invalid source file:"

[jonathaningram]

Originally wrongly reported here: #238 (comment)

Is this a bug report?

Yes. Edit: I originally thought this was a cra-ts bug, but it appeared that I had a bad tsconfig.json file.

Can you also reproduce the problem with npm 4.x?

Using yarn not npm.

Environment

1. npm ls react-scripts-ts: react-scripts-ts@2.13.0
2. node -v: v9.4.0
3. npm -v: 5.6.0 (don't use npm though)
4. yarn --version: 1.3.2

Steps to Reproduce

1. Can be reproduced with https://github.com/govau/cloud.gov.au/tree/cra-ts-fail/www/ui
2. Directly in that folder you can run yarn install and then yarn start.
3. Open up a src file like App.tsx. Press save in your editor and watch it crash.

Compiling...
/Users/me/my-app/www/ui/node_modules/fork-ts-checker-webpack-plugin/lib/service.js:22
        throw error;
        ^

FatalError: 
Invalid source file: /Users/me/my-app/www/ui/src/twirp.ts. Ensure that the files supplied to lint have a .ts, .tsx, .d.ts, .js or .jsx extension.
                
    at new FatalError (/Users/me/my-app/www/ui/node_modules/tslint/lib/error.js:27:28)
    at Linter.getSourceFile (/Users/me/my-app/www/ui/node_modules/tslint/lib/linter.js:222:23)
    at Linter.lint (/Users/me/my-app/www/ui/node_modules/tslint/lib/linter.js:96:31)
    at /Users/me/my-app/www/ui/node_modules/fork-ts-checker-webpack-plugin/lib/IncrementalChecker.js:142:30
    at WorkSet.forEach (/Users/me/my-app/www/ui/node_modules/fork-ts-checker-webpack-plugin/lib/WorkSet.js:17:13)
    at IncrementalChecker.getLints (/Users/me/my-app/www/ui/node_modules/fork-ts-checker-webpack-plugin/lib/IncrementalChecker.js:139:17)
    at run (/Users/me/my-app/www/ui/node_modules/fork-ts-checker-webpack-plugin/lib/service.js:15:29)
    at process.<anonymous> (/Users/me/my-app/www/ui/node_modules/fork-ts-checker-webpack-plugin/lib/service.js:38:5)
    at process.emit (events.js:160:13)
    at emit (internal/child_process.js:790:12)

After the first load, this happens every time I save a file and the app tries to reload.

I've tried react-scripts-ts@2.8.0 and that version does not have this issue.

Any ideas?

[DorianGrey]

The fork-ts-checker-webpack-plugin was introduced after 2.8.0, so that's normal.

I've tracked this down a bit, and figured out that the files from the src directory are not tracked as included in the typescript program instance shared between the type checker and the linter:

File to lint: /home/linne/Projects/cloud.gov.au/www/ui/src/App.tsx
Attempting to load file: /home/linne/Projects/cloud.gov.au/www/ui/src/App.tsx
Source files from program: [ '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.dom.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es5.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.reflect.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.proxy.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.iterable.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.symbol.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.promise.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.generator.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.collection.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/typescript/lib/lib.es2015.core.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/typings/index.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/history/DOMUtils.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/history/createBrowserHistory.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/history/createHashHistory.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/history/createMemoryHistory.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/history/LocationUtils.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/history/PathUtils.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/history/index.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/jest/index.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/node/inspector.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/node/index.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/react/global.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/react/index.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/react-dom/index.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/react-helmet/index.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/react-router/index.d.ts',
  '/home/linne/Projects/cloud.gov.au/www/ui/node_modules/@types/react-router-dom/index.d.ts' ]
/home/linne/Projects/cloud.gov.au/www/ui/node_modules/fork-ts-checker-webpack-plugin/lib/service.js:22
        throw error;
        ^

FatalError: 
Invalid source file: /home/linne/Projects/cloud.gov.au/www/ui/src/App.tsx. Ensure that the files supplied to lint have a .ts, .tsx, .d.ts, .js or .jsx extension.

Taking a look at your tsconfig.json, this seems to work as intended:
https://github.com/govau/cloud.gov.au/blob/da110639778b5bf6257e3197ef2e4165df4837ba/www/ui/tsconfig.json#L31-L33
You've explicitly listed typings/index.d.ts as the only file included in your project. Everything other file is just added due to a direct or transitive dependency to it. Don't suppose this was your intention, though.

I was able to fix this issue with the following steps:

• Replace the files config option with:

  "include": [
    "typings/index.d.ts",
    "src/**/*"
  ]

• Install @types/react-test-renderer, since that package is currently absent.

The reason this issue did not raise before is that this plugin utilizes the ts.Program instance directly, which strictly adheres to the provided tsconfig.json.

[jonathaningram]

@DorianGrey wow thank you, you're awesome. Do you think there's any way to alleviate this kind of thing in the future for other people or does it just come down to a silly configuration file on my part?

[DorianGrey]

I fear it's the latter one. The typescript docs explicitly mention that the files entry has to contain every file that is intended to be part of the project. The only reason that things worked before was that this config entry is not taken into account in every part of the build, esp. in the webpack part, which uses a separate include/exclude mechanism.
I.e.: Your config was wrong since you've added the files entry, but it did not cause any problems because no part of the chain took care of it.

[pavanpodila]

I have tried all of the approaches above and it still keeps failing for every file save!

[brunolemos]

I'm having the same issue, but the cause is different.

My include is correct.
After some investigation, it seems to be because I'm using symlinks and, It every time I save a file, ForkTsCheckerWebpackPlugin tries to check the file twice -- the symlinked one and the normal one. It works for the first it gets, for the second it gives the exception.

Added console.log on Linter.prototype.getSourceFile from node_modules/tslint/lib/linter.js:

[linter][filename] web/src/my-symlink-folder/src/screens/LoginScreen.tsx
[linter][filename] src/screens/LoginScreen.tsx [ERROR]

Workaround: I disabled ForkTsCheckerWebpackPlugin for now so I can edit the files without having to restart the server.

[CodeJjang]

+1
I also suffer from this and nothing works. Have to reload server on every new file. :/

[stnwk]

Having

  "include": [
    "src/**/*"
  ]

and

    new ForkTsCheckerWebpackPlugin({
      // other options
	  watch: false // <- fix
    }),

did the trick for me!

[joshpcausey]

I had this same issue. I made a pull request of what fixed the issue for me. TypeStrong/fork-ts-checker-webpack-plugin#127

[copiali]

@joshpcausey could you please also create a PR to update the fork-ts-checker-webpack-plugin version for react-script-ts?

[mnemanja]

Hi guys, any update on this?
@copiali, @joshpcausey?