Связывание QuillJs с ошибкой причины Webpack

Question

Я пытаюсь импортировать QuillJs в мой проект. Я следил за всей их документацией, но есть ошибка. Я не пропускаю ни одного шага.

Я выполнил установку, используя npm

npm install quill@1.3.6

, затем поставил импорткод в мой main.js и связывание с веб-пакетом

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});

export default Quill;

Однако я получаю следующую ошибку

ERROR in ./node_modules/quill/assets/icons/image.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewbox="0 0 18 18">
|   <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
|   <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
 @ ./node_modules/quill/ui/icons.js 31:16-52
 @ ./node_modules/quill/themes/snow.js
 @ ./main.js

ERROR in ./node_modules/quill/assets/icons/video.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewbox="0 0 18 18">
|   <rect class="ql-stroke" height="12" width="12" x="3" y="3"></rect>
|   <rect class="ql-fill" height="12" width="1" x="5" y="3"></rect>
 @ ./node_modules/quill/ui/icons.js 48:16-52
 @ ./node_modules/quill/themes/snow.js
 @ ./main.js

Вам может потребоваться соответствующий загрузчик для обработки этого типа файла,в настоящее время нет загрузчиков, настроенных для обработки этого файла.

Я установил все необходимые зависимости

babel-core, babel-loader, babel-preset-es2015, ts-loader, css-loader, typcript, html-loader

Тем не менее, я все еще получил ошибку, понятия не имею почему. Я действительно ценю любой ответ. Вот официальное руководство https://quilljs.com/guides/adding-quill-to-your-build-pipeline/

Answer 1

Вам необходимо установить и настроить загрузчик для обработки файлов SVG или других изображений:

npm install file-loader --save-dev

Затем в конфигурации Webpack (webpack.config.js):

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};