Storybook: HTML stories misrender in canvas

[daneah]

Describe the bug
When Storybook first loads in a set of HTML stories in Canvas, the one selected on initial page load renders properly. The first story you navigate to afterward renders the raw HTML. Navigating away and back to it a second time, it renders properly.

To Reproduce
Steps to reproduce the behavior:

1. Run an HTML Storybook with multiple stories
2. Load Storybook in the browser
3. Click a story other than the initial one
4. Observe the raw HTML
5. Navigate to any other story and back to the problematic one
6. Observe it renders properly

Expected behavior
Stories render properly regardless of when/how you arrive at them.

Screenshots

Code snippets

...

## Base alert

<Preview>
    <Story name='Base alert'>{`
        <div class="alert" role="alert">
          <span class="alert__icon">...</span>
          ${text('Alert text', 'Hello World', 'base')}
        </div>
    `}</Story>
</Preview>

## Info alert

<Preview>
    <Story name='Info alert'>{`
        <div class="alert alert--info" role="alert">
          <span class="alert__icon">...</span>
          ${text('Alert text', 'Info', 'info')}
        </div>
    `}</Story>
</Preview>

System:

Environment Info

  System:
    OS: macOS Mojave 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v12.4.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.88
    Firefox: 71.0
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.3.0-rc.0 => 5.3.0-rc.0
    @storybook/addon-docs: ^5.3.0-rc.0 => 5.3.0-rc.0
    @storybook/addon-knobs: ^5.3.0-rc.0 => 5.3.0-rc.0
    @storybook/addon-storysource: ^5.3.0-rc.0 => 5.3.0-rc.0
    @storybook/html: ^5.3.0-rc.0 => 5.3.0-rc.0
    @storybook/react: ^5.3.0-rc.0 => 5.3.0-rc.0
    @storybook/source-loader: ^5.3.0-rc.0 => 5.3.0-rc.0

[shilman]

@ndelangen can you look at this?

[ndelangen]

I'm having trouble reproducing this.

[ndelangen]

@daneah can you reproduce this on https://storybookjs-next.now.sh/html-kitchen-sink/ ?

[daneah]

@ndelangen the link above doesn't seem to work for me. I'll see if I can make a minimal reproduction of the problem.

[shilman]

@daneah @ndelangen needs an extra slash at the end: https://storybookjs-next.now.sh/html-kitchen-sink/

[daneah]

D'oh, thanks.

[ndelangen]

Sorry for the confusion,

Did you find a way to reproduce this @daneah ?

[daneah]

@ndelangen this has gotten away from me, sorry for the run around. I'll see what I can do.

[daneah]

I'm having trouble reproducing this in the kitchen sink, but confirmed I do still see this in our own storybooks on v5.3.9. I checked in the console after this occurs and found something that might help understand the issue:

Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React. react-dom.development.js:530
    React 2
    renderMain start.js:315
    renderUI start.js:429
    emit index.js:201
    setSelection story_store.js:357
    (Async: setTimeout handler)
    setSelection story_store.js:351
    start start.js:459
    handleEvent index.js:199
    handleEvent index.js:198
    Channel index.js:85
    handler index.js:108
    handleEvent index.js:204
    PostmsgTransport index.js:90
    createChannel index.js:224
    getContext start.js:182
    start start.js:237
    js index.js:20
    Webpack 14
        __webpack_require__
        fn
        js
        js
        __webpack_require__
        fn
        js
        __webpack_require__
        fn
        0
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>

For context, we have a React, Vue, and HTML Storybook all in one project. Is it possible the installed packages are interacting in some unexpected way?

Given that it can't be reproduced in the kitchen sink I'd understand if you want to close this, but any guidance you might be able to provide if you've seen something like this before would be appreciated! If installing e.g. @storybook/react and @storybook/html in a single project is known to cause trouble, that'd be a helpful data point too 😄

[daneah]

Oh, I spoke slightly too soon and it looks like this is a big d'oh on our part. I tried uninstalling @storybook/react, which led me to an unexpected import of it inside our HTML preview.js...switching that to the expected @storybook/html import seems to have everything working properly. Funny that it _mostly_ worked except for that 😂 I'm closing this!

[supersnager]

@daneah thank You for this comment. I did almost the same, and your explanation led me to my own bug :)