Issue with local jest type definitions (yarn 3 and jest)

Programming TypeScript
8

It looks like they are addressing this issue in a GitHub issue: ESLint cannot find already installed plugins when linting exercises in local environment · Issue #1386 · exercism/typescript · GitHub

9

Hello :slightly_smiling_face:

I created the GitHub issue mentioned above and have just found this thread thanks to @WigglyDon, who commented on the GitHub issue.

I read this thread and I think @WigglyDon and @padeso are experiencing two different problems, though both of them are related to Yarn 3 PnP feature.

Remark: in exercises, yarn lint command runs yarn tsc --noEmit -p ., which shows errors of the TypeScript compiler, and if it doesn’t detect any, it runs yarn eslint . --ext .tsx,.ts, which shows errors of ESLint. Both of them are configured by exercise files to be appropriate for the Exercism’s TypeScript Track. Ideally, you can configure your IDE of choice to do both tasks, hopefully using configuration from exercise folder.

I split this comment into 4 parts because I am a new user on this forum and I can only mention 2 users and put 2 links in one comment. It is part 1. I couldn’t even post part 4, as there is also a limit of 3 replies, so below there’s a link used in part 4:

[Link] Setting up ESLint on Webstorm when using Yarn Berry with Plug'n'Play<!-- --> | Madole.xyz.

1 Like
10

Part 2.

@padeso experiences the same problem that I wrote about in the GitHub issue - problem with ESLint which occurs when using Yarn PnP regardless of the IDE used (it is present after a fresh install of an exercise, running yarn install and yarn lint:ci), because it is related to ESLint’s incompatibility with Yarn PnP, as described in the GitHub issue. I saw that running yarn add --dev eslint-plugin-import@^2.27.5 @typescript-eslint/eslint-plugin@^5.59.9 is an ugly workaround that currently works without abandoning PnP. @SleeplessByte said in the GitHub issue comment, that he will work on fixing the issue properly and suggested to do the following in the meantime: after 1) downloading fresh exercise, 2) add nodeLinker: node-modules line to the .yarnrc.yml file (it can also be done by running yarn config set nodeLinker node-modules), and then run yarn install. It makes Yarn 3 use node_modules instead of PnP. ESLint works correctly then.

11

Part 3 and 4

I suppose that @WigglyDon has another problem - there are additional steps that have to be taken in order to use tools (including TypeScript) installed by Yarn PnP in VS Code. I refer you to the official Yarn guide on how to do that: Editor SDKs | Yarn. It involves installing ZipFS extension, using Yarn SDK for VS Code by running yarn dlx @yarnpkg/sdks vscode and selecting installed version of TypeScript in VS Code’s settings. I reproduced @WigglyDon’s problem, followed these steps and the type errors disappeared from the test file. Note: if you followed the step of running yarn config set nodeLinker node-modules in order to make ESLint work and you do not use Yarn PnP, then you don’t have to do that and VS Code’s TypeScript compiler should work correctly, as in Yarn 1 (still make sure to select installed version of TypeScript in VS Code’s settings). Regardless, also remember to have ESLint extension installed to view ESLint problems apart from TypeScript compiler’s problems.

Personally I use WebStorm. In WebStorm, in a fresh exercise, if I 1) set Yarn as Node’s package manager in IDE settings, 2) run yarn config set nodeLinker node-modules, and 3) run yarn install, then TypeScript compiler and ESLint work and WebStorm uses the installed and well-configured versions of them. (Reopening TypeScript file or restarting IDE may be necessary after running yarn install.) When ESLint issue will be fixed and we will use Yarn PnP again, in order to use installed ESLint in WebStorm, unfortunately we will have to run yarn unplug eslint and set path to the unplugged package in IDE settings, as I did when I was still using Yarn PnP and running yarn add --dev eslint-plugin-import@^2.27.5 @typescript-eslint/eslint-plugin@^5.59.9 - see [Link] from part 1.

12

This is really helpful in understanding what is going wrong.

By following this I realize that I almost came close to fixing it earlier but I gave up because when trying to do this I ran into an error while running yarn dlx @yarnpkg/sdks vscode

And I kept going here assuming it ‘did nothing’ because I didn’t realize the error

➤ YN0001: Error: Your application tried to access color-convert, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

I’m really tired and going to go to bed right now, but the little bit of searching I just did to try and successfully run that command seems like this is a recent issue and specifically related to vscode.

my brain is cooked, but i’ll be back tomorrow to try again.

thank you for your generous work bro :heart:

13

Thanks for the information! Adding those two additional dependencies is not simply an ugly workaround, it’s an inadequate one, too. While they make it possible to run the tests in WebStorm, the linting is not the same as it is on the command line, so you can get everything transpiling perfectly in the IDE only to encounter multiple errors when you decide to submit.

Until there’s a more permanent solution, II’ll probably go back to my original workflow, where I edit the files in whatever, but only build and run the tests from the command line.

14

If you are still using Yarn PnP and installing those dependecies, do you also do the additional work of unplugging ESLint and setting it in WebStorm, as I mentioned in part 4 of my reply?

I am not able to double check it now to ensure myself, because I’m AFK, but I guess that it may be the source of your problem - WebStorm may be using other ESLint than yarn lint:ci.

15

I’m just about ready to give up on fixing this also.

I have been trying to add the sdks for vscode this morning and it ended up with me reinstalling a fresh linux OS to try and re-setup my local workspace as minimally and cleanly as possible and try to get this stuff working.

I ran into the exact same roadblock on this page when trying to run yarn dlx @yarnpkg/sdks vscode

The most similar thing I have been able to find on the web is this stackoverflow post Which I have left a comment on and I think i’m going to give up on this after seeing that the yarn page for anything related to this missing package color-convert has been removed from Yarn’s website

ex. https://yarnpkg.com/package/color-convert

At this point I am just going to use NPM to install dependencies for the exercises and wait for more clear answers to be available.

16

Using the instructions on the Yarn 3 page, I think I can put together a usable VS Code environment for the Exercism TypeScript track. I didn’t have any issues regarding color-convert.

Although I appreciate the information, I don’t think I want to circumvent Yarn 3’s PnP by “unpluging” ESLint. It’s also a bit more effort than I care to put forth, I’ll just forgo using WebStorm for this.

1 Like
17

:wave: TypeScript (and JavaScript) maintainer here.

A few things first:

  1. You do not need to and should not add @types/jest manually. Please don’t do this. If this is somehow “resolving” some things, then that’s only a red-herring. I would revert this addition before continuing.
  2. If you do not see type information for jest, ánd you’re in VSCode, you should open the Command Palette (for me: CTRL + Shift + P, but check the View menu) and TypeScript: Restart TS server. This only shows up if you have a .ts file open at the moment.
  3. If you still don’t see type information, please check package.json and yarn.lock for the jest version. Jest 29+ comes with types bundled (@types/jest is not correct to begin with). If you do not have jest 29, the thing to check is login on https://exercism.org and see if you can update the exercise.
    Types come bundled with jest 29
    Types come bundled with jest 29474×696 22.8 KB
  4. If you’re using Webstorm, Yarn PnP should “just” work, except for eslint, but more on that later.
  5. If you’re using VSCode please follow these instructions as listed by @KonradKozubek. Once you have followed that, yarn install should “just work” for prettier, typescript, except for eslint. If it doesn’t, retry step 2.
  6. Finally, eslint is currently broken unless you run yarn config set nodeLinker node-modules before installing. You can safely do this. Afterwards, eslint should work. If not, open the Command Palette again and pick Restart ESLint Server.

The final step (6) is what we are resolving. Once that is resolved, we will update the INSTALLATION.md docs to guide people towards installing the VSCode SDK.

The color-convert errors are unrelated to the setup on Exercism. The package is a dependency of a dependency and normally are not touched by our toolchain directly and thus this error only happens if you modify package.json yourself.

1 Like
18

This fixed it for me. It feels weird because I feel like I have been doing this for two days and always get blocked at the steps to add the sdks to vscode on the color-convert section. When I ran the command this time (after changing nothing, including your step 1) it just worked. Yay!

Thank you sir, somehow this fixed my issue and I can move on in peace. Have a great day

1 Like
19

Correction

I’m sorry, I checked and I was wrong at one point earlier - when using Yarn PnP, in order to use installed ESLint in WebStorm you indeed don’t have to run yarn unplug eslint, as @SleeplessByte mentioned in the solution. It is harmless, though. One had to do that in an earlier version of WebStorm, in January 2020, at least according to (earlier linked): Setting up ESLint on Webstorm when using Yarn Berry with Plug'n'Play<!-- --> | Madole.xyz. So forget this sentence:

When ESLint issue will be fixed and we will use Yarn PnP again, in order to use installed ESLint in WebStorm, unfortunately we will have to run yarn unplug eslint and set path to the unplugged package in IDE settings, (…)

which I put in one reply and quoted in another - it is wrong, we won’t have to do that. Sorry if it misled anyone, especially you @padeso.

20

Just in case anyone, like me shows up at this thread and is wondering if it can help you solve a similar problem you’re having while using VIM…yes!

The last step (#6) in the solution @SleeplessByte outlined was all I needed. Just making sure nodeLinker config is set to node-modules and then running yarn install did the trick.

Many thanks!!

3 Likes
24

I don’t think it’s very constructive to give “feedback” in the way you’re giving it.

That said: There is a lot of history around why yarn.lock is not included on GitHub, which you may want to explore if you’re interested. Including it wouldn’t solve the issue at hand. The issue is with a specific way Yarn resolves node modules (plug and play) which is far superior to the “node modules folder” which would duplicate the dependencies for each exercise. This isn’t unique to JavaScript and TypeScript, but there are also other languages such as Ruby that use a central-ish repository.

Things aren’t always broken in JavaScript, but one particular tiny thing is: eslint doesn’t understand the resolution of packages if it’s not in node modules. They have been working on a fix but it’s not released. A package from the community is supposed to resolve this but I have not yet gotten it to work the way we want it to.

Finally, the entire platform’s content, so anything apart from the core bits (the website editor etc.) is built by and maintained by volunteers. Unfortunately I currently have stage four lymphoma and am paralysed from the hips down. I won’t be able to fix this issue any time soon as I’m trying to stay alive instead. Perhaps you could direct your energy to resolve the issue yourself.

2 Likes
25

I’ve deleted my prior posts.

Sorry to hear about your situation. I sincerely wish you good health.

In general I really like exercism and the efforts of the volunteer maintainers. I have donated to the site as well.

My frustration is with the JS ecosystem. I’ve worked in in for brief stints before, and JS/node/npm has always just frustrated.

I’ve decided this ecosystem isn’t for me and will move on.

26

https://github.com/exercism/typescript/pull/1506 should resolve this, use Yarn 4, ESLint 9, integrate directly with VSCode and enable PnP.

Related:

1 Like
27

Wow, a huge pile of work for an update… no wonder I gave up trying to make that work.

28

Yah it was not fun :')

image
image1468×115 9.49 KB

image
image1478×66 5.31 KB

But this is nice!

29

For those reading, once this lands, if you’re using webstorm, you must call

corepack yarn dlx @yarnpkg/sdks base

…to make PnP work.

VSCode and other’s instruction’s are at Editor SDKs | Yarn

30

See: TypeScript "stopped working" locally