Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Type checking for node_modules #128

Closed
maksimsemenov opened this issue Jul 5, 2018 · 12 comments
Closed

Type checking for node_modules #128

maksimsemenov opened this issue Jul 5, 2018 · 12 comments
Labels

Comments

@maksimsemenov
Copy link

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
Copy link

crazyx13th commented Jul 6, 2018

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
Copy link

Unfortunately, I also have the same problem.

@maksimsemenov
Copy link
Author

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

@johnnyreilly
Copy link
Member

johnnyreilly commented Jul 24, 2018

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?

@michalpuskel
Copy link

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
Copy link
Contributor

@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
Copy link

michalpuskel commented Jul 30, 2019

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

Screen Shot 2019-07-30 at 09 57 07

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

@phryneas
Copy link
Contributor

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
Copy link

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
Copy link
Collaborator

@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
Copy link

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
Copy link
Collaborator

Could you create a reproduction repository?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

8 participants