Issues with stories and docs rendering when including both HTML and React stories.

[lostPixels]

Describe the bug
On the newest version of Storybook (5.3.3) I am attempting to include both HTML and React stories together. They are successfully registered as stories in the sidebar UI, and I can click on them. Docs also display as a tab. However, the React stories do not show in the canvas viewer, instead I get this error: Expecting an HTML snippet or DOM node from the story: "Lots Of Colors" of "Product Tile". They do show up as expected in the docs view.

The HTML stories have the reverse problem. In the canvas view, they are rendered as expected. However, they show up as escaped HTML code in the docs view.

To Reproduce
Steps to reproduce the behavior:

1. Create a new React story
2. Create a new HTML story
3. Use addon-docs
4. Run storybook

Expected behavior
React components should always render without errors and HTML stories should always be rendered as HTML.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets

export default { title: 'Product Tile' };

export const Default = () => (
    <div className='container'>
        <div className='row'>
            <div className='col-xs-3'>
                <ProductTile {...json.hit} pageIndex={0} tileIndex={24} allowCompare={false} hideOutOfStockVariants={false} isExternal={true} forceHiddenCompare={true}/>
            </div>
        </div>
    </div>
)

export default {
    title: 'Buttons',
    parameters: {
        docs: {
            page: mdx
        }
    }
};

export const PrimaryButtons = () => `
    <div class='container buttons'>
        <h2 class='styleguide-headline col-xs-12'>Primary Buttons</h2>
        <div class='row'>
            <div class='col-xs-12 col-sm-6'>
                <button class='btn' type='button'>Button (.btn)</button>
            </div>
            <div class='col-xs-12 col-sm-6'>
                <a class='btn' href='#'>Button link (.btn)</a>
            </div>
            <div class='col-xs-12 col-sm-6'>
                <button class='btn btn-inline' type='button'>Inline button<br>(.btn.btn-inline)</button>
            </div>
            <div class='col-xs-12 col-sm-6'>
                <a class='btn btn-inline' href='#'>Inline button link<br>(.btn.btn-inline)</a>
            </div>
            <div class='col-xs-12 col-sm-6'>
                <button class='btn' type='button' disabled>Disabled button<br>(.btn and disabled attribute)</button>
            </div>
            <div class='col-xs-12 col-sm-6'>
                <button class='btn btn-disabled' type='button' disabled>Disabled button<br>(.btn.btn-disabled)</button>
            </div>
            <div class='col-xs-12 col-sm-6'>
                <a class='btn btn-disabled' href='#'>Disabled button link<br>(.btn.btn-disabled)</a>
            </div>
        </div>
    </div>
`;

System:
Environment Info:

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Binaries:
Node: 9.3.0 - ~/.nvm/versions/node/v9.3.0/bin/node
npm: 6.1.0 - ~/.nvm/versions/node/v9.3.0/bin/npm
Browsers:
Chrome: 79.0.3945.117
Firefox: 69.0
Safari: 13.0.4
npmPackages:
@storybook/addon-a11y: ^5.3.3 => 5.3.3
@storybook/addon-actions: ^5.3.3 => 5.3.3
@storybook/addon-console: ^1.2.1 => 1.2.1
@storybook/addon-docs: ^5.3.3 => 5.3.3
@storybook/addon-info: ^5.3.3 => 5.3.3
@storybook/addon-links: ^5.3.3 => 5.3.3
@storybook/addon-storysource: ^5.3.3 => 5.3.3
@storybook/addon-viewport: ^5.3.3 => 5.3.3
@storybook/addons: ^5.3.3 => 5.3.3
@storybook/cli: ^5.3.3 => 5.3.3
@storybook/html: ^5.3.3 => 5.3.3
@storybook/react: ^5.3.3 => 5.3.3
@storybook/storybook-deployer: ^2.8.1 => 2.8.1

[shilman]

This isn't supported by Storybook at the moment, but hopefully we'll get proper simultaneous multi-framework support this year. Closing this as a dupe to #3889

[lostPixels]

Hmm, this road map item led me to believe that having multiple frameworks in a storybook was possible.

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

[shilman]

Didn't happen. Believe me, once it's possible we'll let everybody know very loudly. 😂 We'll try to be better about not giving specific timeframes for features we're not equipped to deliver. cc @ndelangen

That said, I've heard of people successfully rendering HTML stories inside @storybook/react, so you might search around for instances of that. It's just not officially supported right now.