Storybook does not load SVGs in Components of Vue 3 project

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?