Cannot Read Property Of Undefined

[dbruce1990]

Hi, I'm trying to use quill-image-resize-module but I am running into the following error:

I can't seem to find much info (or really any) on this particular issue. I've been having a hell of a time getting this to work with quilljs unfortunately.

Here is my webpack:

const webpack = require('webpack');
const path = require('path')
module.exports = {
    entry: './src/index.js',
    devtool: 'inline-source-map',
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'static'),
    },
    watch: true,
    resolve: {
        alias: {
            'parchment': path.resolve(__dirname, 'node_modules/parchment/src/parchment.ts'),
            'quill$': path.resolve(__dirname, 'node_modules/quill/quill.js'),
        },
        extensions: ['.js', '.ts', '.svg']
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.ts$/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        compilerOptions: {
                            declaration: false,
                            target: 'es5',
                            module: 'commonjs'
                        },
                        transpileOnly: true
                    }
                }]
            },
            {
                test: /\.svg$/,
                use: [{
                    loader: 'html-loader',
                    options: {
                        minimize: true
                    }
                }]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            'window.Quill': 'quill'
        })
    ]
}

...and here is my 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';

import ImageResize from 'quill-image-resize-module';

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

    let toolbarOptions = [
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'align': [] }, { 'direction': 'rtl' }],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        [{ 'color': [] }, { 'background': [] }],
        ['link', 'image', 'video'],
        ['clean']
    ];

    let quillOptions = {
        debug: 'info',
        modules: {
            toolbar: toolbarOptions,
            imageResize: {
                modules: ['Resize', 'DisplaySize', 'Toolbar']
            }
        },
        placeholder: 'Compose an epic...',
        theme: 'snow',
        bounds: "#editBlogBody_input"
    }
    let quill = new Quill('#editBlogBody_input', quillOptions)

I am building a golang templates app and I'm not using react/angular or anything of the sorts, just jQuery/Bootstrap and QuillJS so far.

Hoping someone can help get me unstuck here...

[kakadais]

Any progress?;;

[jesspaloma]

hello there