How to Import Full Toolbar?

[gunjandatta]

Here is an attempt to import the library using this example. It's not rendering the toolbar as expected. How can you import and use only the Toolbar w/ all/most of the options?

import Quill from "quill/core";

// Modules
import Toolbar from "quill/modules/toolbar";

// Themes
import BubbleTheme from "quill/themes/bubble";
import Snow from "quill/themes/snow";

// Toolbar Components
import Blockquote from "quill/formats/blockquote"
import Bold from "quill/formats/bold";
import CodeBlock from "quill/formats/code";
import Italic from "quill/formats/italic";
import Header from "quill/formats/header";
import Image from "quill/formats/image";
import List from "quill/formats/list";
import Script from "quill/formats/script";
import Strike from "quill/formats/strike";
import Underline from "quill/formats/underline";
import Video from "quill/formats/video";

// Register the components
Quill.register({
    "modules/toolbar": Toolbar,
    "formats/blockquote": Blockquote,
    "formats/bold": Bold,
    "formats/code": CodeBlock,
    "formats/italic": Italic,
    "formats/header": Header,
    "formats/image": Image,
    "formats/list": List,
    "formats/script": Script,
    "formats/strike": Strike,
    "formats/underline": Underline,
    "formats/video": Video,
    "themes/bubble": BubbleTheme,
    "themes/snow": Snow
});

export default Quill;

[sebastianwestberg]

HI @gunjandatta - I'm running into the exact same problem with [object Module] and missing icons. Did you ever solve this? Thanks in advance!

[oliviasculley]

So it seems like this is caused by an incompatibility with html-loader attempting to use the new ES modules syntax. I was able to fix it by changing the webpack rule for .svgs like this:

        {
          test: /\.svg$/,
          loader: 'html-loader',
          options: {
            esModule: false
          }
        }

This issue on webpack and this issue on html-loader have more details. Hopefully this helps!