Using WebStorm with asdf in WSL

I recently started using WebStorm on Windows to work on a Vue.JS-based project, and ran into an irritating issue when trying to run things with WSL and asdf:-

C:\Windows\system32\wsl.exe --distribution Ubuntu-20.04 --exec /bin/sh -c "export PATH=\"/home/andys/.asdf/shims:$PATH\" && 
cd /mnt/c/Users/andys/PycharmProjects/abpower-ui && /home/andys/.asdf/shims/node /home/andys/.asdf/lib/node_modules/npm/bin/npm-cli.js
run 'start:dev' --scripts-prepend-node-path=auto"

node:internal/modules/cjs/loader:926
throw err;
^

Error: Cannot find module '/home/andys/.asdf/lib/node_modules/npm/bin/npm-cli.js'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:923:15)
at Function.Module._load (node:internal/modules/cjs/loader:768:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

Process finished with exit code 1

After a bunch of time searching fruitlessly for an answer while resisting the urge to throw things out the window, I figured I’d try something else.

Things to note:-

  • I am not an expert when it comes to node, npm, asdf or anything involving JavaScript
  • This may not be a great way to do it, I don’t know if this will make other things explode

When you first select the node interpreter under Run/Debug Configurations, WebStorm will run which node and get the path that way. When using asdf, this comes back as ~/.asdf/shims/node:-

This sets the Package manager option to something that doesn’t exist. This in turn apparently confuses the shit out of WebStorm, because it then tries to find the node_modules directory based on this path, fails, barfs and makes a mess everywhere.

Figuring that the way asdf shims interpreters was the cause, I went digging to see if I could find where npm-cli.js was under my ~/.asdf directory:-

[andys@longview]$ find ~/.asdf | grep npm-cli.js
/home/andys/.asdf/installs/nodejs/15.9.0/.npm/lib/node_modules/npm/bin/npm-cli.js
/home/andys/.asdf/installs/nodejs/15.9.0/lib/node_modules/npm/bin/npm-cli.js

Hmm, we might be onto something here.

[andys@longview]$ cd /home/andys/.asdf/installs/nodejs/15.9.0
[andys@longview]$ ls
CHANGELOG.md LICENSE README.md bin include lib share
[andys@longview]$ cd bin
[andys@longview]$ ls
node npm npx

Aha!

Okay, so what happens if we give WebStorm this path instead?

The Package manager path now looks right at least… but does it work?

C:\Windows\system32\wsl.exe --distribution Ubuntu-20.04 --exec /bin/sh -c "export PATH=\"/home/andys/.asdf/installs/nodejs/15.9.0/bin:$PATH\" && 
cd /mnt/c/Users/andys/PycharmProjects/abpower-ui && /home/andys/.asdf/installs/nodejs/15.9.0/bin/node 
/home/andys/.asdf/installs/nodejs/15.9.0/lib/node_modules/npm/bin/npm-cli.js run 'start:dev' --scripts-prepend-node-path=auto"

> abpower-ui@1.0.0 start:dev
> webpack serve --mode=development --host=0.0.0.0

ℹ 「wds」: Project is running at http://0.0.0.0:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /mnt/c/Users/andys/PycharmProjects/abpower-ui/dist

Success!

As I said before, I’m far from an expert when it comes to anything involving JavaScript so I have no idea if this is the right way to do things. But it works for me, so if you’re running into the same problem then this might help.