Error: spawn wslvar ENOENT when running yarn storybook on WSL2 - reactjs

Question

I am trying to follow this tutorial on https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/
The commands that are given in the tutorial are as follows
# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
# Install dependencies
yarn
# Run the test runner (Jest) in a terminal:
yarn test --watchAll
# Start the component explorer on port 6006:
yarn storybook
# Run the frontend app proper on port 3000:
yarn start
I am however running into an issue when yarn storybook on my wsl2 ubuntu terminal.
Here is the error
yarn storybook
yarn run v1.22.5
warning ../package.json: No license field
$ start-storybook -p 6006 -s public
info #storybook/react v6.3.0
info
info => Loading presets
info => Serving static files from ./public at /
info => Loading 1 config file in "/mnt/d/taskbox/.storybook"
info => Loading 9 other files in "/mnt/d/taskbox/.storybook"
info => Adding stories defined in "/mnt/d/taskbox/.storybook/main.js"
info => Using prebuilt manager
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup
(node:7126) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /mnt/d/taskbox/node_modules/postcss-safe-parser/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
17% building 63/88 modules 25 active /mnt/d/taskbox/node_modules/global/window.jsBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
webpack built preview 0ef1297f848efab9f24c in 139265ms
╭─────────────────────────────────────────────────────╮
│ │
│ Storybook 6.3.0 started │
│ 3.97 min for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://172.22.229.210:6006/ │
│ │
│ A new version (6.3.6) is available! │
│ │
│ Upgrade now: npx sb#latest upgrade │
│ │
│ Read full changelog: https://git.io/fhFYe │
│ │
╰─────────────────────────────────────────────────────╯
node:internal/errors:456
ErrorCaptureStackTrace(err);
^
Error: spawn wslvar ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
at onErrorNT (node:internal/child_process:480:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn wslvar',
path: 'wslvar',
spawnargs: [ 'systemroot' ],
cmd: 'wslvar systemroot',
stdout: '',
stderr: ''
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I've been having a hard time finding similar errors to go off of since it seems like a rare error. I suspect it's related to me running storybook on WSL2 though.

Answer 1

According to this Github comment, the error is usually caused by either:
powershell.exe not being in the path (unlikely, but could be the case if a /etc/wsl.conf explicitly disabled Windows PATH interop).
Missing wslvar, which is part of the wslu (WSL Utilities) package. While it's installed by default in some WSL distributions, it may not be up-to-date or installed in some. See the Github page for installation instructions for each distribution.