typescriptjodit

How to disable libCheck and warnings for a specific library in the node_modules folder?


I keep getting warnings from TS files in a node_modules library, that I don't want to see.

The library in question is this here: https://github.com/xdan/jodit

I import the library in my app.tsx like such:

import { IControlType, IJodit, Jodit } from 'jodit';

Here is my tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    // "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noErrorTruncation": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "outDir": "build",
    "resolveJsonModule": true,
    "paths": {
      "src/*": ["src/*"]
    },
    "sourceMap": true,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5"
  },
  "include": ["src"],
  "exclude": [
    "**/*.spec.ts",
    "**/node_modules",
    "build",
    "node_modules",
    "scripts",
    "src/serviceWorker.ts",
    "src/vendors/**/*"
  ]
}

Now, I have tried skipLibCheck: true, but that didn't solve the issue.

  1. I don't really want to disable libCheck for ALL just because of one package
  2. It didn't work anyway, because if I understand correctly, TS will check the files even if I have skip lib check, because the files are imported in my project

In my webpack config I have this:

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  enforce: 'pre',
  use: [
    {
      options: {
        cache: true,
        eslintPath: require.resolve('eslint'),
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        resolvePluginsRelativeTo: __dirname,
        emitError: isEnvProduction,
      },
      loader: require.resolve('eslint-loader'),
    },
  ],
  include: paths.appSrc,
}


new ForkTsCheckerWebpackPlugin({
  typescript: resolve.sync('typescript', {
    basedir: paths.appNodeModules,
  }),
  async: isEnvDevelopment,
  useTypescriptIncrementalApi: true,
  checkSyntacticErrors: true,
  resolveModuleNameModule: process.versions.pnp ? `${__dirname}/pnpTs.js` : undefined,
  resolveTypeReferenceDirectiveModule: process.versions.pnp
    ? `${__dirname}/pnpTs.js`
    : undefined,
  tsconfig: paths.appTsConfig,
  reportFiles: [
    '**',
    '!**/__tests__/**',
    '!**/?(*.)(spec|test).*',
    '!**/src/setupProxy.*',
    '!**/src/setupTests.*',
  ],
  silent: true,
  // The formatter is invoked directly in WebpackDevServerUtils during development
  formatter: isEnvProduction ? typescriptFormatter : undefined,
})

I don't know if there is maybe a way here to ignore this library's errors?

The errors I'm getting in my console are errors like:

react/assets/node_modules/jodit/src/modules/toolbar/collection/editor-collection.ts(40, 4)
Type 'boolean | void' is not assignable to type 'boolean'

Solution

  • Ok there is no good clean way of doing this, however, I did find a way to make it work.

    Since I don't want any validation from another library's files I decided just to add // @ts-nocheck to the files that were trowing warnings.

    Now, you have to go into the node_modules folder and find the library, and add that comment to the first line of all the .ts files that are causing you problems.

    After that you want to use the https://github.com/ds300/patch-package#readme module to patch the library, so you don't have to make these changes manually every time you install the library.

    And the last step, if you feel up for it is to go fix the bugs in the library and submit a pull request.

    So:

    1. Add the ignore comment to the files causing errors in the node_modules folder
    2. Patch the package
    3. Enjoy!