Storybook (webpack 5) breaks images inline loaders

Describe the bug Requiring an image (png/svg) with inline loaders provides wrong output that ignores these loaders.

testImage = require('!file-loader!./images/test-image.png').default;
testIcon = require('!html-loader!image-webpack-loader!./images/test-icon.svg');

To Reproduce

https://github.com/artaommahe/-storybook-webpack5-inline-loaders

• yarn install
• yarn storybook
• see wrong images urls and content in AppComponent’s template (testImage’s require here contains similar path as testIcon)

image:

icon: "static/media/src/app/images/test-icon..svg"

• yarn start (to run angular dev server)
• see proper images urls and content in AppComponent’s template

image: "747f39b8dc75b31017d31bca80ccaf2e.png"

icon: { "default": "<svg ...</svg>" }

Same issue with require.context (uncomment it in AppComponent’s OnInit method and comment out requires)

System

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.124
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.59)
  npmPackages:
    @storybook/addon-actions: ^6.3.2 => 6.3.2
    @storybook/addon-essentials: ^6.3.2 => 6.3.2
    @storybook/addon-links: ^6.3.2 => 6.3.2
    @storybook/angular: ^6.3.2 => 6.3.2
    @storybook/builder-webpack5: ^6.3.2 => 6.3.2
    @storybook/manager-webpack5: ^6.3.2 => 6.3.2

Additional context Worked fine with storybook 6.2.9

[artaommahe]

btw current workaround is to remove images loader in webpack config customisation

config.module.rules = config.module.rules.filter(rule => !rule.test || !rule.test.source.includes('png'));

[shilman]

@artaommahe just venting a bit, thanks for being patient with us on this! 😄