Fork-ts-checker-webpack-plugin: Type checking for node_modules

[maksimsemenov]

I'm seeing a whole bunch of errors related to node_modules directory, like so:

ERROR in /Users/maksim/Documents/Elation/pumma/node_modules/typescript/lib/lib.dom.d.ts(15791,13):
TS2403: Subsequent variable declarations must have the same type.Variable 'onerror' must be of type '(this: DedicatedWorkerGlobalScope, ev: ErrorEvent) => any', but here has type 'ErrorEventHandler'.

ERROR in /Users/maksim/Documents/Elation/pumma/node_modules/typescript/lib/lib.dom.d.ts(15883,13):
TS2403: Subsequent variable declarations must have the same type.Variable 'self' must be of type 'WorkerGlobalScope', but here has type 'Window'.

ERROR in /Users/maksim/Documents/Elation/pumma/node_modules/typescript/lib/lib.dom.d.ts(15962,6):
TS2300: Duplicate identifier 'FormDataEntryValue'.

ERROR in /Users/maksim/Documents/Elation/pumma/node_modules/typescript/lib/lib.webworker.d.ts(1787,6):
TS2300: Duplicate identifier 'RequestMode'.

...

My webpack config:

module.exports = {
  context: __dirname,
  ...
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$$/,
        use: [
          babelLoader,
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    modules: [path.resolve(__dirname, './src'), 'node_modules'],
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin(),
    ...
  ],
}

My tsconfig.json:

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    ...
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

I read through #116, but none of the recipes mentioned there worked for me.

Are there any other config options or any other details that I'm missing?

[crazyx13th]

same here, got a lot of errors... THX!

this.plugins.push(new ForkTsCheckerWebpackPlugin({
    tsconfig: 'tsconfig.compiler.json',
    watch: 'src',
    async: false
}));

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "jsx": "react",
        "lib": [
            "es2015.promise",
            "es5",
            "dom"
        ],
        "module": "esnext",
        "moduleResolution": "node",
        "outDir": "dist",
        "removeComments": true,
        "sourceMap": true,
        "strict": true,
        "strictNullChecks": false,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types",
            "src/data/@types",
            "src-pre/tsapp/@types"
        ]
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
    "files": [
        "src/preloader/preloader.ts"
    ]
}

ERROR in C:/workspace/Web-App/node_modules/@material-ui/core/styles/MuiThemeProvider.d.ts
ERROR in C:/workspace/Web-App/node_modules/@material-ui/core/styles/MuiThemeProvider.d.ts(13,19):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/@material-ui/core/styles/MuiThemeProvider.d.ts
ERROR in C:/workspace/Web-App/node_modules/@material-ui/core/styles/MuiThemeProvider.d.ts(13,38):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts
ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts(729,34):
TS2304: Cannot find name 'Set'.

ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts
ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts(931,26):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts
ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts(934,31):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts
ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts(935,26):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts
ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts(937,23):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts
ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts(947,34):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts
ERROR in C:/workspace/Web-App/node_modules/@types/webpack/index.d.ts(948,34):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/mobx/lib/api/observable.d.ts
ERROR in C:/workspace/Web-App/node_modules/mobx/lib/api/observable.d.ts(25,31):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts
ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts(33,107):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts
ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts(34,65):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts
ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts(45,13):
TS2339: Property 'toStringTag' does not exist on type 'SymbolConstructor'.

ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts
ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts(59,50):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts
ERROR in C:/workspace/Web-App/node_modules/mobx/lib/types/observablemap.d.ts(75,13):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/tslint/lib/configuration.d.ts
ERROR in C:/workspace/Web-App/node_modules/tslint/lib/configuration.d.ts(18,14):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/tslint/lib/configuration.d.ts
ERROR in C:/workspace/Web-App/node_modules/tslint/lib/configuration.d.ts(32,12):
TS2304: Cannot find name 'Map'.

ERROR in C:/workspace/Web-App/node_modules/tslint/lib/configuration.d.ts
ERROR in C:/workspace/Web-App/node_modules/tslint/lib/configuration.d.ts(121,63):
TS2304: Cannot find name 'Map'.

[zeusLeeJh]

Unfortunately, I also have the same problem.

[maksimsemenov]

For me, the solution was to add skipLibCheck: true to tsconfig.json

[johnnyreilly]

Thanks so much for sharing that @maksimsemenov - I wonder if it would be worth making skipLibCheck: true on by default with fork-ts-checker-webpack-plugin?

Some background; there are 2 compiler flags on by default with ts-loader:

    skipLibCheck: true,
    suppressOutputPathCheck: true

https://github.com/TypeStrong/ts-loader/blob/002c0f651cf1a8e27b0e232b7fe4a982ddce6323/src/compilerSetup.ts#L57

If values are supplied for these properties in the tsconfig.json than the supplied values are the ones that that will be used; otherwise it's skipLibCheck: true by default (for performance reasons) and suppressOutputPathCheck: true (because https://github.com/Microsoft/TypeScript/issues/7363 ).

For me it would make sense to apply the same defaults to fork-ts-checker-webpack-plugin; for 2 reasons:

1. If people are using ts-loader alone, and they then move to plug fork-ts-checker-webpack-plugin into their build they may bump on these errors. Let's give people an easy on-ramp :smile:

2. These are good defaults for the reasons given.

I'd be totally up for making those changes. @piotr-oles what do you think?

[michalpuskel]

Hello, please help!

reportFiles option is buggy

I can't set skipLibCheck: true because I need to check d.ts files in src/*/
Actually there is option for ForkTsCheckerWebpackPlugin reportFiles.

But this is absolutelly not working for me.
I tried all possible settings like:

reportFiles: ['src/**/*']
reportFiles: ['/src/**/*']
reportFiles: ['!node_modules']
...

new ForkTsCheckerWebpackPlugin({
            tsconfig: resolve(__dirname, './tsconfig.json'),
            reportFiles: [`!${resolve(__dirname, 'node_modules/**/*')}`],
}),

I either end up with no checking, yet I know TS erros are there,
or node_modules d.ts files are chekced which is unacceptable.

(though I don't use ts-loader, I use babel-loader, but nwm)

Anyone same problem?

[phryneas]

@michalpuskel reportFiles is just about the information that is output in the end - the files will be typechecked before anyways. If you want to exclude them from that, you'll have to use the exclude option in your tsconfig.json. Also, you might try useTypescriptIncrementalApi: true vs useTypescriptIncrementalApi: false (if there's a difference, please report it!)

Also, for reportFiles, we're using micromatch internally, so you can check your globs with their documentation, maybe that helps.

[michalpuskel]

@michalpuskel reportFiles is just about the information that is output in the end - the files will be typechecked before anyways. If you want to exclude them from that, you'll have to use the exclude option in your tsconfig.json. Also, you might try useTypescriptIncrementalApi: true vs useTypescriptIncrementalApi: false (if there's a difference, please report it!)

Also, for reportFiles, we're using micromatch internally, so you can check your globs with their documentation, maybe that helps.

@phryneas Thank you for quick response, though so far I couldn't solve it.

I tried settings in tsconfig.json before aswell (variations of include and exclude or both)

tsconfig.json

{
  "compilerOptions": {
    ...
    "skipLibCheck": false
  },
  "exclude": ["dist", "node_modules"]
}

webpack.config.js

...
const { resolve } = require('path');
...
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
...

...
const removeEmpty = array => array.filter(i => !!i);
...

module.exports = {
    ...
    plugins: removeEmpty([
        ...
        new ForkTsCheckerWebpackPlugin({
            tsconfig: resolve(__dirname, './tsconfig.json'),
            checkSyntacticErrors: true,
            reportFiles: [`!${resolve(__dirname, 'node_modules/**/*')}`],
            // reportFiles: ['src/**/*'],
            compilerOptions: { exclude: ['dist', 'node_modules'] },
            useTypescriptIncrementalApi: false,
        }),
       ...

useTypescriptIncrementalApi true / false makes no difference for me

maybe is it problem with micromatch - I use it bad way

reportFiles: ['src/**/*'],
reportFiles: ['./src/**/*'],
reportFiles: ['/src/**/*'],

options above output nothing, no error in console

I want this (but with no node_modules):

When I will solve it, I definitely report it here, though so far no success, thanks anyway

[phryneas]

We are matching the relative path, so something like ./node_modules/react-codemirror2.
You try to match the absolute path against that in your example - that cannot work.

Something like !node_modules, !/node_modules/, !**/node_modules/** could work - you'll have to try that, I never use that feature myself and I don't have a reproduction project for that.

[michalpuskel]

We are matching the relative path, so something like ./node_modules/react-codemirror2.
You try to match the absolute path against that in your example - that cannot work.

Something like !node_modules, !/node_modules/, !**/node_modules/** could work - you'll have to try that, I never use that feature myself and I don't have a reproduction project for that.

SOLVED

Thank you @phryneas !

so final config:

tsconfig.json

{
  ...
  "exclude": ["dist", "node_modules"]
}

skipLibCheck is omitted, so its default false is okay

webpack.config.js

...
        new ForkTsCheckerWebpackPlugin({
            async: !env.prod,
            useTypescriptIncrementalApi: true,
            tsconfig: resolve(__dirname, './tsconfig.json'),
            checkSyntacticErrors: true,
            reportFiles: ['**', '!**/__tests__/**', '!**/?(*.)(spec|test).*'],
            silent: true,
        }),
...

And it works like charm, thanks a lot for support :)

[piotr-oles]

@maksimsemenov , @crazyx13th , @zeusLeeJh , @michalpuskel
Please try fork-ts-checker-webpack-plugin@alpha - I've published a new version which sets skipLibCheck and skipDefaultLibCheck to true 🚀
I will close this issue to clean-up the backlog :)

[Anupheaus]

Still occurring for me, I got alpha version too but still complaining about a node_modules package. Here is my config:

tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "react",
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "typeRoots": [
      "typings",
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src"
  ]
}

webpack config:

{
  name: 'web',
  target: 'web',
  entry: './src/index.tsx',
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'ts-loader',
      include: path.resolve(__dirname, './src'),
      exclude: /node_modules/,
      options: {
        onlyCompileBundledFiles: true,
        transpileOnly: !isProduction,
        compilerOptions: {
          noEmit: false,
        },
      },
    }],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js'],
    symlinks: false,
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'build'),
    pathinfo: false,
  },
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all',
        },
      },
    },
  },
  plugins: [
    ...(isProduction
      ? []
      : [
        new ForkTsCheckerWebpackPlugin({ eslint: { files: './src/**/*.{ts,tsx}' } }),
        new ForkTsCheckerNotifierWebpackPlugin({ title: 'TypeScript', excludeWarnings: true }),
        new ProgressBarPlugin(),
      ]),
    new CopyWebpackPlugin({
      patterns: [
        { from: './public', to: './' },
      ]
    }),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(dotenv.parsed),
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'build'),
    compress: true,
    port: 3000,
    host: '0.0.0.0',
    disableHostCheck: true,
    historyApiFallback: true,
  },
  stats: {
    assets: false,
    builtAt: true,
    cached: false,
    cachedAssets: false,
    children: false,
    chunks: false,
    chunkGroups: false,
    chunkModules: false,
    chunkOrigins: false,
    colors: true,
    depth: false,
    entrypoints: false,
    env: false,
    errors: true,
    errorDetails: true,
    hash: false,
    logging: 'error',
    modules: false,
    outputPath: false,
    performance: true,
    providedExports: false,
    publicPath: false,
    reasons: false,
    source: false,
    timings: true,
    usedExports: false,
    version: false,
    warnings: true,
  },
}

Here is one of the errors I'm getting:

ERROR in node_modules/jodit/src/modules/toolbar/collection/editor-collection.ts:20:14
TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
    18 | 
    19 | @component
  > 20 | export class ToolbarEditorCollection extends ToolbarCollection<IJodit> {
       |              ^^^^^^^^^^^^^^^^^^^^^^^
    21 |        /** @override */
    22 |        className(): string {
    23 |                return 'ToolbarEditorCollection';

[piotr-oles]

Could you create a reproduction repository?