Go to Definition for create-react-app project with yarn 3 in VSCode

[benderillo]

Question:

How do I get normal developer experience in VSCode with new Yarn "berry" and ReactJS (javascript) in 2022?

Setup:

1. yarn version set berry
2. yarn --version: 3.2.4
3. yarn create react-app my-app
4. yarn add @yarnpkg/sdks
5. yarn sdks vscode
6. install zipFS extension in VSCode and reload the window
7. yarn add @tanstack/react-query

Problem

After I have done all the steps above I import the react query in my app.js like so:

import { QueryClient, QueryCLientProvider } from "@tanstack/react-query";

const client = new QueryClient();

And now I want to cmd+click on the @tanstack/react-query path to go to the definition to see the exports, etc. But it doesn't work. Nothing happens. I right-click on the path and choose "Go to Definition" but nothing happens again.

Not to mention that suggestions don't pop up when I type client.

It is the end of 2022 and I believe I did all the officially suggested steps to make it work but it doesn't.

What am I missing?

The documentation of zipFS is non-existent as it is only a paragraph saying that this extension with yarn SDKs will give me seamless experience working with zip files - but it doesn't.

So, how I, as a developer, can get back my developer experience I used to have with npm and old yarn working on ReactJS projects (Please note no typescript) while using yarn 2?

I feel like there must be something I am missing that should make it all work as normal again and I am really looking forward for someone helping me.