Search code examples
typescriptvisual-studio-codeyarnpkgyarnpkg-v3

VS Code and Yarn PnP


Are there any incompatibilities with the yarn pnp sdk and typescript? I've installed the sdk via yarn sdks and in the TS Server logs it appears to be pulling from the cache (ex:)

/osi/disp/vob/web/.yarn/cache/typescript-patch-04b86b0e5c-24a439e062.zip/node_modules/typescript/lib/lib.es5.d.ts

Yet VS Code cannot find modules:

Cannot find module 'react' or its corresponding type declarations.

It builds and runs via webpack. This appears to be a VS Code/sdk artifact.

Trying to trace react resolution there are some odd notes:

Info 1216 [08:36:07.761] DirectoryWatcher:: Added:: WatchInfo: /osi/disp/vob/web/react 1 undefined Project: /osi/disp/vob/web/tsconfig.json WatchType: Failed Lookup Locations
Info 1217 [08:36:07.761] Elapsed:: 0.06486300379037857ms DirectoryWatcher:: Added:: WatchInfo: /osi/disp/vob/web/react 1 undefined Project: /osi/disp/vob/web/tsconfig.json WatchType: Failed Lookup Locations

Those folders don't exist, and it seems like it may be interpreting 'react' as './react'

tsconfig:

{
  "compilerOptions": {
    "baseUrl": "./",
     "target": "es5",
    "lib": [
      "es6",
      "dom",
      "es2016",
      "es2017"
    ],
    "allowSyntheticDefaultImports": true,
    "alwaysStrict": true,
    "declaration": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "skipLibCheck": true
  }
}

Simple repro: https://github.com/rcketscientist/vs-code-pnp-test

Appreciate any insight or pointers to investigate further.


Solution

  • The SDK is currently incompatible with TS 4.5:

    https://github.com/yarnpkg/berry/issues/3722

    Downgrading to 4.4.4 fixes it:

    1. yarn remove typescript
    2. rm -rf .yarn/sdks/typescript
    3. yarn add -D [email protected]
    4. yarn dlx @yarnpkg/sdks base