react-quill Integrate quill-image-resize-module

React-qill  is a great free package which can be used for design editors. However, if you are using the image upload feature, there is a problem of integrating resize package. This was discussed in may treads and I was able to find the best approach integrate it with react-starter-app.

https://www.npmjs.com/package/quill-image-resize-module


If you use the following code,

import Quill from 'quill';
import { ImageResize } from 'quill-image-resize-module';

Quill.register('modules/imageResize', ImageResize);

const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        imageResize: {
            // See optional "config" below
        }
    }
});

The following error is common.

TypeError: Cannot read property 'imports' of undefined
var d = window.Quill.imports.parchment

In order to overcome the issue , you have to update the node_modules/react-scripts/config/webpack.config.dev.js as follows indicated in the discussion.

Refer commet of @jspaine  https://github.com/kensnyder/quill-image-resize-module/issues/7#issuecomment-304463415

In modules>>rules array you have to add below before "oneof" file section.

        {
            test: /\.js$/,
            exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
            loader: 'babel-loader'
          },

In the plugins array at below at the end :

 new webpack.ProvidePlugin({
        'window.Quill': 'quill'
      })

I used the following package but I could not successfully integrate it as indicated.

https://www.npmjs.com/package/quill-image-resize-module-react