storybook: Storybook doesn't deal with external svg' defs node
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® Core™ 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
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 10
- Comments: 25 (4 by maintainers)
Still an issue
I’ll take a look at this. Been meaning to learn more about core 🙂
Still an issue…