Storybook does not load SVGs in Components of Vue 3 project - svg

Question

I got the following error when running npm run storybook using vue 3.
me main.js storybook
const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-interactions",
],
"framework": "#storybook/vue3",
"core": {
"builder": "#storybook/builder-webpack5"
},
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
(() => {
const ruleSVG = config.module.rules.find(rule => {
if (rule.test) {
const test = rule.test.toString();
const regular = '/\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/';
const regularString = regular.toString();
if (test === regularString) {
return rule;
}
}
});
ruleSVG.test = '/\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/'
})();
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: "sass-loader",
options: {
additionalData: `
#import "#/assets/scss/main.scss";
`,
implementation: require('sass'),
},
},
],
include: path.resolve(__dirname, '../'),
});
config.module.rules.push({
test: /\.(svg)(\?.*)?$/,
use: "babel-loader",
enforce: "pre",
oneOf: [
{
resourceQuery: /inline/,
use: [
{
loader: "vue-svg-loader",
options: {
svgo: {
plugins: [
{ removeDoctype: true },
{ removeComments: true },
{ removeDimensions: true },
{ cleanupIDs: false },
{ removeViewBox: false }
]
}
}
}
]
},
{
loader: "file-loader",
options: {
name: "#/assets/icons/[name].[hash:8].[ext]"
}
}
],
exclude: /(node_modules)/
});
config.resolve.alias['#'] = path.resolve('src');
return config;
},
}
me package.json
I tried to connect #babel-preset-react and #babel-preset-env but it did not lead to success.
When I change vue-svg-loader to svg-inline-loader and change main.js a little, I get this:
enter image description here
Does anyone have any ideas how this can be fixed?