React-quill: Why couldn't I register the imageResize module?

Created on 28 Jun 2017 · 11Comments · Source: zenoamaro/react-quill

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);

Source

kdenz

👍1

Most helpful comment

@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 }
/>

kdenz on 29 Jun 2017

👍5

All 11 comments

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

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

alexkrolick on 29 Jun 2017

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

kdenz on 29 Jun 2017

Does this fix your problem? https://github.com/kensnyder/quill-image-resize-module/issues/7#issuecomment-307737790

alexkrolick on 29 Jun 2017

@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 }
/>

kdenz on 29 Jun 2017

👍5

    query: {...}

               ^

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

SeunghunSunmoonLee on 31 Mar 2018

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

littlebox692 on 16 Apr 2018

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?

buckingj on 18 Apr 2018

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

jspaine on 19 Apr 2018

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>