故事书在加载Vue3和pnpm时卡住

amrnrhlw  于 2022-11-25  发布在  Vue.js
关注(0)|答案(2)|浏览(130)

我尝试用Vue 3和pnpm运行Storybook。窗口呈现,但内容永远加载。它看起来像这样:

当我运行它时,我得到以下内部错误:

[vite] Internal server error: Failed to resolve import "@storybook/client-api" from "../../../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?

我的pnpm依赖项如下所示:

lockfileVersion: 5.4

specifiers:
  '@babel/core': ^7.17.10
  '@mdx-js/react': ^2.1.1
  '@rushstack/eslint-patch': ^1.1.0
  '@storybook/addon-actions': ^6.4.22
  '@storybook/addon-essentials': ^6.4.22
  '@storybook/addon-links': ^6.4.22
  '@storybook/addon-postcss': ^2.0.0
  '@storybook/builder-vite': ^0.1.33
  '@storybook/vue3': ^6.4.22
  '@types/jsdom': ^16.2.14
  '@types/node': ^16.11.27
  '@vitejs/plugin-vue': ^2.3.1
  '@vue/eslint-config-prettier': ^7.0.0
  '@vue/eslint-config-typescript': ^10.0.0
  '@vue/test-utils': ^2.0.0-rc.20
  '@vue/tsconfig': ^0.1.3
  autoprefixer: ^10.4.7
  babel-loader: ^8.2.5
  eslint: ^8.5.0
  eslint-plugin-tailwindcss: ^3.5.0
  eslint-plugin-vue: ^8.2.0
  jsdoc-vuejs: ^4.0.0
  jsdom: ^19.0.0
  pinia: ^2.0.13
  postcss: ^8.4.13
  prettier: ^2.5.1
  react: ^18.1.0
  tailwindcss: ^3.0.24
  typescript: ~4.6.3
  vite: ^2.9.5
  vitest: ^0.9.3
  vue: ^3.2.33
  vue-loader: ^16.8.3
  vue-router: ^4.0.14
  vue-tsc: ^0.34.7

dependencies:
  '@mdx-js/react': 2.1.1_react@18.1.0
  pinia: 2.0.14_ytvqwwdyss532bvoq2clv4ed5m
  react: 18.1.0
  vue: 3.2.33
  vue-router: 4.0.15_vue@3.2.33

devDependencies:
  '@babel/core': 7.17.12
  '@rushstack/eslint-patch': 1.1.3
  '@storybook/addon-actions': 6.4.22_react@18.1.0
  '@storybook/addon-essentials': 6.4.22_smqon77bvkvntmar5udtqjv7p4
  '@storybook/addon-links': 6.4.22_react@18.1.0
  '@storybook/addon-postcss': 2.0.0
  '@storybook/builder-vite': 0.1.33_5brige3cvkbc6gup7oecr4itmy
  '@storybook/vue3': 6.4.22_4ktqezcnhyk6emyhmxy6izi2yy
  '@types/jsdom': 16.2.14
  '@types/node': 16.11.36
  '@vitejs/plugin-vue': 2.3.3_vite@2.9.9+vue@3.2.33
  '@vue/eslint-config-prettier': 7.0.0_bppm6sp3oxoychvfagx6tcd7pe
  '@vue/eslint-config-typescript': 10.0.0_p4if3q7l2moozcc73o6tbvomjq
  '@vue/test-utils': 2.0.0-rc.21_vue@3.2.33
  '@vue/tsconfig': 0.1.3_@types+node@16.11.36
  autoprefixer: 10.4.7_postcss@8.4.13
  babel-loader: 8.2.5_@babel+core@7.17.12
  eslint: 8.15.0
  eslint-plugin-tailwindcss: 3.5.0
  eslint-plugin-vue: 8.7.1_eslint@8.15.0
  jsdoc-vuejs: 4.0.0
  jsdom: 19.0.0
  postcss: 8.4.13
  prettier: 2.6.2
  tailwindcss: 3.0.24
  typescript: 4.6.4
  vite: 2.9.9
  vitest: 0.9.4_jsdom@19.0.0
  vue-loader: 16.8.3_vue@3.2.33
  vue-tsc: 0.34.15_typescript@4.6.4

我想这和故事书的依赖关系有关,但是我真的不知道如何修复它。有什么想法吗?谢谢!

4urapxun

4urapxun1#

在你的.npmrc中的node-linker=hoisted应该可以做到。至少它帮助了我们

aydmsdu9

aydmsdu92#

我的解决方案是添加一些依赖项:

"@storybook/preview-web": "6.5.13",
    "@storybook/addon-docs": "6.5.13",
    "@storybook/client-api": "6.5.13",
    "@storybook/addon-backgrounds": "6.5.13",
    "@storybook/addon-measure": "6.5.13",
    "@storybook/addon-outline": "6.5.13",
    "@storybook/channel-postmessage": "6.5.13",
    "@storybook/channel-websocket": "6.5.13",
    "@storybook/addons": "6.5.13",

相关问题