С чем связана ошибка в Webpack?

Question

Antibreez @Antibreez

С чем связана ошибка в Webpack?

Добрый день.
Помогите, пожалуйста, найти ошибку. Пытаюсь использовать svg-спрайты при помощи webpack.

//webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
  entry: {
    app: [
      './src/js/app.js'
    ]
  },

  mode: 'production',

  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  plugins: [
    // new CleanWebpackPlugin(),

    
    // new CopyWebpackPlugin({
    //   patterns: [
    //     {
    //       from: path.resolve(__dirname, 'public'),
    //       to: 'assets',
    //       globOptions: {
    //         ignore: ['*.DS_Store'],
    //       },
    //     },
    //   ],
    // }),

    new MiniCssExtractPlugin({
      filename: './styles/[name].css',
    }),

    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: false,
      filename: 'index.html'
    }),
  ],

  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          'svg-sprite-loader',
          'svgo-loader'
        ]
      },
      
      { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
      
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ],
      },

      { test: /\.(woff(2)?|eot|ttf|otf)$/, type: 'asset/resource' },
      
    ],
  },
}

//app.js
import logo from '../../public/img/logo-desktop.svg';

import '../scss/style.scss';

import hello from './hello.js';

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack sample</title>
</head>
<body>
  
  <svg>
    <use xlink:href="#logo-desktop"></use>
  </svg>

</body>
</html>

//style.scss

@import "general/variables.scss";
@import "general/mixins.scss";
@import "general/fonts.scss";

html, body {
  height: 100%;
}

body {

  background-color: green;
}

Ошибка при npm run build:

λ npm run build

> 1234@1.0.0 build
> cross-env NODE_ENV=production webpack --config webpack.prod.js

(node:12208) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolut
ckage.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:12208) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
[webpack-cli] Compilation finished
assets by status 999 KiB [cached] 7 assets
runtime modules 878 bytes 4 modules
orphan modules 5.41 KiB [orphan] 2 modules
cacheable modules 39.6 KiB
modules by path ./src/ 5.75 KiB
./src/js/app.js + 2 modules 5.71 KiB [built] [code generated]
./src/scss/style.scss 39 bytes [built] [code generated] [1 error]
modules by path ./node_modules/ 33.9 KiB
./node_modules/svg-baker-runtime/browser-symbol.js 7.31 KiB [built] [code generated]
./node_modules/svg-sprite-loader/runtime/browser-sprite.build.js 26.5 KiB [built] [code generated]

ERROR in ./src/scss/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/svgo-loader/index.js):
Error: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: O
at F:\webpack-template2\node_modules\svgo-loader\index.js:63:14
at processTicksAndRejections (node:internal/process/task_queues:93:5)
at processResult (F:\webpack-template2\node_modules\webpack\lib\NormalModule.js:583:19)
at F:\webpack-template2\node_modules\webpack\lib\NormalModule.js:676:5
at F:\webpack-template2\node_modules\loader-runner\lib\LoaderRunner.js:397:11
at F:\webpack-template2\node_modules\loader-runner\lib\LoaderRunner.js:252:18
at context.callback (F:\webpack-template2\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at F:\webpack-template2\node_modules\svgo-loader\index.js:63:5
at processTicksAndRejections (node:internal/process/task_queues:93:5)
@ ./src/js/app.js 3:0-28

2 ERRORS in child compilations
webpack 5.11.0 compiled with 3 errors in 23519 ms
npm ERR! code 1
npm ERR! path F:\webpack-template2
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c "cross-env NODE_ENV=production webpack --config webpack.prod.js"

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\akiyan\AppData\Local\npm-cache\_logs\2021-01-14T07_58_21_533Z-debug.log

Без svg-sprite-loader и svgo-loader ошибок нет, как его добавляю - появляется ошибка, почему-то приплетается mini-css-extract-plugin и вообще ошибка ссылается на style.scss.
Похожие ошибки гуглил, но применить ответы к своему случаю не получается. Буду признателен, если у кого-то найдутся советы.