storybookjs/storybook

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

Open

#28970 opened on Aug 26, 2024

View on GitHub
 (5 comments) (1 reaction) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugbunhelp wantedsev:S3

Description

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

Contributor guide

Tech stack
typescriptreactstorybookvitebun
Domain
frontendtesting
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Basic JavaScriptFamiliarity with StorybookKnowledge of Bun runtime
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the EISDIR error occurring when reading a directory as a file in Vite's `loadPackageData`. The error trace points to `dep BzOvws4Y.js` in Vite's node modules. Focus on how Bun's `readFileSync` differs from Node.js, specifically in path resolution for symlinks or directory detection. Check if the issue is in Storybook's builder vite or Vite itself by testing with a minimal Vite setup. Look at the reproduction repo's `vite.config.ts` and Storybook configuration.