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

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?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 19 (8 by maintainers)

Most upvoted comments

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.

GAumala on Jun 17, 2020

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 typescript@3.1
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.

appzuka on Jun 16, 2020

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.

emmiep on Jun 13, 2018