Error: spawn wslvar ENOENT when running yarn storybook on WSL2

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.