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.