Storybook: Storybook doesn't deal with external svg' defs node

Created on 13 Aug 2019 · 16Comments · Source: storybookjs/storybook

Describe the bug
Hi, guys! It's a quite strange error, but Storybook doesn't deal with external defs params from additional svg inside the same DOM window. More interesting to admit, that all works normally once defs params is inside svg icon itself.

To Reproduce
Try to build the same DOM model to reproduce through Storybook. Where you shall have both independent svg defs and the main svg icon nodes.

Example:

<body class="d r sb-show-main">
    <div class="svgs_defs_container">
        <svg class="react_svgs_defs" style="width: 0px; height: 0px; position: absolute;">
            <defs class="react_svgs__filters">
                <filter id="defaultFilter">
                    <fedropshadow dx="0" dy="0.7" stddeviation="0.1" flood-color="#fff"></fedropshadow>
                </filter>
            </defs>
            <defs class="react_svgs__gradients">
                <lineargradient id="test" gradienttransform="rotate(90)" gradientunits="objectBoundingBox">
                    <stop offset="0" stop-color="black"></stop>
                    <stop offset="1" stop-color="white"></stop>
                </lineargradient>
            </defs>
        </svg>
    </div>
    <div id="root">
        <div style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;">
            <div style="margin: auto; max-height: 100%;">
                <svg xmlns="http://www.w3.org/2000/svg" class="default___25YWq " filter="url(#defaultFilter)" fill="green" stroke="#fff" stroke-width="0" width="24px" height="24px" viewBox="0 0 24 24">
                    <path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"></path>
                </svg>
            </div>
        </div>
    </div>
</body>

Expected behavior
It was not the problem in Storybook v.4. Should work normally with external svg defs params node.

Code snippets
My webpack config:

module.exports = {
  plugins: [
    new webpack.DefinePlugin(globals),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[name].[hash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)?$/,
        loader: 'awesome-typescript-loader',
        exclude: [/node_modules/],
        options: {
          configFileName: './tsconfig.json'
        }
      },
      // JSON
      {
        type: 'javascript/auto',
        test: /\.json$/,
        loader: 'json-loader'
      },
      // SCSS
      {
        test: /\.(s?)css$/,
        exclude: /\.cssmodule\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: false
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              data: '@import "index.scss";',
              includePaths: [path.resolve(__dirname, '../globals/styles')]
            }
          }
        ]
      },
      // CSSMODULE.SCSS
      {
        test: /(\.cssmodule|\.cssmodule\.scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[local]___[hash:base64:5]'
              }
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              data: '@import "index.scss";',
              includePaths: [path.resolve(__dirname, '../globals/styles')]
            }
          }
        ]
      },
      // FONTS
      {
        test: /\.woff(\?.*)?$/,
        loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.woff2(\?.*)?$/,
        loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2'
      },
      {
        test: /\.otf(\?.*)?$/,
        loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype'
      },
      {
        test: /\.ttf(\?.*)?$/,
        loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?.*)?$/,
        loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]'
      },
      // IMAGES
      {
        test: /\.svg(\?.*)?$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(png|jpg|webp)$/,
        loader: 'url-loader?limit=8192'
      }
    ]
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
  }
}

System:
- OS: macOS 10.14.6
- CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
- Node: 10.15.3 - /usr/local/bin/node
- Yarn: 1.17.3 - /usr/local/bin/yarn
- npm: 6.4.1 - /usr/local/bin/npm
Browsers:
- Chrome: 76.0.3809.100
- Firefox: 67.0.4
- Safari: 12.1.2
npmPackages:
- @storybook/addon-actions: ^5.1.9 => 5.1.10
- @storybook/addon-backgrounds: ^5.1.9 => 5.1.10
- @storybook/addon-centered: ^5.1.9 => 5.1.10
- @storybook/addon-knobs: ^5.1.9 => 5.1.10
- @storybook/addon-links: ^5.1.9 => 5.1.10
- @storybook/addon-viewport: ^5.1.9 => 5.1.10
- @storybook/cli: ^5.1.9 => 5.1.10
- @storybook/react: ^5.1.9 => 5.1.10

bug core good first issue help wanted

Source

BiosBoy

👍2

All 16 comments

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!

stale[bot] on 4 Sep 2019

Still an issue...

BiosBoy on 5 Sep 2019

👍1

stale[bot] on 26 Sep 2019

Still an issue...

BiosBoy on 26 Sep 2019

stale[bot] on 17 Oct 2019

Still an issue...

BiosBoy on 17 Oct 2019

stale[bot] on 7 Nov 2019

I'm getting this bug as well. Can this issue at least get a response?

gptt916 on 12 Nov 2019

@gptt916 Please upvote the issue with 👍 on the bottom of the issue description if you're experiencing this issue. There are 400+ open issues in the repo, with more incoming every day, and we don't have enough time to investigate all of them.

shilman on 13 Nov 2019

stale[bot] on 4 Dec 2019

bump

gptt916 on 12 Dec 2019

Seems like the same issue happens even on the Storybook v.5...

BiosBoy on 9 Mar 2020

Well, I found the issue finally.

It happens because storybook's inner SVG nodes (inside its DOM tree) don't look like they should be, eg: <lineargradient /> should be <LinearGradient /> or <linearGradient />.

This applies to all non-regular DOM elements (PascalCase, camelCase). Indeed, because SVG is not a regular DOM element.

So your turn guys now. @shilman

BiosBoy on 9 Mar 2020

I'll take a look at this. Been meaning to learn more about core 🙂

badsketch on 26 May 2020

❤1

Having some trouble understanding and reproducing this issue.
Do you mean if I have:

// Filter.js
<svg>
   <def>
       <linearGradient id="test"/>
   </def>
</svg>

// Circle.js
<svg>
  <circle fill=url('#test')/>
</svg>



md5-b955e4608423ea7525222977bc3c93db



```javascript
// Circle.story.js
export const GradientCircle = () => <Circle /> // does not appear

Then the story won't show anything? Is the 'external svg' and def inside a different component? Could you provide a simplified example? Thanks for your patience!

badsketch on 27 May 2020

I have the same issue right now. When I click the Docs tab, my gradient fills disappearing :(