[Bug]: [7.0.0-beta.17]: Storybook doesn't display SVG icons

[michu2k]

Describe the bug

In the latest version of the Storybook (7.0.0-beta.17) SVG icons in the Introduction.mdx don't display correctly.

Here's a screenshot of what it looks like:

To Reproduce

Run the following commands:

npx create-next-app@latest
npx sb@next init
npm run storybook

System

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.17 => 7.0.0-beta.17
    @storybook/addon-interactions: ^7.0.0-beta.17 => 7.0.0-beta.17
    @storybook/addon-links: ^7.0.0-beta.17 => 7.0.0-beta.17
    @storybook/blocks: ^7.0.0-beta.17 => 7.0.0-beta.17
    @storybook/nextjs: ^7.0.0-beta.17 => 7.0.0-beta.17
    @storybook/react: ^7.0.0-beta.17 => 7.0.0-beta.17
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

[shilman]

@valentinpalkovic assuming this is either a windows issue or a nextjs issue (or both) -- either way, ball's in your court! 😂

[bartlangelaan]

I also experienced this issue. At first I thought that the Storybook beta was broken, but it is actually a simpler issue - the NextJS framework changes all image imports.

Normally, if you would do this:

import image from './image.svg';
console.log(image);

You would get a string, which is the location where the svg is hosted. However, if you use the NextJS framework plugin from Storybook, the same code would give a different output. It would output an object with a src property inside.

This means that the default Storybook examples break, because <img src="[object Object]" /> will be rendered.

While this is not a bug in Storybook, or a bug in the NextJS plugin, it does give a bad first impression of Storybook. The recommended way of starting a NextJS+Storybook project shows broken images by default. Maybe the NextJS plugin should replace the demo content with content that is compatible with the plugin, to not scare off users that are trying Storybook out for the first time.

[michu2k]

It seems to me there is a problem with Storybook's webpack config. After updating the storybook webpack config with the example from the docs (Storybook for Next.js) and simply replacing @svgr/webpack with url-loader it looks like the SVG icons are rendered correctly.

[valentinpalkovic]

@bartlangelaan You‘re right. The documentation and the example stories have to be adjusted! I will find some time next week to update the examples!

Thank you so much for your investigations!

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.44 containing PR #20798 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

[carlosrsabreu]

For those who are struggling with .svg images using the nrwl/nx monorepo with React, I only made it using the @storybook/react-webpack5 as framework and this config:

    // Add SVGR Loader so Storybook can read .svg files properly
    // ---------
    const assetRule = config.module.rules.find(({ test }) => test.test('.svg'))

    const assetLoader = {
      loader: assetRule.loader,
      options: assetRule.options || assetRule.query,
    }

    // Merge our rule with existing assetLoader rules
    config.module.rules.unshift({
      test: /\.svg$/,
      use: ['@svgr/webpack', assetLoader],
    })
    // ---------

I tried using the @storybook/nextjs as a framework but without success. This one didn't work.

[Karibash]

When using Next.js, using forEach instead of find works fine.
I think the documentation needs to be corrected.

config?.module?.rules?.forEach(rule => {
  if (!rule || typeof rule !== 'object') return;
  if (rule.test instanceof RegExp && rule.test.test('.svg')) {
    rule.exclude = /\.svg$/;
  }
});

[mariovde-IIO]

@Karibash or @carlosrsabreu where would this code be added?
could you post the new file please?

thanks!

[carlosrsabreu]

@Karibash or @carlosrsabreu where would this code be added? could you post the new file please?

thanks!

In .storybook/main.js file:

module.exports = {
  // All configs you have set for storybook
  webpackFinal: async (config) => {
    // code goes here
  }
}

[mariovdeEINR]

yes, that worked! Thanks a bunch!