Fix svg loading

[shilman]

Issue: #5708

What I did

• Restore CRA SVG example
• Create full-control example

What I tried

Lots of different permutations to get this working without deleting the SVG rule out of the base webpack, plus various SVG loaders. This is the first combo that I got working.

How to test

cd examples/official-storybook
yarn storybook

Unfortunately, storyshots is broken 😦 and I'm not sure what to do about it.

[shilman]

@igor-dv Mind taking a look at this to see why storyshots is broken? I'm also not sure whether this is an acceptable solution to the bug it's trying to address. But at least it's something...

cc @ndelangen @tmeasday

[ying-rao]

I am getting a different error with this config. Before it was looking for the file under static/media, now it's using the file content as the tag name.

Failed to execute 'createElement' on 'Document': The tag name provided ('data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX4dl5nBhY2tfcH54ibEljX3BhdGhfXyArICJzdGF0aWMvzdmciOw==') is not a valid name.

[tmeasday]

@yingzuo from memory that kind of issue comes from file loader handling the import. Perhaps you need to change the order of the loaders or ignore svgs in file loader (which is part of the default config)?

@shilman you'll need to get an "SVG loader" working in Jest too. What we do in chromatic:

// in jest.config.js
moduleNameMapper: {
    '\\.(svg)$': '<rootDir>/__mocks__/fileMock.js',
  },

// fileMock.js
module.exports = 'test-file-stub';

[shilman]

@tmeasday Can you look at the jest config updates? Seems to be working in CI, tho was inconsistent on my local machine and I don't really know what I'm doing

[ying-rao]

Thanks @tmeasday.

[codecov]

Codecov Report

Merging #5924 into next will increase coverage by 0.07%.
The diff coverage is n/a.

@@            Coverage Diff            @@
##            next    #5924      +/-   ##
=========================================
+ Coverage   34.9%   34.97%   +0.07%     
=========================================
  Files        648      648              
  Lines       9500     9480      -20     
  Branches    1345     1333      -12     
=========================================
  Hits        3316     3316              
+ Misses      5567     5534      -33     
- Partials     617      630      +13

Impacted Files	Coverage Δ
addons/knobs/src/registerKnobs.js	0% <0%> (ø)	⬆️
addons/a11y/src/components/Report/Info.tsx
addons/a11y/src/components/Report/Tags.tsx
addons/a11y/src/components/Report/index.tsx
addons/a11y/src/components/Report/Rules.tsx
addons/a11y/src/components/ColorBlindness.tsx
addons/a11y/src/components/A11YPanel.tsx
addons/a11y/src/components/Report/Elements.tsx
addons/a11y/src/components/Tabs.tsx
addons/a11y/src/components/Report/Item.tsx
... and 15 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1428788...ad7af3d. Read the comment docs.

[Pixelatex]

Any updates on this? 😄 Without the svg's working, I can't upgrade my storybook.

[shilman]

@Pixelatex this is just an update to the official storybook that shows how to load SVG's--basically a workaround. I haven't gotten to the bottom of the change or made a proper fix to Storybook yet. @igor-dv explained the problem in this week's maintainer's meeting, but we haven't had a chance to go over how we might update the codebase.

[berdyshev]

@shilman the proposed rule doesn't work for me.

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

Maybe because storybook is separate package in my lerna-driven monorepo, and the SVGs cannot be loaded this way, I don't know.

I managed it for v.4.x with such a rule:

  {
      test: /\.svg$/,
      use: [
        'babel-loader',
        {
          loader: 'react-svg-loader',
          options: {
            svgo: {
              plugins: [
                { removeDimensions: true, removeUselessStrokeAndFill: true }
              ]
            }
          }
        }
      ]
    }

[shilman]

@Pixelatex and anybody else who's watching. 5.0.2 fixed a regression in webpack extend-mode customization: https://github.com/storybooks/storybook/blob/next/MIGRATION.md#from-version-501-to-502

This means that everybody migrating from a 4.x project using extend-mode should be unbroken using 5.0.2+. I also deprecated extend-mode. I also added a --debug-wepack CLI flag so you can see the exact webpack config you're passing to the preview's webpack.

[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]

@shilman can we move this PR forward, or can we close it?

[shilman]

Gonna close this. There was a bug in webpack extend mode that was fixed in #6104

The contents of this PR are still useful for documenting how to get inline SVGs. But the main pain was fixed in the other PR and I've got my hands full with higher priority issues than sorting this out.

Happy to merge if anybody wants to resurrect this in a new PR.