在npm monorepo工作区配置Vue3+Vite版Storybook的报错求助

目录结构 #

packages/
├─ components/
│  ├─ package.json
├─ storybook/
│  ├─ package.json
package.json

根目录package.json内容 #

{
    "private": true,
    "type": "module",
    "scripts": {
        "storybook": "npm run storybook --workspace=packages/storybook",
        "lint": "eslint"
    },
    "workspaces": [
        "packages/*"
    ],
    "devDependencies": {
        ...
    }
}

packages/storybook/package.json内容 #

{
    "name": "storybook",
    "sideEffects": false,
    "version": "0.0.0",
    "scripts": {
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build"
    },
    "dependencies": {
        "components": "file:../components",
        "vue": "^3.5.13",
        "vuetify": "^3.8.1"
    },
    "devDependencies": {
        "@storybook/addon-essentials": "^8.6.12",
        "@storybook/addon-interactions": "^8.6.12",
        "@storybook/addon-onboarding": "^8.6.12",
        "@storybook/blocks": "^8.6.12",
        "@storybook/test": "^8.6.12",
        "@storybook/vue3": "^8.6.12",
        "@storybook/vue3-vite": "^8.6.12",
        "storybook": "^8.6.12"
    }
}

执行命令后遇到的错误 #

第一次错误（依赖安装在storybook工作区node_modules时） #

执行npm install && npm run storybook后报错：

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/vue3-vite/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: Cannot find module '@storybook/vue3-vite/preset'
Require stack:
- [root]/node_modules/@storybook/core/dist/common/index.cjs
- ./node_modules/storybook/dist/proxy.cjs
- ./node_modules/storybook/bin/index.cjs
    at Function._resolveFilename (node:internal/modules/cjs/loader:1405:15)
    at defaultResolveImpl (node:internal/modules/cjs/loader:1061:19)
    at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1066:22)
    at Function._load (node:internal/modules/cjs/loader:1215:37)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
    at Module.require (node:internal/modules/cjs/loader:1491:12)
    at require (node:internal/modules/helpers:135:16)
    at interopRequireDefault ([root]/node_modules/@storybook/core/dist/common/index.cjs:11704:11)
    at getContent ([root]/node_modules/@storybook/core/dist/common/index.cjs:16474:10)

More info: 

    at loadPreset ([root]/node_modules/@storybook/core/dist/common/index.cjs:16515:13)

发现@storybook/vue3-vite包安装在packages/storybook/node_modules而非根目录node_modules。

第二次错误（将Storybook依赖移至根目录后） #

移完依赖执行npm install时报错：

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: undefined@undefined
npm error Found: dev @storybook/addon-essentials@"^8.6.12" from the root project
npm error
npm error Could not resolve dependency:
npm error dev @storybook/addon-essentials@"^8.6.12" from the root project

疑问 #

请问哪里配置错误？正确的Storybook配置方式是什么？恳请相关建议。

内容的提问来源于stack exchange，提问作者R.Duteil