[Bug]: SB_CORE-SERVER_0002 (CriticalPresetLoadError) Failed to load preset: "@storybook/nextjs/preset"

[ajayv1]

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 - #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]

** 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

2. Verify that @storybook/nextjs is correctly installed and up-to-date.

npm install @storybook/nextjs@8.2.8

3. 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);
}

4. 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 · Edit Issue Bot Settings

[valentinpalkovic]

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

[acron0]

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]

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]

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.

[bashmish]

Might be related to #27227