故事书 - 无法加载预设："@storybook\react-vite\preset"

Question

我正在尝试使用以下https://turbo.build/repo/docs/handbook/tools/storybook指南的故事书(我使用pnpm)。

应用程序/车间/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"
}
}

应用程序/车间/.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;

包。json(根)

{
"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"
}

涡轮。json(根)

{
"$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(根)

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

但是在工作空间根运行turbo run dev时，我得到以下错误:

workshop:dev: cache bypass, force executing 358cb15b26e93b96
workshop:dev: 
workshop:dev: > workshop@0.0.0 dev C:UsersjramoDocumentsdeltaxiaappsworkshop
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 '@storybookreact-vitepreset'
workshop:dev: ERR! Require stack:
workshop:dev: ERR! - C:[e-mail]
workshop:dev: ERR! - C:[e-mail]
workshop:dev: ERR! - C:[e-mail]
workshop:dev: ERR! - C:[e-mail]
workshop:dev: ERR! - C:UsersjramoDocumentsdeltaxianode_modulesstorybookindex.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:[e-mail]:6:21)
workshop:dev: ERR!     at getContent (C:[e-mail]:13:332)
workshop:dev: ERR!     at loadPreset (C:[e-mail]:13:517)
workshop:dev: ERR!     at C:[e-mail]:15:411
workshop:dev: ERR!     at Array.map (<anonymous>)
workshop:dev: ERR!     at loadPresets (C:[e-mail]:15:393)
workshop:dev: ERR!  Error: Cannot find module '@storybookreact-vitepreset'
workshop:dev: ERR! Require stack:
workshop:dev: ERR! - C:[e-mail]
workshop:dev: ERR! - C:[e-mail]
workshop:dev: ERR! - C:[e-mail]
workshop:dev: ERR! - C:[e-mail]
workshop:dev: ERR! - C:UsersjramoDocumentsdeltaxianode_modulesstorybookindex.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:[e-mail]:6:21)
workshop:dev: ERR!     at getContent (C:[e-mail]:13:332)
workshop:dev: ERR!     at loadPreset (C:[e-mail]:13:517)
workshop:dev: ERR!     at C:[e-mail]:15:411
workshop:dev: ERR!     at Array.map (<anonymous>)
workshop:dev: ERR!     at loadPresets (C:[e-mail]: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:[e-mail]:10:1912)
workshop:dev: ERR!     at buildDevStandalone (C:[e-mail]:48:2082)
workshop:dev: ERR!     at async withTelemetry (C:[e-mail]:35:3422)
workshop:dev: ERR!     at async dev (C:[e-mail]:430:400)
workshop:dev: ERR!     at async Command.<anonymous> (C:[e-mail]:432:225)
workshop:dev: ERR!  Error: no builder configured!
workshop:dev: ERR!     at getPreviewBuilder (C:[e-mail]:10:1912)
workshop:dev: ERR!     at buildDevStandalone (C:[e-mail]:48:2082)
workshop:dev: ERR!     at async withTelemetry (C:[e-mail]:35:3422)
workshop:dev: ERR!     at async dev (C:[e-mail]:430:400)
workshop:dev: ERR!     at async Command.<anonymous> (C:[e-mail]: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

Answer 1

我们有类似的单线程堆栈。我还使用Storybook与Turbo和PNPM。

我已经观察到同样的问题开始发生在我今天更新到最新的PNPM。

pnpm i --shamefully-flattenfor me.

希望这对你有帮助!