Storybook - 无法加载预设：“@storybook\\react-vite\\preset”

Question

我正在尝试按照https://turbo.build/repo/docs/handbook/tools/storybook指南使用 Storybook （我正在使用pnpm）。

\n

应用程序/workshop/package.json

\n

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

\n

应用程序/workshop/.storybook/main.ts

\n

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

\n

package.json（根）

\n

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

\n

Turbo.json（根）

\n

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

\n

.npmrc（根）

\n

auto-install-peers=true\nlegacy-peer-deps=true\nnode-linker=hoisted\n

\n

但在工作区根目录运行时turbo run dev出现以下错误：

\n

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

\n

Answer 1

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

我发现今天将 PNPM 更新到最新版本后，同样的问题也开始发生在我身上。

pnpm i --shamefully-flatten为我工作。

希望这可以帮助！