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]: SB_CORE-SERVER_0002 torybook failed to load the following preset: ./.storybook/main.ts. #28725

Open omarkhatibco opened 1 month ago

omarkhatibco commented 1 month ago

Describe the bug

Hi Everyone, I can not update to storybook v8.2, the last working version is v8.1.11 it's always complains about the same error.

here is my log

bun run build
$ storybook build --docs
storybook v8.2.6

info => Cleaning outputDir: storybook-static
info => Loading presets
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./.storybook/main.ts.

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.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: /Users/userme/GitHub/repo/node_modules/@storybook/addon-console/dist/index.js.

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/internal/preview-api'
Require stack:
- /Users/userme/GitHub/repo/node_modules/@storybook/preview-api/shim.js
- /Users/userme/GitHub/repo/node_modules/@storybook/addon-actions/dist/index.js
- /Users/userme/GitHub/repo/node_modules/@storybook/addon-console/dist/index.js
- /Users/userme/GitHub/repo/node_modules/@storybook/core/dist/common/index.cjs
- /Users/userme/GitHub/repo/node_modules/@storybook/core/dist/telemetry/index.cjs
- ./node_modules/storybook/dist/generate.cjs
- ./node_modules/storybook/bin/index.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1219:15)
    at Module._resolveFilename (/Users/userme/GitHub/repo/node_modules/esbuild-register/dist/node.js:4799: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 Object.<anonymous> (/Users/userme/GitHub/repo/node_modules/@storybook/preview-api/shim.js:1:18)
    at Module._compile (node:internal/modules/cjs/loader:1504:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1588:10)

More info:

    at loadPreset (/Users/userme/GitHub/repo/node_modules/@storybook/core/dist/common/index.cjs:150276:13)

More info:

    at loadPreset (/Users/userme/GitHub/repo/node_modules/@storybook/core/dist/common/index.cjs:150276:13)
    at async Promise.all (index 2)
    at async loadPresets (/Users/userme/GitHub/repo/node_modules/@storybook/core/dist/common/index.cjs:150286:55)
    at async getPresets (/Users/userme/GitHub/repo/node_modules/@storybook/core/dist/common/index.cjs:150319:11)
    at async buildStaticStandalone (/Users/userme/GitHub/repo/node_modules/@storybook/core/dist/core-server/index.cjs:255381:11)
    at async withTelemetry (/Users/userme/GitHub/repo/node_modules/@storybook/core/dist/core-server/index.cjs:255711:12)
    at async build (./node_modules/storybook/dist/generate.cjs:738:1337)
    at async Command.<anonymous> (./node_modules/storybook/dist/generate.cjs:741:145)
WARN   Failed to load preset: {"type":"presets","name":"/Users/userme/GitHub/repo/node_modules/@storybook/addon-console/dist/index.js"} on level 1
Error: Cannot find module 'storybook/internal/preview-api'
Require stack:
- /Users/userme/GitHub/reponode_modules/@storybook/preview-api/shim.js
- /Users/userme/GitHub/repo/node_modules/@storybook/addon-actions/dist/index.js
- /Users/userme/GitHub/repo/node_modules/@storybook/addon-console/dist/index.js
- /Users/userme/GitHub/repo/node_modules/@storybook/core/dist/common/index.cjs
- /Users/userme/GitHub/repo/node_modules/@storybook/core/dist/telemetry/index.cjs
- ./node_modules/storybook/dist/generate.cjs
- ./node_modules/storybook/bin/index.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1219:15)
    at Module._resolveFilename (/Users/userme/GitHub/repo/node_modules/esbuild-register/dist/node.js:4799: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 Object.<anonymous> (/Users/userme/GitHub/repo/node_modules/@storybook/preview-api/shim.js:1:18)
    at Module._compile (node:internal/modules/cjs/loader:1504:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1588:10)
WARN   Failed to load preset: {"options":{"backgrounds":false},"type":"presets","name":"/Users/userme/GitHub/repo/node_modules/@storybook/addon-essentials/dist/index.js"} on level 1
Error: Cannot find module 'storybook/internal/node-logger'
Require stack:
- /Users/userme/GitHub/repo/node_modules/@storybook/addon-essentials/dist/index.js
- /Users/userme/GitHub/repo/node_modules/@storybook/core/dist/common/index.cjs
- /Users/userme/GitHub/repo/node_modules/@storybook/core/dist/telemetry/index.cjs
- ./node_modules/storybook/dist/generate.cjs
- ./node_modules/storybook/bin/index.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1219:15)
    at Module._resolveFilename (/Users/userme/GitHub/repo/node_modules/esbuild-register/dist/node.js:4799: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 Object.<anonymous> (/Users/userme/GitHub/repo/node_modules/@storybook/addon-essentials/dist/index.js:4:18)
    at Module._compile (node:internal/modules/cjs/loader:1504:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1588:10)
βœ” Would you like to help improve Storybook by sending anonymous crash reports? … yes
error: script "build" exited with code 1

Reproduction link

https://github.com/omarkhatibco/storybook-bug

Reproduction steps

Run bun install and then either bun dev or bun run build

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.5.1 - ~/.local/state/fnm_multishells/87651_1722089979737/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.local/state/fnm_multishells/87651_1722089979737/bin/npm <----- active
    pnpm: 9.6.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.72
    Safari: 17.5
  npmPackages:
    storybook: 8.2.6 => 8.2.6

Additional context

I'm using bun as a package mamanger

greptile-apps[bot] commented 1 month ago

Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the issue SB_CORE-SERVER_0002 (CriticalPresetLoadError), follow these steps:

  1. Check main.ts Configuration: Ensure that your .storybook/main.ts file is correctly configured. It should export a configuration object. Example:

    import type { StorybookConfig } from '@storybook/react-webpack5';
    const config: StorybookConfig = {
     stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
     framework: {
       name: '@storybook/react-webpack5',
       options: {},
     },
    };
    export default config;
  2. Verify Dependencies: Ensure all Storybook dependencies are correctly installed and there are no version mismatches. Check package.json for correct versions.

    "dependencies": {
     "@storybook/react-webpack5": "^8.2.6",
     "@storybook/addon-links": "^8.2.6",
     "@storybook/addon-essentials": "^8.2.6"
    }
  3. Check for Missing Modules: The error indicates missing modules like storybook/internal/preview-api. Ensure these modules are correctly installed. If not, try reinstalling Storybook.

    npm install @storybook/react-webpack5
  4. Inspect Presets: Verify that the presets in your main.ts are correctly referenced and installed. For example, if using @storybook/preset-react-webpack, ensure it is installed and correctly referenced.

    "dependencies": {
     "@storybook/preset-react-webpack": "^8.3.0-alpha.2"
    }
  5. Update Node Version: Ensure your Node.js version is compatible with Storybook v8.2.6. The engines field in package.json suggests Node >=18.0.0.

    "engines": {
     "node": ">=18.0.0"
    }
  6. Check for Symlink Issues: If using symlinks, ensure preserveSymlinks is set to true in your configuration if needed.

    "preserveSymlinks": true
  7. Debug Webpack Configuration: Enable debugWebpack in your main.ts to get more detailed logs.

    const config: StorybookConfig = {
     ...
     debugWebpack: true,
    };
  8. Review Preset Files: Ensure that preset files like @storybook/preset-react-webpack are correctly exported and available. Check the exports field in package.json.

    "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     }
    }

References

/code/core/src/server-errors.ts /code/presets/preact-webpack/package.json /docs/_snippets/custom-build-script-production.md /code/presets/vue3-webpack/package.json /code/frameworks/angular/src/builders/build-storybook/schema.json /code/presets/react-webpack/package.json /code/frameworks/ember/package.json /code/presets/server-webpack/src/lib/compiler/testfixtures /code/lib/core-webpack/package.json /code/addons/onboarding/package.json /code/presets/html-webpack/package.json /code/core/src/core-server/presets /code/presets/server-webpack/src/lib/compiler/testfixtures/kitchen_sink.json /code/lib/cli-storybook/package.json /code/frameworks/html-vite/src/preset.ts /code/deprecated/core-server/package.json /code/presets/server-webpack/package.json /code/builders/builder-webpack5 /code/core/package.json /code/lib/cli/src/automigrate/fixes/cra5.ts /code/lib/cli/src/automigrate/index.test.ts /code/renderers/preact/package.json /code/presets/server-webpack /code/addons/measure/package.json /code/presets/create-react-app/CHANGELOG.md

#### 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)
omarkhatibco commented 1 month ago

I tried to switch to pnpm v9.6.0, under branch pnpm

I also got error for both dev and build, here is the log

pn run build

> repo@ build /Users/omarkhatib/GitHub/storybook-bug
> turbo build --cache-dir=.turbo

β€’ Packages in scope: storybook
β€’ Running build in 1 packages
β€’ Remote caching disabled
β”Œ storybook#build > cache miss, executing 89e733db1277728e
β”‚
β”‚ > storybook@0.0.0 build /Users/omarkhatib/GitHub/storybook-bug/apps/storybook
β”‚ > storybook build --docs
β”‚
β”‚ storybook v8.2.6
β”‚
β”‚ info => Cleaning outputDir: storybook-static
β”‚ info => Loading presets
β”‚ info => Building manager..
β”‚ info => Manager built (66 ms)
β”‚ info => Building preview..
β”‚ info Using tsconfig paths for react-docgen
β”‚ vite v5.3.5 building for production...
β”‚ βœ“ 18 modules transformed.
β”‚ x Build failed in 96ms
β”‚ => Failed to build the preview
β”‚ [vite]: Rollup failed to resolve import "storybook/internal/docs-tools" from "/Users/omarkhatib/GitHub/storybook-bug/node_modules/@storybook/react/dist/entry-preview-docs.mjs".
β”‚ This is most likely unintended because it can break your application at runtime.
β”‚ If you do want to externalize this module explicitly add it to
β”‚ `build.rollupOptions.external`
β”‚     at viteWarn (file:///Users/omarkhatib/GitHub/storybook-bug/node_modules/.pnpm/vite@5.3.5_@types+node@20.14.12_lightningcss@1.25.1/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:65265:17)
β”‚     at onwarn (file:///Users/omarkhatib/GitHub/storybook-bug/node_modules/@vitejs/plugin-react-swc/index.mjs:203:9)
β”‚     at onRollupWarning (file:///Users/omarkhatib/GitHub/storybook-bug/node_modules/.pnpm/vite@5.3.5_@types+node@20.14.12_lightningcss@1.25.1/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:65
β”‚ 295:5)
β”‚     at onwarn (file:///Users/omarkhatib/GitHub/storybook-bug/node_modules/.pnpm/vite@5.3.5_@types+node@20.14.12_lightningcss@1.25.1/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:64960:7)
β”‚     at file:///Users/omarkhatib/GitHub/storybook-bug/node_modules/.pnpm/rollup@4.19.1/node_modules/rollup/dist/es/shared/node-entry.js:18606:13
β”‚     at Object.logger [as onLog] (file:///Users/omarkhatib/GitHub/storybook-bug/node_modules/.pnpm/rollup@4.19.1/node_modules/rollup/dist/es/shared/node-entry.js:20254:9)
β”‚     at ModuleLoader.handleInvalidResolvedId (file:///Users/omarkhatib/GitHub/storybook-bug/node_modules/.pnpm/rollup@4.19.1/node_modules/rollup/dist/es/shared/node-entry.js:19196:26)
β”‚     at file:///Users/omarkhatib/GitHub/storybook-bug/node_modules/.pnpm/rollup@4.19.1/node_modules/rollup/dist/es/shared/node-entry.js:19154:26
β”‚ transforming (153) ../../node_modules/.pnpm/@storybook+blocks@8.2.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_storybook@8.2.6_@babel+pr_neuokea5tjmhvdxasytuqhsoxa/node_modules/@storybook/block
β”‚ transforming (230) ../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/identity.js🐼 info [hrtime] Extracted in (5.04ms)
β”‚ transforming (361) ../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_getAllKeysIn.js
└────>
 ERROR  run failed: command  exited (1)
 ELIFECYCLE  Command failed with exit code 1.
shilman commented 1 month ago

I was able to get your storybook running in pnpm by adding two missing dependencies:

I'm not sure what's going on with bun.