Type checking issues with using pnpm and typescript together

Question

As I understand from tutorial pnpm creates symlinked .registry.npmjs.org and other entries point under node_modules. My project is on typescript and I have @types for typings in node_modules. But this @types has also in node_modules/.registry.npmjs.org/@types. So I'm getting an error like:

/node_modules/.registry.npmjs.org/@types/jquery/3.3.5/node_modules/@types/jquery/index.d.ts(32,14): error TS2300: Duplicate identifier 'jQuery'.

...and

/node_modules/@types/jquery/index.d.ts(28,14): error TS2300: Duplicate identifier 'jQuery'.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "es5",
      "dom",
      "es2015.promise"
    ],
    "experimentalDecorators": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "scripts",
    "src/contracts"
  ]
}

Any ideas how to resolve it?

Midinette

Have you already set "exclude": ["node_modules/.registry.npmjs.org"] in your tsconfig.json file? That's the first thing I would try, but I'm not posting it as an answer because I'm not very confident it will work. – Reorganize

@MattMcCutchen yes, I've tried that, but it doesn't help... Also I've tried "typeRoots": [ "./node_modules/@types"] with it – Midinette

I wasn't able to reproduce the problem. tsc --traceResolution might help. If you can't spot the problem from the output, post it in the question and I will look. – Reorganize

@AlexFilatov what version of typescript you use? I know that v1 had issues with symlinks but v2/3 works fine. Actually pnpm is written in typescript and we don't have these issues with typescript 2 – Quartana

@ZoltanKochan "typescript": "^2.8.3", – Midinette

@ZoltanKochan seems that you haven't this issue because your are using typings and manually set path to include option in tsconfig.json. In my case I'm using @types instead of it which install via npm and is placed in node_modules/@types – Midinette

pnpm uses @types as well, see package.json. – Quartana

@AlexFilatov do you have a repository on GitHub that reproduces the issue? – Quartana

seems that I've fixed this issue. It was because of my code. I have duplicated link in my contracts folder typings for kendo where explicitly to set import on <reference path="./../../../node_modules/@types/jquery/index.d.ts" />. I've removed this row and the issue dissapears – Midinette

Answer 1

Adding this to my tsconfig.json file worked for me:

{
  "compilerOptions": {
    "preserveSymlinks": true
  }
}

Eubank

Answer 2

For me "typeRoots": ["./node_modules/@types"] worked.

By default tsc will look for types in all node_modules/@types folders.

You can test which files are being include by calling tsc --listFiles.

I think because this file is included by typescript itself, then it will also include all files in the pnpm repo store node_modules/.pnpm/@types.

xxx/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/lib.es5.d.ts

In my case I had multiple versions of React sitting in there that were getting read.

Meader

After doing this, I still got an error because typescript resolved files in .pnpm: Type 'import("c:/Users/rajas/Documents/GitHub/meal-planner/node_modules/rc-menu/lib/interface").MenuClickEventHandler' is not assignable to type 'import("C:/Users/rajas/Documents/GitHub/meal-planner/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/rc-menu/lib/interface").MenuClickEventHandler'. – Sunnysunproof