storybook/html is affecting storybook/react

[neginbasiri]

storybook-html is affecting @storybook/react

I would like to have 2 script files one to run stories for React component and the other to run stories for plain html and scripts. My React storybook works as charm, as soon as I installed storybook-html from npm I get error when trying to run storybook-react task.

Running : npm run storybook-react

`

    "storybook-react": "start-storybook -p 9001 -c .storybook-react",

    "storybook-html": "start-storybook -p 8001 -c .storybook-html"

`

My config in .storybook-react

'

import { configure, addDecorator  } from '@storybook/react';
import { setDefaults } from '@storybook/addon-info';

// addon-info
setDefaults({
  header: false, // Toggles display of header with component name and description
  inline: true, // Displays info inline vs click button to view
  source: true // Displays the source of story Component
});

const req = require.context('../src/stories/components', true, /\.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

'

My webpack.config.js in .storybook-react

`

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};

`

I don't even started adding files in .storybook-html and by only installing @storybook/html I got this error:

`
> [email protected] storybook-react C:\Projects\LCA\UI
> start-storybook -p 9001 -c .storybook-react

info @storybook/html v4.0.0-alpha.11
info
Terminate batch job (Y/N)? y
PS C:\Projects\LCA\UI> info => Loading custom addons config.
WARN => Custom configuration file C:\Projects\LCA\UI\.storybook-react\webpack.config.js is detected
WARN    but impossible to import loader for .js
info => Loading custom webpack config (extending mode).
10% building modules 2/2 modules 0 activei ｢wdm｣: wait until bundle finished:
(node:2188) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

`

• @storybook/react ^3.4.10
• @storybook/html ^4.0.0-alpha.11

[igor-dv]

Yeah, every supported framework in storybook is creating the same cli file, so they are overriding each other.

You can try using something like this:

"storybook:html": "node node_modules/@storybook/react/bin/index -p 9001 -c .storybook-react",
"storybook:react": "node node_modules/@storybook/html/bin/index -p 8001 -c .storybook-html",

Of course, it's a workaround.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ndelangen]

In the future you will not need multiple storybooks for multiple frameworks.

https://storybook.canny.io/roadmap/p/add-ability-to-run-multiple-frameworks-in-1-storybook