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

[WigglyDon]

Hiiii

I’ve been having an issue with developing locally on the Typescript track.
The issue is that VSCode will not recognize the type definitions for Jest after Yarn installing on a newly cloned exercise, and is also not fixed by manually installing the type definitions using yarn add @types/jest, and also isn’t recognizing them when globally adding the types to my system using yarn dlx add @types/jest.

I’ve been playing around with the yarn.lock and tsconfig files to no avail.

This only affects the type definitions of Jest functions inside of the test file, such as Describe, and actually has no relevance to the actual running of the tests. What i’m trying to say is that Yarn test executes and has no issues when using the terminal, but my test files for the exercises are riddled with type errors for Jest.

I have managed to get around this and fix it by:

1. Run Yarn install
2. Run Npm i --save-dev @types/jest to manually generate a node_modules folder (Yarn 3 no longer creates this folder that contains the type definition files)
3. Run Yarn install again in order to install the dependencies via yarn, but the code editor will no longer complain about a missing type definition file for Jest.

I’ve been trying to find a permanent solution for this, as I do not like mixing Yarn and NPM to handle the packages of each exercise. When I do npm i --save-dev @types/jest it creates a whole bunch of new changes in version control that is absolutely gross

I think it’s realistic that this is a simple configuration error in my local workspace, but I’ve been trying to figure it out for a few hours and thought I’d make a post just in case someone else knows what is going on here.

Thanks :)

[WigglyDon]

I’m still working on this and noticed something weird that I think is worth adding

If I skip the first yarn install and simply do this:

1. npm i --save-dev @types/jest
2. yarn install

The yarn install detects the node_modules folder and auto-deletes it, but this DOES NOT happen when doing the originally posted steps, which still work.

1. yarn install
2. npm i --save-dev @types/jest
3. yarn install

I’ve solved the version control issue by creating a .gitignore with only node_modules on it.

This still feels gross, and in an ideal world I still wish I can clone the exercise using the CLI command and just run yarn install once and have it setup without using npm.

D:

[padeso]

I’m experiencing the same thing. Webstorm provides a little more information about the issue, which may be of help. Specifically, there may be a problem in the @exercism/eslint-config-typescript file.

Error: Failed to load plugin 'import' declared in '.eslintrc.cjs#overrides[0] » @exercism/eslint-config-typescript': Your application tried to access eslint-plugin-import, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: eslint-plugin-import
Required by: C:\Users\bozo\Exercism\typescript\crypto-square\

Require stack:
- C:\Users\bozo\Exercism\typescript\crypto-square\__placeholder__.js
Referenced from: C:\Users\bozo\Exercism\typescript\crypto-square\.yarn\__virtual__\@exercism-eslint-config-typescript-virtual-28bfeccbb4\0\cache\@exercism-eslint-config-typescript-npm-0.5.0-3cffed6679-ef4e510dcc.zip\node_modules\@exercism\eslint-config-typescript\index.js

Error: Failed to load plugin 'import' declared in '.eslintrc.cjs#overrides[0] » @exercism/eslint-config-typescript': Your application tried to access eslint-plugin-import, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: eslint-plugin-import
Required by: C:\Users\bozo\Exercism\typescript\crypto-square\

Require stack:
- C:\Users\bozo\Exercism\typescript\crypto-square\__placeholder__.js
Referenced from: C:\Users\bozo\Exercism\typescript\crypto-square\.yarn\__virtual__\@exercism-eslint-config-typescript-virtual-28bfeccbb4\0\cache\@exercism-eslint-config-typescript-npm-0.5.0-3cffed6679-ef4e510dcc.zip\node_modules\@exercism\eslint-config-typescript\index.js
    at require$$0.Module._resolveFilename (C:\Users\bozo\Exercism\typescript\crypto-square\.pnp.cjs:17890:13)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at Object.resolve (C:\Users\bozo\Exercism\typescript\crypto-square\.yarn\cache\@eslint-eslintrc-npm-2.1.2-feb0771c9f-bc742a1e3b.zip\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2337:46)
    at ConfigArrayFactory._loadPlugin (C:\Users\bozo\Exercism\typescript\crypto-square\.yarn\cache\@eslint-eslintrc-npm-2.1.2-feb0771c9f-bc742a1e3b.zip\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3404:33)
    at ConfigArrayFactory._loadExtendedPluginConfig (C:\Users\bozo\Exercism\typescript\crypto-square\.yarn\cache\@eslint-eslintrc-npm-2.1.2-feb0771c9f-bc742a1e3b.zip\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3224:29)
    at ConfigArrayFactory._loadExtends (C:\Users\bozo\Exercism\typescript\crypto-square\.yarn\cache\@eslint-eslintrc-npm-2.1.2-feb0771c9f-bc742a1e3b.zip\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3145:29)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (C:\Users\bozo\Exercism\typescript\crypto-square\.yarn\cache\@eslint-eslintrc-npm-2.1.2-feb0771c9f-bc742a1e3b.zip\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3086:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (C:\Users\bozo\Exercism\typescript\crypto-square\.yarn\cache\@eslint-eslintrc-npm-2.1.2-feb0771c9f-bc742a1e3b.zip\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3031:20)
    at _normalizeObjectConfigData.next (<anonymous>)
Process finished with exit code -1

[padeso]

Just to keep the water as muddy as possible: I found this tip in another thread:

yarn add --dev eslint-plugin-import@^2.27.5 @typescript-eslint/eslint-plugin@^5.59.9

It fixes the problem in Webstorm but not in VS Code. Also, after doing that, I can write and test code in the IDE that doesn’t compile (transpile, I guess) on the command line.

[WigglyDon]

I am not super literate in whats going on with your exercise, but I think I have noticed a few things about it in relation to mine as well. Here goes

First thing I noticed is that this is happening to you on crypto-square. Does this happen for you on everything else also? Ideally could you check it out on a freshly cloned hello-world exercise also in order to minimize the amount of possible things that are going wrong here?

Another thing I noticed is that your first error seems to include a node_modules folder in the filepath listed in the error. In my case, the reason this is causing problems is because of the switch to Yarn 3. This article by Yarn about Plug’n’Play explains the main benefit of the upgrade (this is also referenced in Installing Typescript Locally at the beginning of the Typescript track) is to no longer have so much being installed when installing the dependencies.

Meaning; it is my belief that if we have a node_modules present whatsoever it is going against the core benefit of even using Yarn PNP. If I use npm to install my dependencies it eliminates all the problems i’m having. (at the cost of adding a huge node_modules folder :( )

Your configuration with the lint plugin as a dependency seems to be similar, some referencing at some point is unhappy with the way it’s configured.

Got a couple of suggestions to try, granted none of them may work and some may make the waters even more muddy, to use your words lol, so try at your own risk (however you can always reclone a fresh exercise, and if you exercism submit an iteration it should keep the progess you made before messing around with my suggestions.

I will list both the npm and yarn commands for you to try, but please try using the yarn command first; as ideally it seems like npm should be avoided for dependency management at this point. But try both if yarn doesn’t work.

1. yarn add eslint-plugin-import --dev to add eslint-plugin-import as a dependency via yarn because the error seems to describe that it can’t find this at all.
   (npm => npm install eslint-plugin-import --save-dev)

2. there should be an eslint configuration file somewhere in the project, it should be called either .eslintrc.js, .eslintrc.json, .eslintrc.yml or something like that. This file should be configured to reference the correct plugin, which seems to be eslint-plugin-import in this case. It should be under a section called plugins

3. Clear the ESLint cache. yarn eslint --clear-cache
   (npm => npm run eslint -- --clear-cache)

Those are the only suggestions I can help with, but I’d recommend trying to see if this problem happens for you on other exercises (especially the hello world opener exercise), and if it DOESN’T happen on another exercise, possibly a fresh clone of the one you’re having trouble with might solve it, in addition to what I’ve described.

Overall, it seems to me like we may be having a similar problem with yarn related dependencies. Let me know if you find out more!

[padeso]

I also think we are describing the same problem. I posted because I thought the more verbose WebStorm error might help narrow down the search, should anyone be trying to fix it.

Adding those two dependencies makes it possible to run the tests in WebStorm, so I’m good. In any case, the easiest workaround is to just run the tests from the command line, and try to ignore all the red squiggles in the test files in the IDE.

To answer your questions, the “failed to load plugin…” error occurs with any TypeScript exercise right out of the box. I ignored it for the first few dozen exercises I did, but I stumbled on the workaround I described, and then saw your post and thought I’d look more closely at it. I don’t like npm much, either, and because Yarn warns against using mixed managers I haven’t even tried to use it. The references to node_modules are to files in the yarn cache, not in my project workspace.

@WigglyDon

there should be an eslint configuration file somewhere in the project, it should be called either .eslintrc.js, .eslintrc.json, .eslintrc.yml or something like that. This file should be configured to reference the correct plugin, which seems to be eslint-plugin-import in this case. It should be under a section called plugins

There is a .eslintrc.cjs file, but it doesn’t have a plugins section. It has a few items in an overrides section, but I don’t know what they do.

[WigglyDon]

@padeso

I ignored it for the first few dozen exercises I did

THIS. The farther I go down the track the more annoying it gets haha.

I breifly read about the overrides section when I looked up your error, but I didn’t know what it meant either so I didn’t bother mention it.

Could be worth looking at

Also thank you for adding weight to the post, I hope that ideally some issue with yarn PNP could resolve both at the same time hehe

[padeso]

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

[KonradKozubek]

Hello

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.

[KonradKozubek]

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.

[KonradKozubek]

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.

[WigglyDon]

@KonradKozubek

e on how

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

[padeso]

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.

[KonradKozubek]

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?

@KonradKozubek

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.

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.

[WigglyDon]

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.

[padeso]

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.

[SleeplessByte]

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.
   
   
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.

[WigglyDon]

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

[KonradKozubek]

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.

[wvmitchell]

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!!