search

storybookjs / storybook

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

[Bug]: Using a project with PNPM and Vite cannot find #28845

Open eTech-Source opened 1 month ago

eTech-Source commented 1 month ago

Describe the bug

When running pnpx storybook dev I get an error:

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/react-vite/preset.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error: Cannot find module '@storybook/react-vite/preset'
Require stack:
- /Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/common/index.cjs
- /Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/telemetry/index.cjs
- /Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/storybook@8.2.8_@babel+preset-env@7.25.3_@babel+core@7.25.2_/node_modules/storybook/dist/generate.cjs
- /Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/storybook@8.2.8_@babel+preset-env@7.25.3_@babel+core@7.25.2_/node_modules/storybook/bin/index.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1219:15)
    at Module._resolveFilename (/Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/esbuild-register@3.6.0_esbuild@0.21.5/node_modules/esbuild-register/dist/node.js:4794:36)
    at Module._load (node:internal/modules/cjs/loader:1045:27)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:215:24)
    at Module.require (node:internal/modules/cjs/loader:1304:12)
    at require (node:internal/modules/helpers:123:16)
    at interopRequireDefault (/Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/common/index.cjs:145609:11)
    at getContent (/Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/common/index.cjs:150235:10)
    at loadPreset (/Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/common/index.cjs:150241:51)

More info: 

    at loadPreset (/Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/common/index.cjs:150276:13)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

    ~/git/etech-ui/apps/storybook/vite-react  on   2-create-etech-ui-utils ⇡10 !21 ?2 ────────────────────────────────────────── at 05:02:11 PM  
❯ pnpx storybook build
storybook v8.2.8

info => Cleaning outputDir: storybook-static
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
info => Loading presets
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/react-vite/preset.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error: Cannot find module '@storybook/react-vite/preset'
Require stack:
- /Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/common/index.cjs
- /Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/telemetry/index.cjs
- /Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/storybook@8.2.8_@babel+preset-env@7.25.3_@babel+core@7.25.2_/node_modules/storybook/dist/generate.cjs
- /Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/storybook@8.2.8_@babel+preset-env@7.25.3_@babel+core@7.25.2_/node_modules/storybook/bin/index.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1219:15)
    at Module._resolveFilename (/Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/esbuild-register@3.6.0_esbuild@0.21.5/node_modules/esbuild-register/dist/node.js:4794:36)
    at Module._load (node:internal/modules/cjs/loader:1045:27)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:215:24)
    at Module.require (node:internal/modules/cjs/loader:1304:12)
    at require (node:internal/modules/helpers:123:16)
    at interopRequireDefault (/Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/common/index.cjs:145609:11)
    at getContent (/Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/common/index.cjs:150235:10)
    at loadPreset (/Users/ekrich/Library/Caches/pnpm/dlx/fstaswuptgmqoc2ie5unfomv7m/1912f4ffac9-14d0d/node_modules/.pnpm/@storybook+core@8.2.8/node_modules/@storybook/core/dist/common/index.cjs:150241:51)

Reproduction link

https://github.com/eTech-Source/sb-repro

Reproduction steps

  1. Clone the repo
  2. Run pnpm install
  3. Run pnpx storybook dev

You should get the above error.

System

Storybook Environment Info:

  System:
    OS: macOS 14.6
    CPU: (12) arm64 Apple M2 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.5.1 - ~/.nvm/versions/node/v22.5.1/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.5.1/bin/npm
    pnpm: 9.6.0 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Safari: 17.6
  npmPackages:
    @storybook/addon-essentials: 8.2.8 => 8.2.8 
    @storybook/addon-interactions: 8.2.8 => 8.2.8 
    @storybook/builder-vite: 8.2.8 => 8.2.8 
    @storybook/core-server: 8.2.8 => 8.2.8 
    @storybook/react: ^8.2.8 => 8.2.8 
    @storybook/react-vite: 8.2.8 => 8.2.8 
    @storybook/test-runner: ^0.13.0 => 0.13.0 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    storybook: 8.2.8 => 8.2.8

Additional context

This issue was originally found in NX project. However, it is still reproducible without NX. This error only occurs with pnpm and the latest SB version.

greptile-apps[bot] commented 1 month ago

Disclaimer This information might be inaccurate, due to it being generated automatically The issue seems to be related to the module resolution with PNPM. To resolve this, ensure that the @storybook/react-vite preset is correctly installed and accessible. Here are the steps:

  1. Verify that @storybook/react-vite is listed as a dependency in your package.json.
{
  "dependencies": {
    "@storybook/react-vite": "8.2.8"
  }
}

  1. Run pnpm install to ensure all dependencies are correctly installed.

  2. Check the presets array in your .storybook/main.js to ensure it includes @storybook/react-vite/preset.

module.exports = {
  // other configurations
  presets: [
    '@storybook/react-vite/preset'
  ],
};
  1. If the issue persists, try clearing the PNPM cache and reinstalling the dependencies:
pnpm store prune
pnpm install

References

/code/core/src/server-errors.ts /code/presets/preact-webpack/package.json /code/presets/svelte-webpack /code/presets/preact-webpack /code/presets/vue3-webpack/package.json /code/presets/react-webpack/package.json /code/frameworks/svelte-vite/package.json /code/renderers/preact/package.json /code/builders/builder-vite/package.json /code/addons/onboarding/package.json /code/core/src/common/presets.test.ts /code/lib/cli-storybook/package.json /code/frameworks/preact-vite /code/presets/vue3-webpack /code/frameworks/html-vite/src/preset.ts /code/presets/react-webpack /code/presets/svelte-webpack/package.json /code/presets/html-webpack/package.json /code/lib/cli/src/helpers.test.ts /code/presets/server-webpack/src/lib/compiler/testfixtures /code/frameworks/svelte-webpack5 /code/presets/server-webpack /code/builders/builder-webpack5 /code/frameworks/preact-vite/package.json /code/frameworks/web-components-vite/package.json

#### About Greptile This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)