What is wrong with webpack?

A

Antibreez2021-01-14 11:30:29

JavaScript

Antibreez, 2021-01-14 11:30:29

Good afternoon.
Please help me find the error. I'm trying to use svg sprites with 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;
}

Error when npm run build:

λ npm run build

> [email protected] 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 resolve
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

Without svg-sprite-loader and svgo-loader there are no errors, as I add it - an error appears, for some reason mini-css-extract-plugin is added and in general the error refers to style.scss.
I googled similar errors, but I can't apply the answers to my case. I would be grateful if someone has some advice.