Storybook doesn't work in monorepo - vue 3 vite 3

[singhinderpal]

Hi there,

I am trying to setup storybook in my vue 3 vite 3 package inside of a monorepo.
The steps I followed:
Navigate to monorepo\packages\vue3project and follow the following commands:

pnpx storybook init -s
pnpm i
pnpm i -D @storybook/cli
pnpm storybook

I get the following error when I try to open locally started storybook from http://localhost:6006/

[vite] Internal server error: Failed to resolve import "@storybook/preview-web" from "..\..\..\..\..\virtual:\@storybook\builder-vite\vite-app.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /virtual:/@storybook/builder-vite/vite-app.js
  1  |  import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
     |                                              ^
  2  |      import { ClientApi } from '@storybook/client-api';
  3  |      import '/virtual:/@storybook/builder-vite/setup-addons.js';

I then crosschecked the nodemodules and it does not contain a @storybook/preview-web.

That's my main.cjs

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "features": {
    "storyStoreV7": true
  }
}

[fivaz]

The problem is with pnp not vite3 or mono repo. Try the same using npm or yarn v1 and it will work fine.

If you want a quickly but wrong fix, download all those dependencies as dev dependencies of your own project.

[singhinderpal]

I also tried adding failing dependencies manually as dev dependencies and I added approx 9 dependencies @storybook/something after which I left hope for this being a quick fix.

[IanVS]

Unfortunately there are about 20 dependencies you'd need to add. The current workarounds are to add them, or to use the shameful hoisting option from pnpm. There's an issue tracking this at #55.

There's a chance that this situation will be fixed or at the least improved in the upcoming storybook version 7. But that is still at least a few months away.

[singhinderpal]

@IanVS If you don't mind, can you please share the list of 20 deps that you mentioned, that will be a big help for me!
I currently have following @storybook/addon-docs @storybook/addon-backgrounds @storybook/client-api @storybook/preview-web @storybook/addon-measure @storybook/addon-outline @storybook/channel-postmessage @storybook/channel-websocket @storybook/addons

[IanVS]

I don't keep an up-to-date list, and it might have changed, but here's what someone used to do the same thing: jdk2pq/vite-storybook-pnpm-vue@9ccdf74, it might be a useful starting point.

[singhinderpal]

@IanVS thanks!
I will try this and will post a comment here if I find any differences for future devs if something else needs to add up.

[singhinderpal]

@IanVS
After the default pnpx storybook init -s, I had to add the following dependencies in total!
At first glance, it seems working fine!

@babel/preset-env
@mdx-js/react
@storybook/addon-backgrounds
@storybook/addon-docs
@storybook/addon-measure
@storybook/addon-outline
@storybook/addons
@storybook/channel-postmessage
@storybook/channel-websocket
@storybook/client-api
@storybook/client-logger
@storybook/core-common
@storybook/preview-web
@vue/compiler-sfc
react
react-dom

[IanVS]

By the way, this should no longer be needed with Storybook 7.0. pnpm support has been greatly improved!

[geoff-harper]

I've tried about every permutation of pnpx command at varying levels of my monorepo and I haven't really gotten anywhere (beta 46). Is there a step by step recipe for setting up v7 beta in the following conditions?

• pnpm monorepo
• vite
• react
• storybook down in packages/*

It seems most attemps end with storybookjs/storybook#12995 (comment). Even if it's from a fresh start no migration, I'd love to get this up and running

[IanVS]

What problem are you hitting?

[geoff-harper]

In spectacular fashion I tried it again fresh off the weekend with coffee in hand and it seems to be working as expected. For anyone having a similar issue

• cd down into your ui package
• upgrade deps (I did this a few days ago can't remember specifics, but the storybook dev dep is in ui's package file, not root)
• remove contents of .storybook dir
• pnpx sb@next init

Not sure which parts of this are fluff or required but this is how I've got it going. Thanks for the prompt reply, appreciate the work