Multiple Storybooks configs (multi framework) in same repo not working

This is a weird one. I’ve figured out a workaround, but this is different behavior than SB4.

Describe the bug I have @storybook/html, @storybook/react, and @storybook/vue installed and they use their own config files that I point to.

To Reproduce

Here are my npm scripts

"storybook:html": "cross-env NODE_PATH=styles:components start-storybook -s ./vendor -p 9005 -c .storybook/html",
"storybook:vue": "cross-env NODE_PATH=styles:components start-storybook -p 9006 -c .storybook/vue",
    "storybook:react": "cross-env NODE_PATH=styles:components start-storybook -p 9007 -c .storybook/react",

When I run storybook:react, in termial, I get this:

> cross-env NODE_PATH=styles:components start-storybook -p 9007 -c .storybook/react

info @storybook/vue v5.0.6

Expected behavior I would expect @storybook/react to firing things up. I tried removing @storybook/vue and then when I ran npm run storybook:react, it fires up with @storybook/html!

My hunch is, start-storybook’s behavior has changed. If I run npx start-storybook or npx start-storybook -c .storybook/react, it runs @storybook/vue still, despite me pointing to a React config file.

I would expect start-storybook to simply find the config and infer the Storybook type from the imports.

Maybe multi-framework support wasn’t in mind in this fashion (I know it is on the road map except as a single Storybook), but they share style and image assets. It worked out fine in SB4.

Here’s my workaround. I just point straight the desired bin:

"storybook:html": "cross-env NODE_PATH=styles:components node_modules/@storybook/html/bin/index.js -s ./vendor -p 9005 -c .storybook/html",
"storybook:vue": "cross-env NODE_PATH=styles:components node_modules/@storybook/vue/bin/index.js -p 9006 -c .storybook/vue",
"storybook:react": "cross-env NODE_PATH=styles:components node_modules/@storybook/react/bin/index.js -p 9007 -c .storybook/react",

System:

• OS: macOS Mojave 10.14.3
• Device: Macbook Pro 2018
• Browser: Chrome
• Framework: React
• Version: 5.0.6

[lubomir-chatoryiskyi]

@tarikhamilton I’ve faced the same problem and tried to use your approach. I ran npx -p @storybook/cli sb init, my env was initialised for vue.js, after I added configs for React and HTML but @storybook/vue was used. The same as yours. After I installed @storybook/cli as a dependency but didn’t initialise it. And added

"storybook:js": "node_modules/@storybook/html/bin/index.js -s ./public -p 9005 -c config/js",
"storybook:vue": "node_modules/@storybook/vue/bin/index.js -s ./public -p 9006 -c config/vue"

to my package.json file It takes the appropriate config file and works! So it can be a trick for those who want to use storybook for multiple framework

Hope it helps.

[DmitryEfimenko]

I’d like to see this feature working