Ngx-quill: Uncaught TypeError: Cannot read property 'imports' of undefined

[kennyho-code]

I'm trying to include the image resizing but I keep getting
Uncaught TypeError: Cannot read property 'imports' of undefined.

I see saw the solution of you fixing this with 'imports' of undefined #7.

I somehow can't replicate the solution.

I have this in my component:

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import Quill from 'quill';

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

// Uncaught TypeError: Cannot read property 'imports' of undefined  (ERROR HERE)
// Quill.register('modules/imageResize', ImageResize);

My webpack:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: "./src/ImageResize.js",
    output: {
        path: __dirname,
        library: 'ImageResize',
        libraryTarget: 'umd',
        filename: "image-resize.min.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.join(__dirname, 'src'),
                exclude: /(node_modules|bower_components)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        "presets": [["es2015", { "modules": false }]],
                        "plugins": ["babel-plugin-transform-class-properties"]
                    }
                }]
            },
            {
                test: /\.svg$/,
                use: [{
                    loader: 'raw-loader'
                }]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            'window.Quill': 'quill/dist/quill.js'
        })
};

[KillerCodeMonkey]

Check my example repo there is a working demo of the image resize module.

Try importing quilljs like this:

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;

On Mon, 19 Mar 2018, 18:57 Kenny Ho, [e-mail] wrote:

I'm trying to include the image resizing but I keep getting
Uncaught TypeError: Cannot read property 'imports' of undefined.

I see saw the solution of you fixing this with 'imports' of undefined #7
https://github.com/kensnyder/quill-image-resize-module/issues/7.

I somehow can't replicate the solution.

I have this in my component:

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import Quill from 'quill';

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

// Uncaught TypeError: Cannot read property 'imports' of undefined (ERROR HERE)
// Quill.register('modules/imageResize', ImageResize);

My webpack:

var path = require('path');
var webpack = require('webpack');

module.exports = {
entry: "./src/ImageResize.js",
output: {
path: __dirname,
library: 'ImageResize',
libraryTarget: 'umd',
filename: "image-resize.min.js"
},
module: {
rules: [
{
test: /.js$/,
include: path.join(__dirname, 'src'),
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
"presets": [["es2015", { "modules": false }]],
"plugins": ["babel-plugin-transform-class-properties"]
}
}]
},
{
test: /.svg$/,
use: [{
loader: 'raw-loader'
}]
}
]
},
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js'
})
};

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/140, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ACKOYGdRb59snBL8k6xX6N3NhGf0W4t0ks5tf_FvgaJpZM4SwoOq
.

[viniciusaugutis]

People who are having difficulty using the quill image resize module with ANGULAR-CLI e ANGULAR 2+
Here's a way to not have to tinker with the webpack.config.ts file

terminal

npm install quill --save
npm install quill-image-resize-module --save

angular-cli.json

"scripts": [
        ...,
        "../node_modules/quill/dist/quill.min.js"
 ]

Componente.ts

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

this.editor_modules = {
      toolbar: {
        container: [
          [{ 'font': [] }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'align': [] }],
          ['link', 'image']
        ]
      },
      imageResize: true
    };

Componente.html
<quill-editor [modules]="editor_modules" [(ngModel)]="content"></quill-editor>

[sairathb]

Hi, I tried the above steps but am still getting the same error "Cannot read property 'imports' of undefined"
"ngx-quill": "^3.2.0",
"quill": "^1.3.6",
"quill-image-resize-module": "^3.0.0"
I am using angular 6.0.7. Can someone please guide me as to what I am doing wrong.

This error occurs when I try to register the ImageResize
Quill.register('modules/imageResize', ImageResize);

[KillerCodeMonkey]

check image-resize-module repository, i posted a solution there ;)

[sairathb]

can you please provide a link as to where I can the solution

[sairathb]

I found the solution, thanks for the quick reference. The solution is here

[KillerCodeMonkey]

There is this issue
https://github.com/kensnyder/quill-image-resize-module/issues/16

And I posted my solution here
https://github.com/kensnyder/quill-image-resize-module/issues/7#issuecomment-354960573

Sairath Bhattacharjya [e-mail] schrieb am Fr., 6. Juli
2018, 15:41:

can you please provide a link as to where I can the solution

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/140#issuecomment-403037626,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYNOeOmOSp8Lax4DbIC1B0KWLC6rOks5uD2jsgaJpZM4SwoOq
.

[KillerCodeMonkey]

Damn seconds to late ;)

Sairath Bhattacharjya [e-mail] schrieb am Fr., 6. Juli
2018, 15:50:

I found the solution, thanks for the quick reference. The solution is here
https://github.com/kensnyder/quill-image-resize-module/issues/27

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/140#issuecomment-403040256,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYN617R6EGSoid0F1qejg6PkK2hh5ks5uD2stgaJpZM4SwoOq
.

[briannoyes]

So just for others who are stumbling here - one other piece not highlighted above that is needed to get rid of this error:
"scripts": ["./node_modules/quill/dist/quill.min.js"]
in your angular.json file. That is kind of tucked away in @KillerCodeMonkey's demo.

Great work here @KillerCodeMonkey, thanks for this excellent wrapper around Quill. Off to find that donate button...

[KillerCodeMonkey]

Thank you :).

Am Sa., 2. Feb. 2019, 21:43 hat Brian Noyes [e-mail]
geschrieben:

So just for others who are stumbling here - one other piece not
highlighted above that is needed to get rid of this error:
"scripts": ["./node_modules/quill/dist/quill.min.js"]
in your angular.json file. That is kind of tucked away in
@KillerCodeMonkey https://github.com/KillerCodeMonkey's demo.

Great work here @KillerCodeMonkey https://github.com/KillerCodeMonkey,
thanks for this excellent wrapper around Quill. Off to find that donate
button...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/140#issuecomment-459997669,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYMAe0mQ4HOzMS93UhQwaFZNyUKZnks5vJfh4gaJpZM4SwoOq
.

[maddy2894]

Hi @briannoyes, I tried your solution, but still, the error is visible. I am not using webpack, so any solution for non-webpack users?

[nehadhiman6]

i had the same problem. it is resolved by declaring Quill in window object Globally

[SalmaaRagab]

I solved it by adding "node_modules/quill/dist/quill.min.js" to angular.json scripts array.