SVGs load inconsistently in Docs mode for HTML stories when using file-loader

Describe the bug When authoring HTML stories and viewing them in Docs mode, when multiple stories contain an <svg><use href="..."></svg> only some of them (non-deterministically) render.

To Reproduce Steps to reproduce the behavior:

1. Using file-loader, author a number of story previews in Docs mode that use <svg> with a <use href="..."> reference
2. Run and open the Storybook
3. Navigate to Docs tab
4. Observe not all icons load

Expected behavior Any correctly-specified SVGs render on the page

Screenshots How the HTML stories render (sometimes more or different icons load):

How the React stories render, which is the expected behavior:

Code snippets The HTML stories load the SVGs like so:

const icons = require('@/assets/icons.svg');

<Preview>
  <Story name="Base alert">{`
    <svg role="img" aria-hidden="true">
      <use href="${icons}#status-base" />
    </svg>
  `</Story>
</Preview>

<Preview>
  <Story name="Info alert">{`
    <svg role="img" aria-hidden="true">
      <use href="${icons}#status-info" />
    </svg>
  `</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.6 => 5.3.0-rc.6
    @storybook/addon-docs: ^5.3.0-rc.6 => 5.3.0-rc.6
    @storybook/addon-knobs: ^5.3.0-rc.6 => 5.3.0-rc.6
    @storybook/addon-storysource: ^5.3.0-rc.6 => 5.3.0-rc.6
    @storybook/html: ^5.3.0-rc.6 => 5.3.0-rc.6
    @storybook/react: ^5.3.0-rc.6 => 5.3.0-rc.6
    @storybook/source-loader: ^5.3.0-rc.6 => 5.3.0-rc.6
    @storybook/vue: ^5.3.0-rc.6 => 5.3.0-rc.6

Additional context We disable Storybook’s default SVG loader and use file-loader instead. I might suspect this is related to the issue, except that the SVGs do in fact load, though sporadically. Does not exhibit issues in the React or Vue storybooks.

[shilman]

Sorry, missed this the first time around. I think the key difference might be that @storybook/html is rendering those stories in iframes, which can be problematic, whereas React is rendering them inline.

Vue also renders in iframes by default, but can be configured to run inline. But perhaps there are subtle rendering differences that cause it to be more reliable than @storybook/html.

There’s also @storybook/web-components which can be configured to run inline and should support a superset of HTML. We could also probably use the same method to allow @storybook/html run inline. cc @daKmoR

[daneah]

Sorry for the lack of follow-up here—we rapidly switched to web components only, so haven’t really been digging into HTML Storybook at all, of late.