quill-image-resize-module: 'imports' of undefined

Managed to get v3.0 and the image-drop module working with webpack

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 {ImageDrop} from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'

Quill.register('modules/imageResize', ImageResize)
Quill.register('modules/imageDrop', ImageDrop)

const quillModules = {
  ...
  imageDrop: true,
  imageResize: {}
}

You can also import the minified file from each module instead of transforming them with babel, but the image-drop module registers itself with Quill so you have to remove that.

@jspaine thanks a lot for assisting me!!! After 4-5 hours of pulling my hair… if found the solution:

    new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js',
    }),

I had to declare even Quill in the webpack…

For React without eject

I had same error while I was trying to use react-quill and most of the suggestion were to tweak webpack setting. I didn’t like an approach to eject the webpack configuration and make some changes.

So I used quill-image-resize-module-react package.

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

=====

  <ReactQuill
         ...
          modules={MODULES}
        ...
   />

=====

MODULES = {
  toolbar: [ ],
  ...
  imageResize: {
    handleStyles: {
      backgroundColor: 'black',
      border: 'none',
      color: 'white',
    },
    modules: ['Resize', 'DisplaySize', 'Toolbar'],
  },
};

And it worked 😄

If you are using React, you can simply use this version here. This works out of the box for me https://www.npmjs.com/package/quill-image-resize-module-react

Only that part of the documentation is wrong. Instead of import {ImageResize} from ‘quill-image-resize-module-react’; you have to import it like so import ImageResize from ‘quill-image-resize-module-react’;

For those still dealing with this problem, use ‘quill-image-resize’ module instead without brackets:

import ImageResize from 'quill-image-resize';

+1 This issue appears to exist in the current latest version 3.0, and downgrading to 1.0 appears to work around it. Would be nice to get this resolved in 3.0+ to be able to use the newer features like image alignment and pick up any bug fixes.

At times, during image manipulation in 1.0 i’m seeing a different error as shown below, and i’m hoping this is resolved in 3.0+, but there’s no way for me to know:

ERROR TypeError: Failed to execute ‘removeChild’ on ‘Node’: parameter 1 is not of type ‘Node’. at ImageResize.hideSizeDisplay

If u dont want to modify webpack.config.js, the following code can also solve the problem:

import Quill from 'quill';
window.Quill  = Quill;

const ImageResize = require('quill-image-resize-module').default
Quill.register('modules/imageResize', ImageResize);

For those who use Laravel add this code to webpack.min.js:

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                'window.Quill': 'quill',
                'Quill': 'quill'
            })
        ]
    };
});

@havantuan @leo-lai Try importing it without the curly braces
import ImageResize from 'quill-image-resize-module';

The solution provided by @jspaine works for react-quill as well.

The only changes required in order to use react-quill, is to import Quill along with ReactQuill:

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

This problem is solved using image-resize version 1.0.0

MOST SIMPLE Solution for ejected create-react-app

1. run script npm i -S quill-image-resize-module@3.0.0

2. go to config folder, open up webpack.config.dev.js, add below code above new InterpolateHtmlPlugin(env.raw),

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

1. go to your component uses ReactQuill

• first, import ImageResize from 'quill-image-resize-module';
• register module somewhere in init ReactQuill.Quill.register('modules/imageResize', ImageResize);
• then add imageResize to your modules

      modules: {
        toolbar: [
          ...(your toolbar options)
        ],
        imageResize: {
          modules: ['Resize', 'DisplaySize', 'Toolbar']
        },
      },

1. now it works! 😆

Quill.register(‘modules/imageResize’, ImageResize) TypeError: Cannot read property ‘register’ of undefined at Function.register How can fix ?

To resolve this issue you have to make Quill editor global. imports is a property of Quill object because of window.Quill is undefined it throws an error on accessing window.Quill.imports inside library

If you’re using webpack update ProvidePlugin in webpack.config.js of your project

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

+1

For those still dealing with this problem, use ‘quill-image-resize’ module instead without brackets:

import ImageResize from 'quill-image-resize';

As you said, in Angular 11+ import ImageResize from 'quill-image-resize; and not import ImageResize from 'quill-image-resize-module'

Then, inclure in your angular.json the following line : node_modules/quill/dist/quill.min.js

And it should work !

It work for me with React

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import Quill from '@/utils/quill'
import ImageResize from 'quill-image-resize-module';

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

...
  const quillModules = {
    imageResize: {
      parchment: Quill.import('parchment'),
      modules: ['Resize', 'DisplaySize', 'Toolbar'],
    },
  };
...
  <ReactQuill
    theme="snow"
    modules={quillModules}
    ...
  />

/** @/utils/quill.ts  */
import { Quill } from 'react-quill';

window.Quill = Quill;

export deafult Quill;

Uncaught TypeError: t.StyleAttributor is not a constructor

please fix this

Use quill-image-resize-module-withfix in vuejs it works well

TypeError: t.StyleAttributor is not a constructor

How to include resize and drop plugins with react-quill

Spent way more time than I planned but finally figured this out!

Following all of the above recommendations (and all the stuff Google returns), I discovered that a ReactJS app boilerplated using createReactApp (recommended), does NOT respect webpack.config.js The React team has determined they will provide an amazing build script experience at the cost of some capabilities. Never fear, there is a solution that does not require eject (Not Recommended)

First, the error listed in the title of this issue is because the quill-image-resize-module expects window.Quill to be an instance of Quill. To solve that, we use web pack to attach window.quill as part of the build via the ProvidePlugin.

But wait, we can’t use webpack.config.js without ejecting the supported react scripts?

react-app-rewired to the rescue!

npm install react-app-rewired --save-dev

Create a config override in your react app root called config-overrides.js (not an awesome name but that’s what it expects)

const rewireProvidePlugin = require('react-app-rewire-provide-plugin')

/* **
** Default scripts in package.json have been replaced
**    with react-app-rewired: https://github.com/timarney/react-app-rewired
**  This allow for injecting things into the webpack.config.js
**    during start and build.  Note: apparently jest is used rather
**    than webpack for test.
******/
/* config-overrides.js */
module.exports = function override(config, env) {
  config = rewireProvidePlugin(config, env, {
    'window.Quill': ['react-quill', 'Quill']
  })
  console.log('overriding web pack in config-overrides.js');
  return config;
}

finally, replace the default scripts with your fancy new ones inside package.json (Obviously, I like to to leave bread crumbs when I make critical changes like this)

...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "start_orig": "react-scripts start",
    "build_orig": "react-scripts build",
    "test_orig": "react-scripts test --env=jsdom"
  },
...

That will register Quill as window.Quill using the react-quill module.

As has been previously stated by many helpful, smarter than me people…

// anytime you see ... it means there's other, unrelated code :)

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

...
render () {
    return (
      <div>
        <style>
          {".ql-editor { min-height: 15em}"}
        </style>
        <ReactQuill
          ref={(el) => { this.reactQuillRef = el }}
          theme={this.state.theme}
          onChange={this.handleChange}
          value={this.props.editorHtml}
          modules={Editor.modules}
          formats={Editor.formats}
          bounds={'.app'}
          placeholder='Author or Paste your contents'
         />
       </div>
     )
  }

...
Editor.modules = {
  ...
  imageDrop: true,
  imageResize: {}
}

import ImageResize from “quill-image-resize-module–fix-imports-error”; Quill.register(“modules/imageResize”, ImageResize); this library works for me well

For Angular projects: I’ve had the same problem … turns out, i missed to include "node_modules/quill/dist/quill.min.js" in the scripts array of angular.json file in my project.

Does this resize module work with react16? I still have an issue of ‘imports of undefined’ in browser. I am using React16 and webpack. I did everything mentioned above, but still getting the same error…

Try : import ImageResize from ‘quill-image-resize’ Quill.register(‘modules/imageResize’, ImageResize)

modules: { imageResize: { modules: [‘Resize’, ‘DisplaySize’, ‘Toolbar’], }, },

I saw this in a video on Youtube, and i fixed my code. Hope it’ll help you

import Quill from 'quill';
window.Quill = Quill
const ImageResize = require('quill-image-resize-module').default
Quill.register('modules/imageResize', ImageResize);

if you are using react, you should use ‘quill-image-resize-module-react’ @@module!!!

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

...
{
ImageResize: {},
}

If u dont want to modify webpack.config.js, the following code can also solve the problem:

import Quill from 'quill';
window.Quill  = Quill;

const ImageResize = require('quill-image-resize-module').default
Quill.register('modules/imageResize', ImageResize);

worked for me thanks.

i dont know if this can help any one , but i have been searching for hours and i found out in the end that ‘ImageResize’ as module doesnt register until you change thaat first capital ‘I’ to a small ‘i’ modules: { imageResize: { modules: [ ‘Resize’, ‘DisplaySize’, ‘Toolbar’ ] }, … ect

I had the same problem using Angular and ngx-quill. rgantla and jdgamble555 solutions combined worked out for me. In Angular.json scripts I initially had “node_modules/quill-image-resize-module/image-resize.min.js”, but this was unneccessary and only triggered a warning.

Use quill-image-resize-module-withfix in vuejs it works well

Any solution for this ?

I finally got it to work. I had to add below into my app.js not in the component and that is how I got it to work. Unfortunately there is a bug with the align since it will only be set if you re-size the image again. Not sure somebody has found a fix for it.

import Quill from 'quill' import ImageResize from 'quill-image-resize-module'; Quill.register('modules/imageResize', ImageResize);

I use element-ui+vue-cli ，after seaching solution，finally it works 1.you should add plugin setting in .bablrc //configuration code blew { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", "babel-plugin-transform-class-properties"] } add “babel-plugin-transform-class-properties” to fix removeModule() error 2. change webpack.config or webpack.base.config witch contain bable configuration //my webpack.base.config code blew //modules.rules { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/, include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, 3. add plugin in plugins at the bottom of configuration plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('../build/vendor-manifest.json') }), new webpack.ProvidePlugin({ 'window.Quill': 'quill' }) ]

finally ,after changing the configuration,you should run commond ‘npm run dev’ to active changes Thanks

@ssmun i have to handle ImageResize as default export and it is working

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

I added an example to my ngx-quill-example repo/app https://killercodemonkey.github.io/ngx-quill-example/ checkout the editor called “Formula & image resize editor” 😉

i only added window.Quill with webpack ProvidePlugin and then easy going

I add this to webpack.config.js:

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

it works， but there is a new webpack warning:

warning  in ./node_modules/_quill@1.3.4@quill/dist/quill.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* E:\mips_cloud_platform_svn\node_modules\_quill@1.3.4@quill\dist\quill.js
    Used by 2 module(s), i. e.
    E:\mips_cloud_platform_svn\node_modules\_vue-quill-editor@3.0.4@vue-quill-editor\dist\vue-quill-editor.js
* e:\mips_cloud_platform_svn\node_modules\_quill@1.3.4@quill\dist\quill.js
    Used by 1 module(s), i. e.
    e:\mips_cloud_platform_svn\node_modules\_quill-image-resize-module@3.0.0@quill-image-resize-module\image-resize.min.js

@jspaine Do you know how to fix it? thanks!

I fixed this issue in a fork that I’ve made. You have to supply parchment as a configuration option but it works perfectly fine in a project that I am working on. https://github.com/BrandtM/quill-image-resize-module.
I’ve put the new option in the README but here’s the gist of it:

imageResize: {
    parchment: Quill.import('parchment')
}