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

RonGootmanOasis commented 1 year ago

Describe the bug

I completed the storybook auto upgrade to support it's integration with next npx storybook@next upgrade --prerelease

all the relevant storybook packages upgraded to "^7.0.0-beta.53"

my script tag was successfully changed to

"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"

I am running a monorepo with yarn workspaces therefore I added the specific path for my next.config.mjs file in my .storybook/main.js file

framework: {
        name: '@storybook/nextjs',
        options: {
            nextConfigPath: path.resolve(__dirname, '../next.config.mjs'),
        },
    }

when I go ahead and yarn storybook and get the following error:

Failed to load preset: "@storybook/nextjs/preset"
ERR! Error: Cannot find module '@storybook/nextjs/preset'

To Reproduce

I have "next": "13.0.2", and my storybook version was

"@storybook/addon-actions": "^6.5.13",
 "@storybook/addon-essentials": "^6.5.13",
 "@storybook/addon-interactions": "^6.5.13",
 "@storybook/addon-links": "^6.5.13",
 "@storybook/builder-webpack5": "^6.5.13",
 "@storybook/manager-webpack5": "^6.5.13",
 "@storybook/react": "^6.5.13",
 "@storybook/testing-library": "^0.0.13",

run npx storybook@next upgrade --prerelease

all storybook packages successfully
scripts successfully changed

.storybook/main.js file changed too

path = require('path');
module.exports = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
staticDirs: ['../public'],
addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@chakra-ui/storybook-addon',
],
framework: {
    name: '@storybook/nextjs',
    options: {
        nextConfigPath: path.resolve(__dirname, '../next.config.mjs'),
    },
},
webpackFinal: async (config) => {
    config.resolve.alias = {
        ...config.resolve.alias,
        '~': path.resolve(__dirname, '../src/'),
        'next-i18next': 'react-i18next',
    };
    config.resolve.extensions.push('.ts', '.tsx');
    const fileLoaderRule = config.module.rules.find((rule) => rule.test && rule.test.test('.svg'));
    fileLoaderRule.exclude = /\.svg$/;
    config.module.rules.push({
        test: /\.svg$/,
        enforce: 'pre',
        loader: require.resolve('@svgr/webpack'),
    });
    return config;
},
docs: {
    autodocs: true,
},
};

my error:

@storybook/cli v7.0.0-beta.53

WARN   Failed to load preset: "@storybook/nextjs/preset"
ERR! Error: Cannot find module '@storybook/nextjs/preset'

System

No response

Additional context

No response

valentinpalkovic commented 1 year ago

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

valentinpalkovic commented 1 year ago

@yannbf Any idea, why the framework field got updated correctly, but the package.json does not include @storybook/nextjs?

RonGootmanOasis commented 1 year ago

@valentinpalkovic I installed @storybook/nextjs separately and it's still the same issue.

here are my storybook packages:

        "@storybook/addon-actions": "^7.0.0-beta.53",
        "@storybook/addon-essentials": "^7.0.0-beta.53",
        "@storybook/addon-interactions": "^7.0.0-beta.53",
        "@storybook/addon-links": "^7.0.0-beta.53",
        "@storybook/nextjs": "^7.0.0-alpha.41",
        "@storybook/react": "^7.0.0-beta.53",
        "@storybook/testing-library": "^0.0.14-next.1",
        "storybook": "^7.0.0-beta.53"

valentinpalkovic commented 1 year ago

You have installed a previous alpha version (^7.0.0-alpha.41). Please install the latest beta

RonGootmanOasis commented 1 year ago

@valentinpalkovic I have all of my storybook packages now at 7.0.0-beta.53

still no luck :(

re-thc commented 1 year ago

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

shilman commented 1 year ago

Is everybody here using yarn workspaces? Does anybody have a reproduction handy?

re-thc commented 1 year ago

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.

RonGootmanOasis commented 1 year ago

@shilman @re-thc

I did the following:

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

still complaining about @storybook/nextjs/preset missing 😞

shilman commented 1 year ago

Repro here: https://github.com/AnswerOverflow/AnswerOverflow/commit/9aaaabe891b6f92dacec23845bdb814bd3c7a52d

valentinpalkovic commented 1 year ago

@shilman @re-thc

I did the following:

yarn cache clean from the root directory

deleted node_modules both from the root directory and the my nextjs app workspace

yarn install at the root level -> node_modules added again both root and nextjs app workspace

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.

valentinpalkovic commented 1 year ago

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

Jengamon commented 1 year ago

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.

valentinpalkovic commented 1 year ago

Please feel free to reopen the issue if it is still not working for some of you. We have provided some guidance, which should fix the problem.

dohomi commented 1 year ago

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

hansottowirtz commented 1 year ago

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.

dohomi commented 1 year ago

I could fix my issue with adding typescript to the root package.json resolutions. I had two different versions of Typescript and after I pinned it to 5.0.3 everything start working again.

YarnSh39 commented 1 year ago

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

I have the same issue as above, using nextjs and @storybook/cli v7.0.6 in monorepo - the only solution works is to add path directly to the framework, however ts is not happy Type 'string' is not assignable to type '"@storybook/nextjs" | { name: "@storybook/nextjs"; options: FrameworkOptions; }'.ts(2322) types-96e623f7.d.ts(11, 5): The expected type comes from property 'framework' which is declared here on type 'StorybookConfig'

hansottowirtz commented 1 year ago

@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,

TheKnarf commented 1 year ago

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.

mandarini commented 1 year ago

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

chuckmah commented 1 year ago

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 :'(

Aromokeye commented 1 year ago

This works for any other workspaces setup too. Thank you.

LarsArtmann commented 1 year ago

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.

npx storybook init --package-manager=pnpm --use-pnp worked for me. Thx.

valentinpalkovic commented 1 year ago

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

2manoj1 commented 1 year ago

Same issue in Turborepo with npm

saunafox commented 9 months ago

Hello! Same problem. Vue2, Storybook 7.6.17 Error when starting - Storybook failed to load the following preset: ./node_modules/@storybook/vue-webpack5/preset. My config:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const getAbsolutePath = (packageName) =>
    path.dirname(require.resolve(path.join(packageName, 'package.json')));

module.exports = {
    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    framework: {
        name: getAbsolutePath('@storybook/vue-webpack5'),
        options: {}
    },
    ...
};

Zero-1016 commented 8 months ago

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

DerWaffleHousen commented 7 months ago

On:

Next: 14.2.1
Yarn: 4.1.1
Storybook: 8.0.8

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

In package.json there is an explicit:

"@storybook/nextjs": "^8.0.8",

Removing yarn.lock and node_modules/ did not help.

Adding this to package.json did not help:

  "installConfig": {
    "php": true
  }

valentinpalkovic commented 7 months ago

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

@Zero-1016 Do you have webpack installed, since @storybook/nextjs is requiring it as a peer dependency?

Zero-1016 commented 7 months ago

@valentinpalkovic I had @storybook/nextjs, but I don't think there was a webpack. I might have added it while converting it to ppm, so I checked and found that there was no record left. Sorry for the misinformation

WillsB3 commented 5 months ago

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 had the same issue using plain NPM workspaces and the workaround suggested in this comment helped me. Thanks 👍

fcFn commented 3 months ago

I feel pretty stupid, but I got this error when I tried to run npx storybook@latest dev instead of the script that init command adds to package.json. Maybe someone would find that information useful. And also maybe there's a way to somehow warn the user not to run dev from npx too?

yannbf commented 1 month ago

Hey @fcFn thanks for sharing the use case. Why would you ever run a command like that? We don't have that in any of our docs, and we recommend using the script that storybook init provides. If you run npx storybook dev it should work fine because it will use your currently installed Storybook CLI, however if you do npx storybook@latest dev and you're not on latest, it will download a remote package which will try to require a bunch of dependencies that will conflict in versions, and that will cause trouble.

fcFn commented 1 month ago

I suppose it was just a brain fart of sorts 🫠

Hey @fcFn thanks for sharing the use case. Why would you ever run a command like that? We don't have that in any of our docs, and we recommend using the script that storybook init provides. If you run npx storybook dev it should work fine because it will use your currently installed Storybook CLI, however if you do npx storybook@latest dev and you're not on latest, it will download a remote package which will try to require a bunch of dependencies that will conflict in versions, and that will cause trouble.

storybookjs / storybook