'imports' of undefined

[AlexQuidditch]

Using Vue.js 2.2.6 with official webpack template and Vue-Quill-Editor

Console logs in dev run:

Uncaught TypeError: Cannot read property 'imports' of undefined (image-resize.min.js?c9ce:1)

Code here:

// main.js
<script>

    import Vue from 'vue';
    // some plugins here
    import VueQuillEditor from 'vue-quill-editor';
    Vue.use(VueQuillEditor);

</script>

// some *.vue file
<script>

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

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

    export default {
        name: 'editor',
        data() {
            return {
                // some code
                Editor: {
                    // some code
                    options: {
                        // some code
                        modules: {
                            imageResize: {
                                displaySize: true
                            }
                        }
                    }
                }
            }
        }
    }
</script>

[waqaramjad]

getting same error in React .js

[lf-achyutpkl]

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 :smile:

[aqib-git]

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'
  })

[paschalisp]

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'
  })

The simplest and cleanest solution of all. This configuration line in webpack.config.js and problem was solved....

[AndrewSavetchuk]

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'
            })
        ]
    };
});

[cuteCloud]

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.

thanks for your resolve ,its can work well

[hemavardhan]

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

[dobeerman7]

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

TypeError: t.StyleAttributor is not a constructor

[alexeybs90]

Uncaught TypeError: t.StyleAttributor is not a constructor

please fix this

[jdgamble555]

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

import ImageResize from 'quill-image-resize';

[rgantla]

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

[Noppey]

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.

[khialb32]

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

[kishan-tocca]

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

[shady-xia]

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

[singhAmandeep007]

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 but could you also explain this method please.

[shady-xia]

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 but could you also explain this method please.

This is the cause of the error in source code：const Parchment = window.Quill.imports.parchment;

Because there is no "quill" variable on "window", so we add it. Moreover, because of the scope, We can only use require instead of import

[IgnacioZCL]

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

import ImageResize from 'quill-image-resize';

I use React without webpack and this worked for me, thank you!

[drmalus]

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

Thanks a lot! That solved my problem!

[feilewang]

Today is 04/02/2021 this problem is really a funy problem. as @shady-xia said. is the letter problem modules: { imageResize: {}, ImageExtend: {} } please clear the eyes!!!!!!!! don't understand why like this...

[hugorax]

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.

[ashen114]

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;

[Ichoui]

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 !

[Quizas007]

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: {},
}

[nggth]

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

[ruojianll]

Set Quill to window and load quill-image-resize-module async.

import { Quill } from "@vueup/vue-quill";
(window as any).Quill=Quill;
(async function(){
  let res = await import("quill-image-resize-module")
  Quill.register('modules/imageResize', res.default);
  //other init work
})()

[vnphu]

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

modules: { imageResize: { modules: ['Resize', 'DisplaySize', 'Toolbar'], }, },

[ozamamurzleen]

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'
  })

This worked, thanks

[muh-osman]

For react.js

import ReactQuill, { Quill } from 'react-quill';
import imageResize from 'quill-image-resize-module-react';
import "quill/dist/quill.snow.css";
.
.
.
Quill.register('modules/imageResize', imageResize);
.
.
.
  const modules = {
   .
   .
   .
    imageResize: {
      modules: ["Resize", "DisplaySize"],
    },
  };

package.json

    "quill": "^2.0.2",
    "react-quill": "^2.0.0",
    "quill-image-resize-module-react": "^3.0.0",