CODEWITHSUNDEEP
reactjstypescriptgsap
dj1
dj1

Reputation: 541

TypeScript skipLibCheck still checking node_modules libs

I am using TypeScript with React, and TypeScript is still checking libraries in node_modules folder, although I have "skipLibCheck" set to true in tsconfig.json..

Here's my tsconfig.json (I added the exclude section for troubleshooting, which also didn't work): 

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
    ]
  }, 
  "exclude": [
    "node_modules",
    "./node_modules",
    "./node_modules/*",
    "./node_modules/@types/node/index.d.ts",
  ]
}

React version am using is 15.4.2, and TypeScript is installed globally... I had version 3.7.2, and I upgraded it to 3.7.3 because I read somewhere that skipLibCheck doesn't work with 3.7.2 ..

The error I am getting when trying to build the project with gulp is: 

Error - typescript - node_modules\gsap\types\gsap-utils.d.ts(97,75): error TS1144: '{' or ';' expected

If I set skipLibCheck to false, and build the project, I'll have MANY more errors. So seems like the skipLibcheck works partially.

Any idea how to solve this? I am still new to TypeScript. Any help would be appreciated.

Upvotes: 54

Views: 31908

Answers (4)

Ilya Lightman
Ilya Lightman

Reputation: 1

In my case, the only possible solution was to delete .d.ts files, which were not understood by my TS version, which I also couldn't change

{
  "scripts": {
    "patch:opensea-seaport-js": "bash -c 'find ./node_modules/@opensea/seaport-js/lib -name \"*.d.ts\" -exec rm -f {} + || true'",
    "postinstall": "yarn patch:opensea-seaport-js"
  }
}

Upvotes: 0

Chris
Chris

Reputation: 2806

I had this problem because I was importing from the src directory of a module instead of the dist directory. The package included both directories but dist was the better choice for pulling the type I wanted as it didn't do a bunch of side-effect imports.

Example:

import type { Log } from 'viem/dist/types'

Instead of...

import type { Log } from 'viem/src/types/log'

Upvotes: 1

gnom1gnom
gnom1gnom

Reputation: 752

Set the maxNodeModuleJsDepth to zero. The documentation says

Ideally this should stay at 0 (the default)

But this is not true - if you run tsc with --showConfig, in my case it indicates

{
    "compilerOptions": {
        "maxNodeModuleJsDepth": 2
    }
}

Upvotes: -1

sr9yar
sr9yar

Reputation: 5320

skipLibCheck is not meant to prevent all type checking in node_modules. Although it may work for some projects, but it's just a coincidence. You could say it works partially, true. Here's what it does:

Skip Lib Check - skipLibCheck

Skip type checking of declaration files.

This can save time during compilation at the expense of type-system accuracy. For example, two libraries could define two copies of the same type in an inconsistent way. Rather than doing a full check of all d.ts files, TypeScript will type check the code you specifically refer to in your app’s source code.

A common case where you might think to use skipLibCheck is when there are two copies of a library’s types in your node_modules. In these cases, you should consider using a feature like yarn’s resolutions to ensure there is only one copy of that dependency in your tree or investigate how to ensure there is only one copy by understanding the dependency resolution to fix the issue without additional tooling.

skipLibCheck was introduced in Typescipt 2.0, so upgrading Typescript isn't really a fix. Yet again it may work for some people. Now I had a case when I had to add a library using Typescript 4 to a project using Typescript 3. It was raining errors on build. Having the same version of typescript helped. The version of typescript would be specific to your project here.

The only quick solution I know is to use require instead of import (my project was backend):

import * as lib from 'lib';
const lib = require('lib');

Upvotes: 13

Related Questions