[Bug?]: TypeScript integration not resolving with PnP

[jarimustonen]

Self-service

• I'd be willing to implement a fix

Describe the bug

My project uses Yarn PnP with the problem being that VS Code does not find any of the types.

The website provides instructions on fixing this: https://yarnpkg.com/getting-started/editor-sdks

After the instructed steps:

1. Run yarn dlx @yarnpkg/sdks vscode
2. Install ZipFS plugin
3. Set the TypeScript version to "Use Workspace Version"

The problem persists. VS Code does not find any of the type definitions.

To reproduce

See above.

Environment

System: Apple M1, Sonoma 14.2.1

VS Code: 1.86.0 (Universal)
Node: v21.5.0
Yarn: 3.6.4

Additional context

No response

[jarimustonen]

I would be willing to implement a fix but at the moment, I'm quite unfamiliar with yarn.

[jarimustonen]

I think the problem might also be in my tsconfig.json:

{
  "include": [
    "env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "compilerOptions": {
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2022"
    ],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "skipLibCheck": true,
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./app/*"
      ]
    },
    "noEmit": true,
  },
}

[dtrunk90]

I've worked around this issue by temporarily changing "typescript": "^5" to "typescript": "^5.3.3" and then restarting the TS server (with tsx file opened: Ctrl+Shift+P -> Restart TS server). When setting it back to ^5 afterwards and re-starting ts sever again it continues to work for some reason.

[RDIL]

Are you both working on the same project, or is your issue separate from the OP @dtrunk90?

@jarimustonen it might be that your Yarn version doesn't have the relevant patches for the version of TypeScript you're using. Try yarn set version 3.8.0 and see if that fixes it.

[dtrunk90]

Are you both working on the same project, or is your issue separate from the OP @dtrunk90?

The symptoms are the same. I also followed the sdk instructions but the issue was still there. Maybe there's a bug in detecting typescript in package.json when only the major version is given.

[RDIL]

Can you please try the fix I recommended and see if it works for you?

[DanielHoffmann]

I've worked around this issue by temporarily changing "typescript": "^5" to "typescript": "^5.3.3" and then restarting the TS server (with tsx file opened: Ctrl+Shift+P -> Restart TS server). When setting it back to ^5 afterwards and re-starting ts sever again it continues to work for some reason.

@dtrunk90
Yarn has to do a a patch to work in PnP mode with a few libraries (I think this is required for MacOS only), mostly related to file-system stuff. Typescript relies on fsevents which is one of those libraries that need a patch, when typescript updates fsevents yarn breaks until this patch is introduced in a new yarn release. In your yarn.lock you probably have something like this:

"fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin<compat/fsevents>":
  version: 2.3.3
  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
  dependencies:
    node-gyp: "npm:latest"
  conditions: os=darwin
  languageName: node
  linkType: hard

note conditions: os=darwin and fsevents@patch:fsevents, this is some magic yarn is doing to make that lib work on your computer. That magic doesn't exist yet for the latest fsevents version used by the latest typescript version.

I have run into this problem several times before with several typescript releases. For now I recommend sticking with "typescript": "5.3.3" (no ^ to force that specific version) and try to update both yarn and typescript again in a few months.

I really appreciate the people behind yarn keeping this stuff working, but it seems PnP mode will not catch on given other bundlers are not willing to be as strict as yarn. I am considering turning it off in my projects.

[dtrunk90]

I've worked around this issue by temporarily changing "typescript": "^5" to "typescript": "^5.3.3" and then restarting the TS server (with tsx file opened: Ctrl+Shift+P -> Restart TS server). When setting it back to ^5 afterwards and re-starting ts sever again it continues to work for some reason.

@dtrunk90
Yarn has to do a a patch to work in PnP mode with a few libraries (I think this is required for MacOS only), mostly related to file-system stuff. Typescript relies on fsevents which is one of those libraries that need a patch, when typescript updates fsevents yarn breaks until this patch is introduced in a new yarn release. In your yarn.lock you probably have something like this:

"fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin<compat/fsevents>":
  version: 2.3.3
  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
  dependencies:
    node-gyp: "npm:latest"
  conditions: os=darwin
  languageName: node
  linkType: hard

note conditions: os=darwin and fsevents@patch:fsevents, this is some magic yarn is doing to make that lib work on your computer. That magic doesn't exist yet for the latest fsevents version.

I have run into this problem several times before with several typescript releases. For now I recommend sticking with "typescript": "5.3.3" (no ^ to force that specific version) and try to update both yarn and typescript again in a few months.

I'm on Linux

[DanielHoffmann]

@dtrunk90 it could be the patch is required on linux as well, I am not 100% sure

[arcanis]

Yarn has to do a a patch to work in PnP mode with a few libraries (I think this is required for MacOS only), mostly related to file-system stuff. Typescript relies on fsevents which is one of those libraries that need a patch, when typescript updates fsevents yarn breaks until this patch is introduced in a new yarn release. In your yarn.lock you probably have something like this:

Not exactly - TS doesn't support PnP resolution out of the box, so we need to apply this PR, which we keep maintaining as new TS makes new releases. This is required on all systems.

The fsevents patch is a separate thing: fsevents is a native dependency, so it directly performs syscalls that aren't aware of the virtual filesystem Yarn applies on top of the physical one. As a result it also needs a patch to work well.

[DanielHoffmann]

@arcanis Thanks for the explanation, I guess I got both issues confused in my head. I can imagine how much work it is to get PnP mode working in the ecosystem and greatly appreciate your and other yarn maintainers efforts.

I will keep an eye out on that PR.