storybook: [Bug]: Failed to load preset: "@storybook/**/preset"

@re-thc Please delete your yarn.lock file and reinstall all dependencies. This should fix the issue.

Getting the same error when I run npx storybook build inside an app inside a Nx monorepo!

I’d like to reopen this issue. I’m also using yarn workspaces. In my case,@storybook/core-common is at the root (node_modules/@storybook/core-common) and the nextjs preset is in a workspace’s node_modules folder (apps/web/node_modules/@storybook/nextjs) (for some reason the @storybook/nextjs package is not hoisted to the root).

@storybook/core-common tries to load @storybook/nextjs/preset.js (at this line), but because it’s in a child node_modules folder, it can’t find it.

The solution imo would be to add a “cwd” argument to the loadPreset and interopRequireDefault functions, and then use require.resolve to resolve the path relative to the workspace where .storybook/main.ts is located.

e.g. (in interopRequireDefault):

 require(require.resolve("@storybook/nextjs/preset", { paths: [cwd] }))

If you’re in the same situation this is a workaround:

framework: path.resolve(require.resolve('@storybook/nextjs/preset'), '..'),

I think the “Remove .yarn.lock” and “Use resolutions” workarounds are sometimes working because Yarn might then decide to hoist @storybook/nextjs to the root level.

I’m getting

WARN   Failed to load preset: "@storybook/nextjs/preset"
ERR! Error: @storybook/core-common tried to access @storybook/nextjs, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

on a new project…

EDIT: Fixed by adding the --use-pnp flag for init, whoops.

Yes, yarn workspaces. Found the eventual workaround by deleting everything in .yarn/cache as well as all the node_module directories and re-installing fresh.

Hi ,

I got the same issue, using a yarn 3 monorepo and storybook 7.0.18 with most of storybook deps hoisted at the root but not “@storybook/vue3-webpack5” package which is located in /root/packages/vue3-project/node_modules because i have mixed vue2 and vue3 projects and storybooks…

when my config is

framework: '@storybook/vue3-webpack5',

i got the following stack when running sb dev

WARN   Failed to load preset: "@storybook\\vue3-webpack5\\preset"
ERR! Error: Cannot find module '@storybook\vue3-webpack5\preset'
ERR! Require stack:
ERR! - C:\dev\git\mpo-ui\node_modules\@storybook\core-common\dist\index.js
ERR! - C:\dev\git\mpo-ui\node_modules\@storybook\telemetry\dist\index.js
ERR! - C:\dev\git\mpo-ui\node_modules\@storybook\cli\dist\generate.js
ERR! - C:\dev\git\mpo-ui\node_modules\@storybook\cli\bin\index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)
ERR!     at Function.Module._resolveFilename (C:\dev\git\mpo-ui\node_modules\esbuild-register\dist\node.js:4768:36)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:866:27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1093:19)
ERR!     at require (node:internal/modules/cjs/helpers:108:18)
ERR!     at interopRequireDefault (C:\dev\git\mpo-ui\node_modules\@storybook\core-common\dist\index.js:6:21)
ERR!     at getContent (C:\dev\git\mpo-ui\node_modules\@storybook\core-common\dist\index.js:13:332)
ERR!     at loadPreset (C:\dev\git\mpo-ui\node_modules\@storybook\core-common\dist\index.js:13:517)
ERR!     at C:\dev\git\mpo-ui\node_modules\@storybook\core-common\dist\index.js:15:411
ERR!     at Array.map (<anonymous>)
ERR!  Error: Cannot find module '@storybook\vue3-webpack5\preset'

the fix

    framework: path.resolve(
        require.resolve('@storybook/vue3-webpack5/preset'),
        '..'
    ) as any,

resolve the issue when running sb dev , but when i try sb build i got the following stack

ERR! Require stack:
ERR! - C:\dev\git\mpo-ui\node_modules\@storybook\telemetry\dist\index.js
ERR! - C:\dev\git\mpo-ui\node_modules\@storybook\cli\dist\generate.js
ERR! - C:\dev\git\mpo-ui\node_modules\@storybook\cli\bin\index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)
ERR!     at Function.Module._resolveFilename (C:\dev\git\mpo-ui\node_modules\esbuild-register\dist\node.js:4768:36)
ERR!     at Function.resolve (node:internal/modules/cjs/helpers:114:19)
ERR!     at getActualPackageJson (C:\dev\git\mpo-ui\node_modules\@storybook\telemetry\dist\index.js:1:2095)
ERR!     at getFrameworkInfo (C:\dev\git\mpo-ui\node_modules\@storybook\telemetry\dist\index.js:1:4842)
ERR!     at computeStorybookMetadata (C:\dev\git\mpo-ui\node_modules\@storybook\telemetry\dist\index.js:1:7051)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async getStorybookMetadata (C:\dev\git\mpo-ui\node_modules\@storybook\telemetry\dist\index.js:1:9010)
ERR!     at async extractStorybookMetadata (C:\dev\git\mpo-ui\node_modules\@storybook\core-server\dist\index.js:10:5993)
ERR!     at async Promise.all (index 5)
ERR!  Error: Cannot find module 'C:\dev\git\mpo-ui\packages\mpo-cadre\node_modules\@storybook\vue3-webpack5\dist\package.json'

so i can’t publish the storybook 😢

I have the issue on 7.0.5 - Storybook inside a mono repo. The error must be related to some dependency conflicts because it randomly appears again. After removing the cache and re-install the issue persists: https://github.com/dohomi/tamagui-kitchen-sink

Same issue with Next 14.1.12, Yarn 4.11, storybook 8.0.5

i did delete my yarn.lock file and reinstall all dependencies

I have @storybook/nextjs 8.0.5 as well.

~Is this the 8 version of Vite problem?~

If I do it in pnpm, the problem disappears

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: .\.yarn\__virtual__\@storybook-nextjs-virtual-68f25513ea\3\AppData\Local\Yarn\Berry\cache\@storybook-nextjs-npm-8.0.5-f508cf7dc9-10c0.zip\node_modules\@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: @storybook/nextjs tried to access webpack (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Required package: webpack
Required by: @storybook/nextjs@virtual:67bccc7d0bcfa1230f52b04f252953235f3247e8df364142a4b7724e7369b822323dc3148cf3825512a8c0b70e04e7501cbd67f5ac8193999d7bc7a9f219cccb#npm:8.0.5 (via .\.yarn\__virtual__\@storybook-nextjs-virtual-68f25513ea\3\AppData\Local\Yarn\Berry\cache\@storybook-nextjs-npm-8.0.5-f508cf7dc9-10c0.zip\node_modules\@storybook\nextjs\dist\)
Ancestor breaking the chain: client@workspace:.

My storybook config

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

import { join, dirname } from "path"

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")))
}
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@chromatic-com/storybook"),
    getAbsolutePath("@storybook/addon-interactions"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/nextjs"),
    options: {},
  },
 ...
}
export default config

Bug affects the following issue: https://github.com/storybookjs/storybook/issues/21710#issuecomment-1499467835

I had the same problem in a Yarn 3 monorepo with workspaces. Solved it by setting the following in the package:

  "installConfig": {
    "hoistingLimits": "workspaces"
  }

That way nothing gets hoisted for that package. Not the best solution, but at least it works.

@YarnSh39 The Storybook types are a bit too strict in my opinion, the code actually does work. You can use as any to fix it:

framework: path.resolve(require.resolve('@storybook/nextjs/preset'), '..') as any,

@shilman @re-thc

I did the following:

1. yarn cache clean from the root directory
2. deleted node_modules both from the root directory and the my nextjs app workspace
3. yarn install at the root level -> node_modules added again both root and nextjs app workspace
4. navigate to my workspace yarn storybook

still complaining about @storybook/nextjs/preset missing 😞

Can you also refresh your yarn.lock. It seems, that for some reason conflicting/outdated dependencies are installed. In the above repro the issue was fixed by updating the yarn.lock file.

Same issue here. It was working some beta versions ago but updating to the latest broke it.

Can you install the package @storybook/nextjs and see whether the error goes away?