Ts-loader: `typescript` v2.1.4 doesn't like empty `files` in config

[danfuzz]

Line 49 of config.ts runs afoul of the tsconfig checker in v2.1.4 of the TypeScript compiler:

typescript configFile = { config: { compilerOptions: {}, files: [], // <-------------- THIS LINE }, };
https://github.com/TypeStrong/ts-loader/blob/master/src/config.ts#L49

In my project (https://github.com/danfuzz/quillex), I'm getting the error "error TS18002: The 'files' list in config file 'tsconfig.json' is empty." which I've tracked back to this. (Note: I currently work around this by pointing my project at an older version of typescript.)

If I add a dummy entry to the files list, then typescript stops complaining, and things seem to work as expected, e.g.:

typescript configFile = { config: { compilerOptions: {}, files: ['i-really-hope-you-dont-have-a-file-with-this-name'], }, };

I don't know if this is the best solution to the problem, nor if it causes some other problem that I just haven't noticed yet. For the record, totally removing the files binding causes a different error ("error TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["*/"]' and 'exclude' paths were '["node_modules","bower_components","jspm_packages"]'.").

typescript has an explicit error code and message for a specified-but-empty files list, so I'm guessing the change in behavior is intentional.

[danfuzz]

Here's the salient part of the stacktrace where the error is thrown:

    at getFileNames (.../node_modules/typescript/lib/typescript.js:64355:41)
    at Object.parseJsonConfigFileContent (.../node_modules/typescript/lib/typescript.js:64304:18)
    at Object.getConfigParseResult (.../node_modules/ts-loader/dist/config.js:70:38)
    at Object.ensureTypeScriptInstance (.../node_modules/ts-loader/dist/instances.js:33:36)
    at Object.loader (.../node_modules/ts-loader/dist/index.js:17:24)

[johnnyreilly]

Hi @danfuzz,

Thanks for posting details of your workaround. That's interesting. That said; there's nothing really that we can usefully do about this - this is the behaviour of the TypeScript compiler as intended (and this is intended - raised an issue with team and had it confirmed)

[danfuzz]

I assume "nothing to do about this" doesn't actually mean that ts-loader will be left broken forever. Is my — admittedly gross — hack pretty much the best that can be done?

[johnnyreilly]

https://github.com/Microsoft/TypeScript/issues/11834

[johnnyreilly]

Well you can stay on TypeScript 2.0 but yes that's pretty much it I'm afraid. Ts-loader works on top of TypeScript and we don't intend to implement different behaviour than the compiler for the most part

[johnnyreilly]

(not because we want to be difficult but that way pain lies - if not immediately then soon)

[danfuzz]

(Yeah I get that. I'm not interested in pegging the project to an old version of the compiler.)

I think I'm confused, then. I don't think I'm using ts-loader in an unusual way; that is, I don't get what I'm doing that's different than other users of ts-loader. Like, what should I be doing differently if I want to use TS 2.1?

FWIW, here's where I config ts-loader in my code: https://github.com/danfuzz/quillex/blob/master/server/ClientBundle.js#L93

[danfuzz]

In any case, thanks for the replies and the info.

[johnnyreilly]

No problem. For what it's worth it's totally normal to not specify files at all. See this example: https://github.com/johnnyreilly/proverb-signalr-react/blob/master/tsconfig.json

[danfuzz]

Just as a coda on this: I figured out what the salient difference is between my situation and other projects'. I'd be surprised if I'm the only one who runs into this, so if nothing else the following can serve as a heads-up.

My project is using TS because it includes the module parchment https://github.com/quilljs/parchment, which is written in TS. Parchment is distributed via npm as a prebuilt JS bundle (built using Webpack) and _also_ includes the original .ts files, but it _doesn't_ include a tsconfig.json file in the npm package. I'm choosing to compile the .ts files (and not use the bundle) because I don't want to have a double layer of Webpack loaders (that is, I'm making my own unified bundle of all the client code). That's why I'm using ts-loader.

So, what ts-loader is getting pointed at is a .ts file which doesn't have a tsconfig.json anywhere around it. This means the getConfigFile() call in ts-loader/config.ts ends up falling through and returning that default one with an empty files list. And it looks to me like _any_ time that that happens, the subsequent attempt to run compilation will fail.

What I can do to work around the problem is add a new tsconfig.json file as a peer to the node_modules directory where parchment lands. (I could also drop one in the parchment directory, but if I do that, I'd no longer be using a pristine package from the npm registry.)

[johnnyreilly]

FWIW - it's not advised to ship TS in node_modules - ts-loader actually warns about this now: https://github.com/TypeStrong/ts-loader/pull/399

[danfuzz]

Huh, well that's a bummer too, because ideally I'd love to keep referring to parchment via npm and not have to e.g. pull in its git repo.

[danfuzz]

Actually it's even worse: I don't use parchment directly. I use it because it's a dependency of quill (which _isn't_ written in TS). So, if I have to stop getting Parchment from npm I also have to stop getting Quill from npm (or hand-patch its dependencies somehow).

[danfuzz]

I'm saying the above by way of advocacy: I actively _like_ the fact that Parchment gives me a choice of whether or not to use the TS source, while still using npm.

[johnnyreilly]

The context can found here btw: https://github.com/Microsoft/TypeScript/issues/12358

[m1neral]

I got same error "error TS18002: The 'files' list in config file 'tsconfig.json' is empty.", but then I moved ts: {} section into tsconfig.json, build slowed in 4 times!

[xtianus79]

@johnnyreilly this is an issue and very unclear as to what is going on. Why is this closed?

[m1neral]

@xtianus79 Move your ts property in the tsconfig.json file. Do not forget add rule that typechecker scan only the files you want (bundled files): enough add your webpack entry point (or one of them) to includes or files or use the hack exclude: '*'. Good luck.

[xtianus79]

@m1neral what do you mean exactly move the ts: {} into tsconfig.json ???

[aindlq]

I've just stumbled into this error as well, and reason was actually quite different. I passed full path to configFileName property, but it actually takes a name of the file. ts-loader applies tsconfig search logic similar to tsc. Funny thing that it worked quite well on linux and mac, but failed on windows.

[xtianus79]

for me, with Upgrading to Angular 4 fixed the issue.

[himStone]

@aindlq

any solution? My problem seems to be same as yours. only Windows failed

[aindlq]

@bccsafe the solution for me was to not pass configFileName at all, if it is named tsconfig.json plugin will find it

[only-cliches]

Just ran into this issue and found a solution.

My loaders section in webpack looked like this:

        loaders: [{
                test: /\.ts$|\.tsx$/,
                loader: 'ts-loader',
                options: {
                    configFile: "./tsconfig.server.json"
                }
            },
            {
                test: /\.ejs$/,
                loader: 'ejs-loader'
            }
        ]

Turns out the ./ in the path to the configFile was the issue.

The correct config looks like this:

        loaders: [{
                test: /\.ts$|\.tsx$/,
                loader: 'ts-loader',
                options: {
                    configFile: "tsconfig.server.json"
                }
            },
            {
                test: /\.ejs$/,
                loader: 'ejs-loader'
            }
        ]

[johnnyreilly]

Thanks for sharing!

[gonzofish]

@ClickSimply thank you for saving me hours of heartache!

[univerio]

I ran into the same, but in my case my tsconfig.json was in a different directory than the project root, so while a relative path doesn't work:

{
  test: /\.tsx?$/,
  loader: "ts-loader",
  options: {
    configFile: "./foo/tsconfig.json"
  }
}

an absolute path works just fine:

{
  test: /\.tsx?$/,
  loader: "ts-loader",
  options: {
    configFile: path.resolve(__dirname, "foo", "tsconfig.json")
  }
}

[danfuzz]

BTW the underlying TS issue was just closed as "fixed," and looks like it will be released with TS 3.0: https://github.com/Microsoft/TypeScript/issues/12762#issuecomment-379014472

[a-x-]

I even had a typo in config file name.

Please, make this error more informative!
Really, what the files, if config file even does not exist.

[Volmarg]

So i had the same issue, but actually non of the solutions were working. Spent couple hours on fixing it.
So my case:

Symfony 4.4 + Webpack-encore

1. Install ts-loader: npm install --save-dev [email protected]
2. Create tsconfig.json in the same dir where webpack.config.js is. In my case root ./
3. Add in webpack.config.js
Encore <other stuff> .enableTypeScriptLoader(function (typeScriptConfigOptions) { typeScriptConfigOptions.transpileOnly = true; typeScriptConfigOptions.configFile = 'tsconfig.json'; })
4. Add in tsconfig.js
{ "compilerOptions": { "target": "es5" }, "include": [ "src/assets/scripts/validators/forms.ts" ], "exclude": [] }

On the moment of writing this i only know how to include single files, there must be way to add scan of dir but for now it's ok`

Tip

• some ppl recommend to change the entry file to .ts, but .js is working also for me
  Encore .addEntry('app', './src/app.js')

[newdaveespionage]

I've just stumbled into this error as well, and reason was actually quite different. I passed full path to configFileName property, but it actually takes a name of the file. ts-loader applies tsconfig search logic similar to tsc. Funny thing that it worked quite well on linux and mac, but failed on windows.

Eons ago now, but this was the issue I encountered, difference being that I had in my webpack.config.js

            options: {
              configFile: './tsconfig.build.json',
            },

When what ts-loader wanted was

            options: {
              configFile: 'tsconfig.build.json',
            },

[joshverd]

I fixed this issue by adding __dirname before the config file's name:

        options: {
          configFile: __dirname + '/src/react.tsconfig.json',
        },

[lpender]

I ultimately solved this only by upgrading to webpack 5