Solvedfork ts checker webpack plugin Type checking for node_modules

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?

13 Answers

✔️Accepted Answer

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

Other Answers:

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 microsoft/TypeScript#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 😄

  2. These are good defaults for the reasons given.

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

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 :)

Related Issues:

42
fork ts checker webpack plugin Type checking for node_modules
For me the solution was to add skipLibCheck: true to tsconfig.json I'm seeing a whole bunch of error...
425
babel eslint ESLint: 2.10.0 - Parsing error: Unexpected token =
parser: babel-eslint is OK! I'm using: and getting the following error: Parsing error: Unexpected to...
391
javascript How to configure React Native (Expo) project to use AirBnB's React rules via ESLint?
This is what I do in React and React Native: Step 1 Step 2 Backup your eslintrc file in case you wan...
277
eslint Unexpected block statement surrounding arrow body arrow-body-style
If you wrap the object in parentheses it will parse correctly and the rule won't error: ...
194
eslint plugin react error Parsing error: Unexpected token <
Seems your problem come from here By doing this you are always installing the latest ESLint release ...
186
babel eslint Cannot read property 'range' of null
See: #530 What worked for me in .eslintrc: In my index.js with the error and I use Decorator before ...
139
javascript Using 'ForInStatement' is not allowed (no-restricted-syntax)
@francoisromain Object.assign(options opts) Since version 8 there is this error on for in loops What...
131
babel eslint Please use export @dec class instead
You can use the old decorators proposal: I am getting this error using 8.2.2 Using the export keywor...
115
eslint plugin react Missing prop validation in React.FunctionComponent
Support or ignore prop-types in mixed JS/TypeScript projects Tell us about your environment ESLint V...
107
eslint plugin import [import/extensions] 2.20.0 still shows errors for importing TS files from JS files without an extension
Nevermind This is the same error I was getting on 2.19.1 (as seen in #1558) The error does not appea...
106
eslint config standard Error: Cannot find module 'eslint-config-standard'
@FNGR2911 I know the reason now because the es-lint I implemented is global installed so it looks fo...
96
eslint plugin vue script-indent make me crazy!!!!!!!
If you are using webstorm you can File => Setting => Editor => Code Style => HTML add Do not indent ...
95
javascript Why no setState in componentDidMount?
As the docs state that they belong in componentDidMount: If you want to integrate with other JavaScr...
88
eslint plugin vue vue/script-indent 配置问题
@wengpengfeijava 改一下webstorm规则就好了, File => Setting => Editor => Code Style => HTML 找到 add Do not ind...
86
eslint config wesbos Project dependency tree issue with react-scripts eslint version
Now that ESLint 7 is out something similar is happening: Just tried this on a clean CRA install ...
84
eslint plugin jsx a11y Form label must have associated control on compliant markup
@skirankumar7 I ran into this issue as well here's what my eslintrc.json looks like after I got it w...
82
eslint Arrow functions: "Parsing error: unexpected token ="
You should add babel-eslint as parser. Tell us about your environment ESLint Version: 4.19.1 Node Ve...
81
eslint require-atomic-updates false positive
I would say that if nothing else error message is pretty misleading That is simply not true ...
79
eslint "Cannot read property 'type' of undefined" after upgrading to 4.14.0
I apology for the inconvenience We have found a bug in babel-eslint's new logic that I added ...
79
eslint plugin vue Wrong detect of Parsing error: invalid-first-character-of-tag-name in expression.
This is still a thing and it is absurd The contents of {{ }} is executed as a JavaScript expression ...
72
babel eslint TypeError: Cannot read property 'range' of null from template-curly-spacing
I managed to fix this problem for myself; our company's internal ESLint config defined parser: babel...
72
eslint plugin vue Message: Use the latest vue-eslint-parser
@lincenying Ah I see Thank you for your investigation Yes Tried to use the eslint-plugin-vue@beta ...
71
javascript .jsx extension cannot be used with React Native
@borisyankov what's common isn't the primary motivator for this guide it's what we use at Airbnb We ...
69
lint staged Build typescript on commit
hi I know this is an already closed issue but I still ran into it I'm trying to rebuild my typescrip...
68
eslint no-return-assign behavior changed with arrow functions
No idea if that is important for this but using brackets also suppresses the warning although it's s...
63
javascript What is the benefit of prefer-default-export?
https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad?...
61
lint staged No staged files match src/**/*.{ts,tsx}
I solved my problem I had a space in between ts and tsx change in .lintstagedrc.json from *.{ts tsx}...
60
eslint plugin import [import/extensions] Missing file extension after upgrade to v2.19.1
I get the error even with the following settings: here is the configuration All import syntax (for t...
56
eslint plugin import import/no-extraneous-dependencies: Complains about node standard libraries
Adding onto @kelchm 's solution node had to be the first resolver for my eslint to work. ...
49
javascript What is the point of the no-continue rule?
@MegaArman Loops are still useful in 2018 in many non trivial cases and will stay useful even in 211...
49
standard Specify eslint-env globally?
Put it into .eslintrc file in your /tests folder like this. Is there a way to set ESLint environment...
49
typescript eslint Improve documentation for typescript/no-unused-vars
Alright @bradzacher I understand There are several use cases typescript/no-unused-vars does not yet ...
49
eslint plugin react False positive display-name when using forwardRef
I have pretty the same issue with React.memo and as it was explained I did the same for forwardRef -...
48
javascript Option to disable a11y plugin?
For everyone who wondering how to use mentioned workaround: We love the airbnb style guide including...
48
eslint plugin vue VSCode linting not working - Cannot find module 'eslint-plugin-vue'
For me it was just setting: I didn't need the other plugins Tell us about your environment ESLint ve...
45
javascript react/jsx-no-bind: how to pass args from callbacks?
Right - at that point you might as well disable the rule. I have a question about react/jsx-no-bind ...
44
eslint config prettier Cannot find module 'eslint-config-prettier/react'
In version 8.0.0 all configs have been merged into one So prettier/react does not exist anymore ...
44
eslint plugin vue Not compatible with typescript-eslint
https://vuejs.github.io/eslint-plugin-vue/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-e...
43
javascript no-param-reassign with props, again
This is a rule we use at Airbnb - in the reducer case if the body of your reducer is return Object.a...
43
standard Cannot find module 'babel-eslint' (eslint/undefined)
Doing npm install babel-eslint --save-dev seems to fix the issue as well. Using this as a local depe...
42
typescript eslint Support for mixed JS and TS codebases - do not lint JS files
For anyone who wants a working .eslintrc Here is my current config I'm using glob patterns overrides...
41
angular eslint v13
The first prerelease has been published anybody wanting to migrate to v13 can run: After they have a...
41
lint staged lint-staged ignores tsconfig.json when it called through husky hooks
Similar issue with tsc Passing files AND project config is not possible When invoked from husky ...
40
eslint eslint-disable-next-line does not work in html portion of .jsx files
eslint-disable-line and eslint-disable-next-line are supported in only line comments ...
40
eslint plugin vue Template root requires exactly one element
I found the reason about it I have several small projects under one directory sayparent so I have pa...
39
javascript Provide alternate solution for no-underscore-dangle
@ranneyd See the docs: you can specify allow: ['_id'] I don't want to argue whether no-underscore-da...
38
prettier eslint Error generating parserServices for eslint plugin @typescript-eslint
could anyone provide an example of a config that provides a work around for this? We are facing this...
38
eslint plugin react jsx-indent and indent require the same indentation amount
Thank very much for the quick reply @ljharb - using your suggestion I was able to get something work...
37
eslint plugin jsx a11y First line of all JSX / JS files gives lint error 'jsx-a11y/img-has-alt' was not found
Thanks @ljharb I downgraded the dependency down to eslint-plugin-jsx-a11y@^4.0.0 ...
35
eslint plugin import [no-extraneous-dependencies] Add exceptions?
@tleunen you could set the option devDependencies: true in an .eslintrc in your test folder: Then yo...