Ts-loader: When using `checkJs` compiler option, JS files inside node_modules are also checked, potentially breaking the build

[GAumala]

Expected Behaviour

If in my tsconfig.json file I use the checkJs option, only the JS files of my project should be checked. The files inside node_modules should be ignored.

Actual Behaviour

Every JS file imported into the project is being checked, even some in node_modules.

Steps to Reproduce the Problem

Configure ts-loader to process both JavaScript and TypeScript files. in tsconfig.json set options allowJs and checkJs. Use a JavaScript file as entry point and import any module from npm that might have type errors. In my case I use phaser-ce.

Location of a Minimal Repository that Demonstrates the Issue.

https://github.com/GAumala/phaser-ts-webpack-example

Here is a repo with the minimum configuration to use the Phaser game framework with Webpack and TypeScript. I add the phaser files to Webpack using the script-loader, but I want have some basic type checking in my JS files and eventually write some TypeScript modules, so I added ts-loader and set the options allowJs and checkJs in my tsconfig.json. The problem is that phaser was never written to be modular so internally it depends on a bunch of global variables. Even though in my Webpack and TS config files I specify to ignore the node_modules dir, these Phaser files are still type checked. Since TypeScript doesn't know anything about these global variables my build fails.

In that repo, if I run yarn tsc it compiles without any issues. However, if I run yarn webpack the build fails due to type errors in the 3 Phaser files that are part of the bundle. Can somebody please help me find a way to avoid type checking files inside node_modules?

[KnisterPeter]

@GAumala Does it help if you add this to your tsconfig.json?

"exclude": [
  "node_modules"
]

[GAumala]

It seems like that setting is not enough, because tsconfig.json already excludes node_modules.

[gnaeus]

Any news on this? I have the same issue with @fortawesome/react-fontawesome NPM package.

[emmiep]

For me it actually checks the dist directory as well, so I get errors about WebPack's output code.

edit: the exclude option in tsconfig.json actually fixed this, I only didn't know how to use it correctly.

[meldron]

I have to same problem with
tsconfig.json

"exclude": [
  "node_modules"
]

and
webpack.config.js

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

[johnnyreilly]

Does "skipLibCheck": true help at all?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tysonmatanich]

I'm encountering this as well. Chiming in since the stale bot marked it as won't fix.

[johnnyreilly]

I've marked it as pinned so it won't get closed. Help appreciated!

[markerikson]

Seeing something similar to this myself. I'm trying to set up TS for the first time, on a sizeable existing legacy JS project. I've got a working tsconfig.json and @babel/preset-typescript in place, and those have sufficed to give me VS Code typechecking. I'm now trying to add ts-loader.

If I have allowJS and checkJs set to true:

• with onlyCompileBundledFiles set to true: then ts-loader appears to process _everything_ that Webpack pulls into the bundle, even if it doesn't match the exclusions set on the Webpack loader.
• with onlyCompileBundledFiles set to false: ts-loader tries to process every JS file it can find from the root of the project, including other assorted output bundles that exist on disk

If I set those to false, then ts-loader only processes the few files I've actually converted to TS so far.

[johnnyreilly]

Does this mean you have a working setup @markerikson?

I'd also be interested to know if the problem presents when using ts-loader in transpileOnly mode with fork-ts-checker-webpack-plugin in play...

[markerikson]

Uh... define "working"? :) In the sense of "the loader actually does what I want", or in the sense of "demonstrates the wrong behavior described in this issue"?

Ideally, what I want is that TS would do edit-time (in my IDE) and build-time (via Webpack) typechecking of only my app's actual source files (TS and JS). I _don't_ want it to do typechecking of:

• 3rd-party libs from node_modules that are used in the app
• vendored 3rd-party libs that are used in the app
• Other JS files in the root folder, such as pre-built Webpack DLL bundles, build artifacts, and other scripts

[johnnyreilly]

Uh... define "working"? :) In the sense of "the loader actually does what I want", or in the sense of "demonstrates the wrong behavior described in this issue"?

Cool - I misread your original post 😄

It sounds like there's still an issue. Out of curiosity did you test out the https://github.com/Realytics/fork-ts-checker-webpack-plugin approach as suggested? You can see a setup that uses this here: https://github.com/TypeStrong/ts-loader/tree/master/examples/fork-ts-checker-webpack-plugin

[markerikson]

Yeah, the fork-checker seems to demonstrate basically the same behavior I'm seeing with ts-loader - given various settings, it either tries to read every JS file that exists anywhere in the app folder regardless of whether it's being used, or it limits itself to what's in the bundle but still including stuff I don't want it checking.

[johnnyreilly]

hmmmm... If you run tsc alone in your folder do you see the same behaviour? I'm curious to know whether ts-loader / fork-ts-checker-webpack-plugin is deviating from what tsc does....

I suspect behaviour could be tweak here to get the behaviour you're after BTW:

https://github.com/TypeStrong/ts-loader/blob/4354cf834441126edb1588725625cf44a6aad96f/src/after-compile.ts#L180-L188

[johnnyreilly]

Also, have you tried setting "skipLibCheck": true in your tsconfig.json? That may help

[GAumala]

Hi everyone! It's been over a year since I filed this issue and I don't currently work with TypeScript or webpack, but because this issue got lots of activity recently I decided to check my original sample repo (https://github.com/GAumala/phaser-ts-webpack-example) once again and here's what I found:

1. "skipLibCheck": true inside tsconfig.json's compilerOptions doesn't help at all.
2. If I upgrade Typescript from 2.6.2 to 3.3.1, I notice that watch mode has drastically improved so running that in a new terminal checks errors in JS and TS files with a far more readable output.

What I would do nowadays is configure ts-loader to only process TS files. Then, run tsc --watch --noEmit in one terminal and webpack-dev-server --open in another one. The first process reports errors while the second builds the app. Here's a screenshot:

Personally I think that checking JS errors should not ts-loader's business.You can already do that by running tsc, which is already declared as a peer dependency. Sticking to processing TS files exclusively is good enough. If everyone agrees I think we can close this issue.

[appzuka]

I investigated the original repo and believe I have a resolution. This may also be a resolution for others who have reported that the exclude option does not seem to be working.

Here are my steps to get the original repo working:

Clone https://github.com/GAumala/phaser-ts-webpack-example

yarn install
yarn add [email protected]
yarn webpack

The problem still exists. I can resolve it with the following changes to tsconfig.json:

    "moduleResolution": "node",
    "baseUrl": "./", // This must be specified if "paths" is.
    "paths": {
        "p2": ["./node_modules/phaser-ce/build/custom/p2.js"],
        "pixi.js": ["./node_modules/phaser-ce/build/custom/pixi.js"],
        "phaser": ["./node_modules/phaser-ce/build/custom/phaser-split.js"],
    },

Now if I build using yarn webpack it works as expected and obeys the exclude setting on the rule for js files.

If you change moduleResolution to "classic" the same errors occur when you run npx tsc. I don't believe ts-loader or webpack are ignoring the exclude option. Only the base file src/index.js is processed by typescript but with classic module resolution or incorrect paths typescript processes the imported js files as part of the base run.

It seems that something changed in typescript between 3.0.3 and 3.1 as a minimum version of 3.1 is needed to make this work.

If others see this problem make sure you are using version 3.1 or higher of typescript and set the module resolution paths in tsconfig.json. You can also remove the resolve.alias setting in webpack.config.js if you use tsconfig-paths-webpack-plugin.

[GAumala]

I tested @appzuka's solution and it works pretty well. Thanks.
Just to be clear, the lines added to tsconfig.jsonhave to be inside compilerOptions.