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]: SB_CORE-SERVER_0002 (CriticalPresetLoadError) Failed to load preset: "@storybook/nextjs/preset" #28861

Closed ajayv1 closed 11 hours ago

ajayv1 commented 1 month ago

Describe the bug

I am getting this error after the storybook is upgraded to the 8.2.x version.

package.json file

{ ... "peerDependencies": { "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-toast": "^1.1.5", "@types/react-lottie": "^1.2.10", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "date-fns": "^3.6.0", "next": "^14.2.2", "react": "^18", "react-day-picker": "^8.10.1", "react-dom": "^18", "react-lottie": "^1.2.4", "tailwind-merge": "^2.2.2", "tailwind-scrollbar-hide": "^1.1.7", "tailwindcss": "^3.4.3", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@chromatic-com/storybook": "^1.6.1", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-image": "^3.0.3", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-typescript": "^11.1.6", "@rollup/plugin-url": "^8.0.2", "@storybook/addon-essentials": "^8.2.8", "@storybook/addon-interactions": "^8.2.8", "@storybook/addon-links": "^8.2.8", "@storybook/addon-onboarding": "^8.2.8", "@storybook/addon-webpack5-compiler-swc": "^1.0.5", "@storybook/blocks": "^8.2.8", "@storybook/nextjs": "^8.2.8", "@storybook/react": "^8.2.8", "@storybook/react-webpack5": "^8.2.8", "@storybook/test": "^8.2.8", "@types/react": "^18.2.78", "@types/react-dom": "^18.2.25", "@typescript-eslint/eslint-plugin": "^7.6.0", "@typescript-eslint/parser": "^7.6.0", "autoprefixer": "^10.4.19", "css-loader": "^7.1.2", "del": "^7.1.0", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-storybook": "^0.8.0", "postcss": "^8.4.38", "postcss-loader": "^8.1.1", "prettier": "^3.2.5", "rollup": "^4.19.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-copy": "^3.5.0", "rollup-plugin-dts": "^6.1.0", "rollup-plugin-import-css": "^3.5.0", "rollup-plugin-peer-deps-external": "^2.2.4", "storybook": "^8.2.8", "style-loader": "^4.0.0", "typescript": "^5.4.5" }, }

.storybook/main.ts file

import { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
    stories: ["../src/**/stories.@(ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@chromatic-com/storybook",
        "@storybook/addon-interactions",
    ],
    framework: {
        name: "@storybook/nextjs",
        options: {},
    },
    docs: {
        autodocs: "tag",
    },
    staticDirs: ["../public"],
};
export default config;

preview.ts file

import type { Preview } from "@storybook/react";
import "../src/styles/global.css";

const preview: Preview = {
    parameters: {
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i,
            },
        },
    },
};

export default preview;

when I'm running npm run build getting following error -

storybook v8.2.8

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/nextjs/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 'next/constants'
Require stack:
- ./node_modules/@storybook/nextjs/dist/preset.js
- ./node_modules/@storybook/core/dist/common/index.cjs
- ./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:1143:15)
    at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4794:36)
    at Module._load (node:internal/modules/cjs/loader:984:27)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (./node_modules/@storybook/nextjs/dist/preset.js:1:8375)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Object.newLoader (./node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (./node_modules/esbuild-register/dist/node.js:4833:24)

More info: 

    at loadPreset (./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.

I have also tried all suggestions mentioned in this thread - https://github.com/storybookjs/storybook/issues/21216 but it didn't work for me.the

Reproduction link

Tried with SB

Reproduction steps

Using NextJs "next": "^14.2.2", as peer deps. I have already pasted the complete package.json file, creating a nextjs project with it will reproduce the error.

System

Storybook Environment Info:

  System:
    OS: macOS 14.1
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm <----- active
  Browsers:
    Chrome: 127.0.6533.100
    Safari: 17.1
  npmPackages:
    @storybook/addon-essentials: ^8.2.8 => 8.2.8 
    @storybook/addon-interactions: ^8.2.8 => 8.2.8 
    @storybook/addon-links: ^8.2.8 => 8.2.8 
    @storybook/addon-onboarding: ^8.2.8 => 8.2.8 
    @storybook/addon-webpack5-compiler-swc: ^1.0.5 => 1.0.5 
    @storybook/blocks: ^8.2.8 => 8.2.8 
    @storybook/nextjs: ^8.2.8 => 8.2.8 
    @storybook/react: ^8.2.8 => 8.2.8 
    @storybook/react-webpack5: ^8.2.8 => 8.2.8 
    @storybook/test: ^8.2.8 => 8.2.8 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.2.8 => 8.2.8

Additional context

No response

greptile-apps[bot] commented 1 month ago

Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the CriticalPresetLoadError for @storybook/nextjs/preset, follow these steps:

  1. Ensure next/constants is available in your project. If not, install the required version of next.
npm install next@14.2.2
  1. Verify that @storybook/nextjs is correctly installed and up-to-date.
npm install @storybook/nextjs@8.2.8
  1. Check the preset.js file in @storybook/nextjs package for the correct import path of next/constants.
// node_modules/@storybook/nextjs/dist/preset.js
try {
  const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
  // Ensure this path is correct and the module exists
} catch (error) {
  console.error('Error loading next/constants:', error);
}
  1. If the issue persists, consider downgrading next to a compatible version or updating Storybook dependencies to match the next version.

References

/code/core/src/server-errors.ts /code/presets/preact-webpack/package.json /code/presets/react-webpack/package.json /code/addons/onboarding/package.json /code/presets/vue3-webpack/package.json /code/frameworks/ember/package.json /code/presets/server-webpack/src/lib/compiler/testfixtures /code/presets/server-webpack/package.json /code/deprecated/preview-api/package.json /code/core/src/core-server/presets /code/presets/html-webpack/package.json /code/lib/core-webpack/package.json /code/renderers/preact/package.json /code/presets/preact-webpack /code/presets/server-webpack/src/index.ts /code/presets/create-react-app/CHANGELOG.md /code/deprecated/core-server/package.json /code/frameworks/html-vite/src/preset.ts /code/presets/react-webpack /code/frameworks/angular/src/builders/build-storybook/schema.json /code/core/package.json /code/lib/cli-storybook/package.json /code/presets/svelte-webpack /code/frameworks/nextjs/package.json /code/presets/server-webpack

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

Hi @ajayv1 Could you please provide a reproduction via https://new-storybook.netlify.app/?

acron0 commented 4 weeks ago

Same issue here

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

...

Error: Cannot find module 'storybook/internal/common'
Require stack:
- ./node_modules/@storybook/nextjs/dist/preset.js
- ./node_modules/@storybook/core-common/dist/index.js
- ./node_modules/@storybook/telemetry/dist/index.js
- ./node_modules/@storybook/cli/dist/generate.js
- ./node_modules/@storybook/cli/bin/index.js
- ./node_modules/storybook/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
    at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
    at Module._load (node:internal/modules/cjs/loader:981:27)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (./node_modules/@storybook/nextjs/dist/preset.js:1:8132)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Object.newLoader (./node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (./node_modules/esbuild-register/dist/node.js:4838:24)
    at loadPreset (./node_modules/@storybook/core-common/dist/index.js:15:82)
github-actions[bot] commented 1 week ago

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

github-actions[bot] commented 11 hours ago

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.