Why couldn't I register the imageResize module?

[kdenz]

Quill version:
1.0.0 rc3

After installing quill-image-resize-module, I did the following, yet it shows up an error of TypeError: Cannot read property 'imports' of undefined

import ReactQuill from "react-quill";
import { ImageResize } from "quill-image-resize-module";

ReactQuill.Quill.register("modules/imageResize", ImageResize);

[alexkrolick]

In ES6 Modules you may need to explicitly import the named export

import ReactQuill, { Quill } from 'react-quill'

[kdenz]

@alexkrolick thanks, I've tried that too, still doesn't work

[alexkrolick]

Does this fix your problem? kensnyder/quill-image-resize-module#7 (comment)

[kdenz]

@alexkrolick Thanks man it works! I had to follow @jspaine and @madsnedergaard 's answers

webpack.config.js:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
      loader: 'babel-loader',
      query: {...}
    }
  ]
}
plugins: [
  new webpack.ProvidePlugin({
    'window.Quill': 'quill'
  })
]

Component.js:

import ReactQuill, { Quill } from 'react-quill';
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/ImageResize', ImageResize);

const modules = {
  ImageResize: {}
};

<ReactQuill
  theme="snow"
  modules={ modules }
  value={ value }
  onChange={ onChange }
/>

[shsunmoonlee]

    query: {...}

               ^

SyntaxError: Unexpected token }
at createScript (vm.js:80:10)

[littlebox692]

I get the same error, don't know what should be input in that key "query", I check the webpack config, but didn't find anything related to "query". @SeunghunSunmoonLee

[buckingj]

Did anybody figure out the query: {...} error? Am I putting this in the wrong webpack.config.js file? In the wrong place in that file? Any other ideas?

[jspaine]

It was supposed to be a placeholder for whatever other config you have for babel-loader, but if you don't have query just omit it, if you have options use that instead.

Or in other words just add the exclude: line to the babel-loader config

[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>

[aaronrepo]

viniciusaugutis, thank you!!!

[rohanbhangui]

im not using webpack, anyone know how to configure this with craco?

[IgnacioZCL]

for those who are not using webpack kensnyder/quill-image-resize-module#7 (comment)