storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.98k stars 9.23k forks source link

[Bug]: `EISDIR: [postcss] Is a directory` after updating from `8.1.11` to `8.2.0` with Bun #28970

Open LoganDark opened 3 weeks ago

LoganDark commented 3 weeks ago

Describe the bug

With Storybook 8.2.0 or higher, and using Bun as the JavaScript runtime instead of Node.js, the Storybook server starts correctly but upon trying to load any preview it throws an error:

PS C:\Users\LoganDark\bunvite> bun storybook
$ bunx --bun storybook dev -p 6006 --no-open
storybook v8.2.0

info => Starting manager..
info => Starting preview..
info Using tsconfig paths for react-docgen
Re-optimizing dependencies because lockfile has changed
╭──────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                          │
│   Storybook 8.2.0 for react-vite started                                                 │
│   156 ms for manager and 911 ms for preview                                              │
│                                                                                          │
│    Local:            http://localhost:6006/                                              │
│    On your network:  http://169.254.27.237:6006/                                         │
│                                                                                          │
│   A new version (8.2.8) is available!                                                    │
│                                                                                          │
│   Upgrade now: npx storybook@latest upgrade                                              │
│                                                                                          │
│   Read full changelog: https://github.com/storybookjs/storybook/blob/main/CHANGELOG.md   │
│                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────╯
16585 |     path$n.dirname(nearestPackage.dir),
16586 |     packageCache
16587 |   ));
16588 | }
16589 | function loadPackageData(pkgPath) {
16590 |   const data = JSON.parse(fs__default.readFileSync(pkgPath, "utf-8"));
        ^
EISDIR: [postcss] Is a directory
   errno: -21
   code: "
      @font-face {
        font-family: 'Nunito Sans';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
      }

      @font-face {
        font-family: 'Nunito Sans';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
      }

      @font-face {
        font-family: 'Nunito Sans';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
      }

      @font-face {
        font-family: 'Nunito Sans';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
      }
    "
 syscall: "read"
      fd: 3

      at readFileSync (native:1:1)
      at loadPackageData (C:\Users\LoganDark\bunvite\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:16590:39)
      at tryCleanFsResolve (C:\Users\LoganDark\bunvite\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:46292:23)
      at tryFsResolve (C:\Users\LoganDark\bunvite\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:46226:15)
      at C:\Users\LoganDark\bunvite\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:46048:19
      at resolveId (C:\Users\LoganDark\bunvite\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:45973:25)
      at C:\Users\LoganDark\bunvite\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:48919:17
      at processTicksAndRejections (unknown:12:39)
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files

Bun v1.1.26 (Windows x64)
error: script "storybook" exited with code 1

If I downgrade to Storybook 8.1.11, it works properly and the preview can be loaded/used (timestamps censored):

PS C:\Users\LoganDark\bunvite> bun storybook
$ bunx --bun storybook dev -p 6006 --no-open
@storybook/cli v8.1.11

info => Starting manager..
info => Starting preview..
info Using tsconfig paths for react-docgen
╭──────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                          │
│   Storybook 8.1.11 for react-vite started                                                │
│   160 ms for manager and 821 ms for preview                                              │
│                                                                                          │
│    Local:            http://localhost:6006/                                              │
│    On your network:  http://169.254.27.237:6006/                                         │
│                                                                                          │
│   A new version (8.2.8) is available!                                                    │
│                                                                                          │
│   Upgrade now: npx storybook@latest upgrade                                              │
│                                                                                          │
│   Read full changelog: https://github.com/storybookjs/storybook/blob/main/CHANGELOG.md   │
│                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────╯
X:XX:XX XM [vite] ✨ new dependencies optimized: @storybook/addon-themes
X:XX:XX XM [vite] ✨ optimized dependencies changed. reloading

Reproduction link

https://github.com/LoganDark/bunstorybookrepro

Reproduction steps

from readme of above repository

How to reproduce

  1. Install latest Bun
  2. Run bun install
  3. Run bun storybook
  4. Load http://localhost:6006 in browser
  5. Storybook server immediately crashes:

    16585 |     path$n.dirname(nearestPackage.dir),
    16586 |     packageCache
    16587 |   ));
    16588 | }
    16589 | function loadPackageData(pkgPath) {
    16590 |   const data = JSON.parse(fs__default.readFileSync(pkgPath, "utf-8"));
           ^
    EISDIR: [postcss] Is a directory
      errno: -21
      code: "
         @font-face {
           font-family: 'Nunito Sans';
           font-style: normal;
           font-weight: 400;
           font-display: swap;
           src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
         }
    
         @font-face {
           font-family: 'Nunito Sans';
           font-style: italic;
           font-weight: 400;
           font-display: swap;
           src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
         }
    
         @font-face {
           font-family: 'Nunito Sans';
           font-style: normal;
           font-weight: 700;
           font-display: swap;
           src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
         }
    
         @font-face {
           font-family: 'Nunito Sans';
           font-style: italic;
           font-weight: 700;
           font-display: swap;
           src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
         }
       "
    syscall: "read"
         fd: 3
    
         at readFileSync (native:1:1)
         at loadPackageData (C:\Users\LoganDark\bunstorybookrepro\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:16590:39)
         at tryCleanFsResolve (C:\Users\LoganDark\bunstorybookrepro\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:46292:23)
         at tryFsResolve (C:\Users\LoganDark\bunstorybookrepro\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:46226:15)
         at C:\Users\LoganDark\bunstorybookrepro\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:46048:19
         at resolveId (C:\Users\LoganDark\bunstorybookrepro\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:45973:25)
         at C:\Users\LoganDark\bunstorybookrepro\node_modules\vite\dist\node\chunks\dep-BzOvws4Y.js:48919:17
         at processTicksAndRejections (unknown:12:39)
    Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
    Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
    
    Bun v1.1.26 (Windows x64)
    error: script "storybook" exited with code 1

How to fix

  1. Open package.json
  2. Change storybook version to 8.1.11
  3. Run bun install
  4. Run bun storybook
  5. Open http://localhost:6006 in browser
  6. Storybook server does not crash

System

It doesn't work properly because it runs npm commands.

Storybook Environment Info:
(node:5476) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

  System:
    OS: Windows 11 10.0.25931
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400F
  Binaries:
    Node: 22.1.0 - ~\AppData\Local\pnpm\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.7.0 - ~\AppData\Local\pnpm\npm.CMD <----- active
    pnpm: 8.11.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Spartan (Visual Studio 2022 Command Prompt variables set.), Chromium (127.0.2610.3), ChromiumDev (Visual Studio 2022 Command Prompt variables set.)      
  npmPackages:
    @storybook/react: 8.2.0 => 8.1.11
    @storybook/react-vite: 8.2.0 => 8.1.11
    storybook: 8.2.0 => 8.1.11

Bun version is 1.1.26, but this happens on any version of Bun

LoganDark commented 3 weeks ago

I'm not running malware on my computer

(edit in case the above comments get deleted by github support: there were some bots that posted malicious links)