Storybook - Failed to load preset: "@storybook\\react-vite\\preset"

Question

I'm trying to use Storybook following https://turbo.build/repo/docs/handbook/tools/storybook guide (I'm using pnpm).

apps/workshop/package.json

{
  "name": "workshop",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "storybook dev -p 6006",
    "build": "storybook build",
    "preview": "vite preview"
  },
  "dependencies": {
    "ui": "workspace:^",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.0.2",
    "@storybook/addon-interactions": "^7.0.2",
    "@storybook/addon-links": "^7.0.2",
    "@storybook/blocks": "^7.0.2",
    "@storybook/cli": "^7.0.2",
    "@storybook/react": "^7.0.2",
    "@storybook/react-vite": "^7.0.2",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "prop-types": "^15.8.1",
    "storybook": "^7.0.2",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}

apps/workshop/.storybook/main.ts

import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

package.json (root)

{
  "name": "deltaxia",
  "version": "0.0.0",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },
  "devDependencies": {
    "eslint-config-deltaxia": "workspace:*",
    "prettier": "latest",
    "turbo": "latest"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "packageManager": "pnpm@8.1.1"
}

turbo.json (root)

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**", "!.next/cache/**", "storybook-static/**"]
    },
    "lint": {
      "outputs": []
    },
    "dev": {
      "cache": false
    }
  }
}

.npmrc (root)

auto-install-peers=true
legacy-peer-deps=true
node-linker=hoisted

But at the time of runing turbo run dev at workspace root i get the following error:

workshop:dev: cache bypass, force executing 358cb15b26e93b96
workshop:dev: 
workshop:dev: > workshop@0.0.0 dev C:\Users\jramo\Documents\deltaxia\apps\workshop
workshop:dev: > storybook dev -p 6006
workshop:dev:
workshop:dev: @storybook/cli v7.0.2
workshop:dev:
workshop:dev: WARN   Failed to load preset: "@storybook\\react-vite\\preset"
workshop:dev: ERR! Error: Cannot find module '@storybook\react-vite\preset'
workshop:dev: ERR! Require stack:
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\telemetry\dist\index.js
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\cli\dist\generate.js
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\cli\bin\index.js
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\storybook\index.js
workshop:dev: ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
workshop:dev: ERR!     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
workshop:dev: ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
workshop:dev: ERR!     at require (node:internal/modules/cjs/helpers:102:18)
workshop:dev: ERR!     at interopRequireDefault (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:6:21)
workshop:dev: ERR!     at getContent (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:13:332)
workshop:dev: ERR!     at loadPreset (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:13:517)
workshop:dev: ERR!     at C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:15:411
workshop:dev: ERR!     at Array.map (<anonymous>)
workshop:dev: ERR!     at loadPresets (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:15:393)
workshop:dev: ERR!  Error: Cannot find module '@storybook\react-vite\preset'
workshop:dev: ERR! Require stack:
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\telemetry\dist\index.js
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\cli\dist\generate.js
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\cli\bin\index.js
workshop:dev: ERR! - C:\Users\jramo\Documents\deltaxia\node_modules\storybook\index.js
workshop:dev: ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
workshop:dev: ERR!     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
workshop:dev: ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
workshop:dev: ERR!     at require (node:internal/modules/cjs/helpers:102:18)
workshop:dev: ERR!     at interopRequireDefault (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:6:21)
workshop:dev: ERR!     at getContent (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:13:332)
workshop:dev: ERR!     at loadPreset (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:13:517)
workshop:dev: ERR!     at C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:15:411
workshop:dev: ERR!     at Array.map (<anonymous>)
workshop:dev: ERR!     at loadPresets (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-common\dist\index.js:15:393) {
workshop:dev: ERR!   code: 'MODULE_NOT_FOUND',
workshop:dev: ERR!   requireStack: [
workshop:dev: ERR!     'C:\\Users\\jramo\\Documents\\deltaxia\\node_modules\\@storybook\\core-common\\dist\\index.js',
workshop:dev: ERR!     'C:\\Users\\jramo\\Documents\\deltaxia\\node_modules\\@storybook\\telemetry\\dist\\index.js',
workshop:dev: ERR!     'C:\\Users\\jramo\\Documents\\deltaxia\\node_modules\\@storybook\\cli\\dist\\generate.js',
workshop:dev: ERR!     'C:\\Users\\jramo\\Documents\\deltaxia\\node_modules\\@storybook\\cli\\bin\\index.js',
workshop:dev: ERR!     'C:\\Users\\jramo\\Documents\\deltaxia\\node_modules\\storybook\\index.js'
workshop:dev: ERR!   ]
workshop:dev: ERR! }
workshop:dev: ERR! Error: no builder configured!
workshop:dev: ERR!     at getPreviewBuilder (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-server\dist\index.js:10:1912)
workshop:dev: ERR!     at buildDevStandalone (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-server\dist\index.js:48:2082)
workshop:dev: ERR!     at async withTelemetry (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-server\dist\index.js:35:3422)
workshop:dev: ERR!     at async dev (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\cli\dist\generate.js:430:400)
workshop:dev: ERR!     at async Command.<anonymous> (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\cli\dist\generate.js:432:225)
workshop:dev: ERR!  Error: no builder configured!
workshop:dev: ERR!     at getPreviewBuilder (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-server\dist\index.js:10:1912)
workshop:dev: ERR!     at buildDevStandalone (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-server\dist\index.js:48:2082)
workshop:dev: ERR!     at async withTelemetry (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\core-server\dist\index.js:35:3422)
workshop:dev: ERR!     at async dev (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\cli\dist\generate.js:430:400)
workshop:dev: ERR!     at async Command.<anonymous> (C:\Users\jramo\Documents\deltaxia\node_modules\@storybook\cli\dist\generate.js:432:225)
workshop:dev:
workshop:dev: WARN Broken build, fix the error above.
workshop:dev: WARN You may need to refresh the browser.
workshop:dev:
? Would you like to help improve Storybook by sending anonymous crash reports? » (Y/n)

 Tasks:    1 successful, 1 total
Cached:    0 cached, 1 total
  Time:    4.915s

Im getting this error on a yarn workspace project without Turbo — ViktorMS, Jun 08 '23 at 12:18

score 0 · Answer 1 · answered May 07 '23 at 02:27

0

We have similar monorepo stacks. I also use Storybook with Turbo and PNPM.

I've observed this same issue started happening to me today after updating my PNPM to the latest.

pnpm i --shamefully-flatten worked for me.

Hope this helps!

answered May 07 '23 at 02:27

Isaiah Sanchez

161
1
3

Storybook - Failed to load preset: "@storybook\\react-vite\\preset"

1 Answers1