[Bug]: "Failed to load static files" error with Yarn PnP with global cache on windows

[blikblum]

Describe the bug

A minimal storybook setup fails to run on windows with the following callstack:

Error: Failed to load static files, no such directory: .\C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-manager-npm-7.5.1-b9f503fb19-10c0.zip\node_modules\@storybook\manager\static
Make sure this directory exists, or omit the -s (--static-dir) option.
    at parseStaticDir (C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-core-server-npm-7.5.1-02b6f24941-10c0.zip\node_modules\@storybook\core-server\dist\presets\common-preset.js:14:2310)
    at async C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-core-server-npm-7.5.1-02b6f24941-10c0.zip\node_modules\@storybook\core-server\dist\presets\common-preset.js:17:2925
    at async Promise.all (index 0)
    at async Object.favicon (C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-core-server-npm-7.5.1-02b6f24941-10c0.zip\node_modules\@storybook\core-server\dist\presets\common-preset.js:17:2687)
    at async useStatics (C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-core-server-npm-7.5.1-02b6f24941-10c0.zip\node_modules\@storybook\core-server\dist\index.js:48:6508)
    at async Promise.all (index 2)
    at async storybookDevServer (C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-core-server-npm-7.5.1-02b6f24941-10c0.zip\node_modules\@storybook\core-server\dist\index.js:104:1159)
    at async buildDevStandalone (C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-core-server-npm-7.5.1-02b6f24941-10c0.zip\node_modules\@storybook\core-server\dist\index.js:119:3007)
    at async withTelemetry (C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-core-server-npm-7.5.1-02b6f24941-10c0.zip\node_modules\@storybook\core-server\dist\index.js:103:3903)
    at async dev (C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-cli-npm-7.5.1-8d005d3abc-10c0.zip\node_modules\@storybook\cli\dist\generate.js:473:401)

On linux, works fine

The path ".\C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-manager-npm-7.5.1-b9f503fb19-10c0.zip\node_modules\@storybook\manager\static" is almost correct except for the ".\" prefix

Somehow parseStaticDir is adding '.\' prefix when should not

To Reproduce

https://github.com/blikblum/yarn-storybook

System

Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 4.0.0 - ~\AppData\Roaming\npm\yarn.CMD <----- active
    npm: 8.10.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.3570.0), Chromium (116.0.1938.81)

Additional context

No response

[valentinpalkovic]

I think I have fixed this one in 7.6.0-alpha.3. Can you try it out?

[blikblum]

Thanks . This fixes this error. Although still not working.

Now fails with a different error:

X [ERROR] Could not read from file: D:/repositories/storybook-yarn/.yarn/__virtual__/react-dom-virtual-5c8c782fcf/4/C:/Users/camar/AppData/Local/Yarn/Berry/cache/react-dom-npm-18.2.0-dd675bca1c-10c0.zip/node_modules/react-dom/index.js

X [ERROR] Could not read from file: D:/repositories/storybook-yarn/.yarn/__virtual__/@storybook-addon-essentials-virtual-db46dc48fe/4/C:/Users/camar/AppData/Local/Yarn/Berry/cache/@storybook-addon-essentials-npm-7.6.0-alpha.3-bbfebc8cc7-10c0.zip/node_modules/@storybook/addon-essentials/dist/docs/mdx-react-shim.mjs

X [ERROR] Could not read from file: D:/repositories/storybook-yarn/.yarn/__virtual__/react-dom-virtual-5c8c782fcf/4/C:/Users/camar/AppData/Local/Yarn/Berry/cache/react-dom-npm-18.2.0-dd675bca1c-10c0.zip/node_modules/react-dom/client.js

C:\Users\camar\AppData\Local\Yarn\Berry\cache\@storybook-cli-npm-7.6.0-alpha.3-17672de923-10c0.zip\node_modules\@storybook\cli\bin\index.js:23
  throw error;
  ^

Error: Build failed with 3 errors:
error: Could not read from file: D:/repositories/storybook-yarn/.yarn/__virtual__/react-dom-virtual-5c8c782fcf/4/C:/Users/camar/AppData/Local/Yarn/Berry/cache/react-dom-npm-18.2.0-dd675bca1c-10c0.zip/node_modules/react-dom/index.js
error: Could not read from file: D:/repositories/storybook-yarn/.yarn/__virtual__/@storybook-addon-essentials-virtual-db46dc48fe/4/C:/Users/camar/AppData/Local/Yarn/Berry/cache/@storybook-addon-essentials-npm-7.6.0-alpha.3-bbfebc8cc7-10c0.zip/node_modules/@storybook/addon-essentials/dist/docs/mdx-react-shim.mjs
error: Could not read from file: D:/repositories/storybook-yarn/.yarn/__virtual__/react-dom-virtual-5c8c782fcf/4/C:/Users/camar/AppData/Local/Yarn/Berry/cache/react-dom-npm-18.2.0-dd675bca1c-10c0.zip/node_modules/react-dom/client.js
    at failureErrorWithLog (D:\repositories\storybook-yarn\.yarn\unplugged\esbuild-npm-0.18.20-004a76d281\node_modules\esbuild\lib\main.js:1649:15)
    at D:\repositories\storybook-yarn\.yarn\unplugged\esbuild-npm-0.18.20-004a76d281\node_modules\esbuild\lib\main.js:1058:25
    at D:\repositories\storybook-yarn\.yarn\unplugged\esbuild-npm-0.18.20-004a76d281\node_modules\esbuild\lib\main.js:1525:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: null,
      notes: [],
      pluginName: '',
      text: 'Could not read from file: D:/repositories/storybook-yarn/.yarn/__virtual__/react-dom-virtual-5c8c782fcf/4/C:/Users/camar/AppData/Local/Yarn/Berry/cache/react-dom-npm-18.2.0-dd675bca1c-10c0.zip/node_modules/react-dom/index.js'
    },
    {
      detail: undefined,
      id: '',
      location: null,
      notes: [],
      pluginName: '',
      text: 'Could not read from file: D:/repositories/storybook-yarn/.yarn/__virtual__/@storybook-addon-essentials-virtual-db46dc48fe/4/C:/Users/camar/AppData/Local/Yarn/Berry/cache/@storybook-addon-essentials-npm-7.6.0-alpha.3-bbfebc8cc7-10c0.zip/node_modules/@storybook/addon-essentials/dist/docs/mdx-react-shim.mjs'
    },
    {
      detail: undefined,
      id: '',
      location: null,
      notes: [],
      pluginName: '',
      text: 'Could not read from file: D:/repositories/storybook-yarn/.yarn/__virtual__/react-dom-virtual-5c8c782fcf/4/C:/Users/camar/AppData/Local/Yarn/Berry/cache/react-dom-npm-18.2.0-dd675bca1c-10c0.zip/node_modules/react-dom/client.js'
    }
  ],
  warnings: []
}

Node.js v18.12.1

[psychobolt]

Tried 7.6.0-alpha.6, but same issues as above with enableGlobalCache: true . There is a issue with resolving different drive paths. See discussion https://github.com/evanw/esbuild/issues/3131#issuecomment-1560479967

I managed to workaround it by configuring to same drive: globalFolder: "D:/.yarn/berry/global"

[tbrockman]

Ran into the same problem on a completely unrelated project (building a Tauri app), but following @psychobolt's configuration change solved the issue for me as well.

So, potentially unrelated to Storybook specifically and something around Yarn PnP + Windows.

[psychobolt]

@tbrockman From, https://github.com/evanw/esbuild/issues/3131#issuecomment-1560479967

This problem is caused by Windows not supporting relative paths between drives. Yarn avoids this with a hack where they pretend that relative paths between drives are allowed, while esbuild doesn't do this. A workaround is to make sure everything in the build is on the same drive when using esbuild.

Yarn should be able to resolve different drives without issues. Esbuild does not. So any libraries that depend on Esbuild will have the same issue, as I experienced similarly with Stylelint...

For another workaround is to configure environment variables, but you'll have to require all Window users to have HOME defined... e.g.

# .env for windows
HOME="D:/"

injectEnvironmentFiles:
  - .env?

globalFolder: "${HOME}/.yarn/berry/global"

[dark-kitt]

I recently started to add Storybook 8 and run in a similar issue with macOS. Everything works like expected but when I try to add the @storybook/addon-essentials then I get the following issue.

✘ [ERROR] Could not read from file: /Users/done/Workspace/vue-ts-kitt/.yarn/__virtual__/@storybook-blocks-virtual-76de42567a/3/.yarn/berry/cache/@storybook-blocks-npm-8.0.10-6f477cd35f-10c0.zip/node_modules/@storybook/blocks/dist

    ../../.yarn/berry/cache/@storybook-addon-docs-npm-8.0.10-a4fac154e7-10c0.zip/node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs:3:61:
      3 │ import { CodeOrSourceMdx, AnchorMdx, HeadersMdx, Docs } from '@storybook/blocks';
        ╵                                                              ~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not read from file: /Users/done/Workspace/vue-ts-kitt/.yarn/__virtual__/react-dom-virtual-c3570acd48/3/.yarn/berry/cache/react-dom-npm-18.3.1-a805663f38-10c0.zip/node_modules/react-dom/client

    .yarn/__virtual__/@storybook-react-dom-shim-virtual-9fe4787d9d/3/.yarn/berry/cache/@storybook-react-dom-shim-npm-8.0.10-319d8d5c7b-10c0.zip/node_modules/@storybook/react-dom-shim/dist/react-18.mjs:2:21:
      2 │ import ReactDOM from 'react-dom/client';

Note: When I remove the plugin, everything works fine it's just the @storybook/addon-essentials that crashes the system.

⚠️ I found my issue: https://github.com/storybookjs/storybook/issues/27094#issuecomment-2111749070

[squidjam]

I recently started to add Storybook 8 and run in a similar issue with macOS. Everything works like expected but when I try to add the @storybook/addon-essentials then I get the following issue.

✘ [ERROR] Could not read from file: /Users/done/Workspace/vue-ts-kitt/.yarn/__virtual__/@storybook-blocks-virtual-76de42567a/3/.yarn/berry/cache/@storybook-blocks-npm-8.0.10-6f477cd35f-10c0.zip/node_modules/@storybook/blocks/dist

    ../../.yarn/berry/cache/@storybook-addon-docs-npm-8.0.10-a4fac154e7-10c0.zip/node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs:3:61:
      3 │ import { CodeOrSourceMdx, AnchorMdx, HeadersMdx, Docs } from '@storybook/blocks';
        ╵                                                              ~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not read from file: /Users/done/Workspace/vue-ts-kitt/.yarn/__virtual__/react-dom-virtual-c3570acd48/3/.yarn/berry/cache/react-dom-npm-18.3.1-a805663f38-10c0.zip/node_modules/react-dom/client

    .yarn/__virtual__/@storybook-react-dom-shim-virtual-9fe4787d9d/3/.yarn/berry/cache/@storybook-react-dom-shim-npm-8.0.10-319d8d5c7b-10c0.zip/node_modules/@storybook/react-dom-shim/dist/react-18.mjs:2:21:
      2 │ import ReactDOM from 'react-dom/client';

Note: When I remove the plugin, everything works fine it's just the @storybook/addon-essentials that crashes the system.

⚠️ I found my issue: #27094 (comment)

Maybe don't do this, it will trigger all sorts of strange occurrences with MDX files.

Sidebar: This is frustrating. How is it that this version was pushed as a minor revision and a stable at that?

[geekyarjun]

Tried 7.6.0-alpha.6, but same issues as above with enableGlobalCache: true . There is a issue with resolving different drive paths. See discussion evanw/esbuild#3131 (comment)

I managed to workaround it by configuring to same drive: globalFolder: "D:/.yarn/berry/global"

This worked for me. Thanks

[squidjam]

Greetings from 15 hours later. What worked for me was creating a .yarnrc.yaml file with enableGlobalCache: false on it, as suggested [here].(https://github.com/evanw/esbuild/issues/3131#issuecomment-1979441036) (If you are using Azure DevOps, this will be your solution)