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

[seandearnaley]

+1

[AlexQuidditch]

This problem is solved using image-resize version 1.0.0

[seandearnaley]

@AlexQuidditch is 1.0.0 a future version or is that something we have access to already? thank you.

[AlexQuidditch]

@seandearnaley it's already have.

[sarora2073]

+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

[seandearnaley]

I also get the removeChild type error using version 1.

[jspaine]

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.

[madsnedergaard]

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

[kdenz]

@jspaine @madsnedergaard it works!

[kudsyf]

am getting the same with angular4 !!??

[kudsyf]

am getting

Uncaught TypeError: Cannot read property 'imports' of undefined

[ibudisteanu]

@jspaine I tried to configure the webpack according to your idea but it doesn't work. I am also using vue-quill-editor and it breaks the vue-quill-editor giving me this error:

ReferenceError: Quill is not defined

Any idea to solve it?

[jspaine]

Where's that error coming from? Can you register other modules?

The readme for vue-quill-editor says 'if you need register quill modules, you need to introduce and register before the vue program is instantiated'

[ibudisteanu]

@jspaine yes, I could register a simple ImageResize and ImageImport js modules, but I can not register this library...

These two modules are working

    import { ImageImport } from './modules/ImageImport.js'
    import { ImageResize } from './modules/ImageResize.js'

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

while I don't have any luck registering the quill-image-resize-module

this is my entire code:

    import Quill from 'quill';
    console.log(window.Quill);

    const VueQuillEditor = require('vue-quill-editor');
    quillEditor = VueQuillEditor.quillEditor;

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

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

[jspaine]

ReferenceError: Quill is not defined

Can you look at the stack trace for this, does is it come from the image-resize module?

Are you sure you don't have to register it before requiring vue-quill-editor? I don't know vue and not sure what the readme means by register before the vue program is instantiated.

Could also try logging just Quill and make sure its defined and add 'Quill': 'quill' to the webpack provide plugin too.

[ibudisteanu]

@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....

[dharmesh03]

Unhandled Rejection (TypeError): Cannot read property 'imports' of undefined IN REACT

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

[nobyatcam123]

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

[havantuan]

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

[leo-lai]

TypeError: Cannot read property 'register' of undefined

[BrandtM]

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

[BrandtM]

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

[ding-xu]

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!

[jspaine]

@ding-xu i've no idea sorry! It's strange only the casing of the drive letter seems to differ. I thought it was maybe something to do with the provide plugin but that doesn't seem to have anything to do with absolute paths.

[ssmun]

On Angular 5 For some reason after import { ImageResize } from 'quill-image-resize-module'; ImageResize is still undefined

Error: Unexpected value 'undefined' declared by the module 'AppModule'

[lxmbetterman]

@jspaine 非常感谢 it's working fine

[KillerCodeMonkey]

@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

[levous]

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

[aral]

Here is a write-up of the solution for Vue based on the answers here and elsewhere. Hope it helps: https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411

[seongbin9786]

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

3. 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']
     },
     },

4. now it works! :satisfied:

[vuphan365]

Hey, I use React and I have same problem. I try to fix with all above guys 's comment from jspaine to seongbin9786 but it still doesn't work. Can any one help me? Also I found 2 file name webpack.config.js in folder webpack-dev-server and quill-image-resize-module.

[vuphan365]

@dharmesh03 Did you fix your problem??

[timbaas]

Had to figure this out in a Meteor-Vue app without the use of webpack, here's my (ugly) solution:

import VueQuill, {Quill} from 'vue-quill-editor'
window.Quill = Quill;

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

const toolbar = [['image']];
const modules = { toolbar, imageResize: true };
Vue.use(VueQuill,{modules});

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

[mgblow]

@sarora2073 The removeChild() error can be solved by doing and manually editing the index .js file and remove this line : if (!this.options.displaySize) { return; } in showSizeDisplay() function.The reason is it tries to remove the resize borders and ruler when you click outside image in hideSizeDisplay() function and its done by removing the this.display object, but in showSizeDisplay() it only creates the object when displaySize option is set.So when this option has not been set there no object to remove.You either have to set the option or remove the code I mentioned.

[flyon]

just adding my 2 cents: I wanted to make this work with typescript, and the code is run both on the server and in the browser. The import doesnt work on the server, so I check which environment the code is running, and I have to use require instead of import in the top of the file. This meant I had to use ImageResize.default. The code below + the ProvidePlugin in the webpackconfig as mentioned above made it work.

componentWillMount()
{
    if(!this.isNodejs())
    {
        this.ReactQuill = require('react-quill');
        var ImageResize = require('quill-image-resize-module');
        this.ReactQuill.Quill.register('modules/imageResize', ImageResize.default);
    }
}

[dlrenz]

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

[fuping2311]

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

[eikem]

I use Laravel 5.6 and Vue.js

In my package.json I got:

"quill": "^1.3.6", "vue": "^2.5.16", "vue-quill-editor": "^3.0.6", "quill-image-resize-module": "^3.0.0",

I created a Vue.js Component and in there I got:

window.Quill = require('quill');
window.Quill = Quill
import { quillEditor } from 'vue-quill-editor' 
import { ImageResize } from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize)

   export default{
        components: {
                quillEditor
        },

        data () { 
                return { 
                name: 'app',

                editorOption: {  
                        modules: {
                            toolbar: [
                              ['bold', 'italic', 'underline'],
                              ['blockquote', 'code-block'],
                              [{ 'header': 1 }, { 'header': 2 },{ 'header': 3 }],
                              [{ 'list': 'ordered' }, { 'list': 'bullet' }],

                              [{ 'indent': '-1' }, { 'indent': '+1' }],
                              [{ 'direction': 'rtl' }],
                              [{ 'size': ['small', false, 'large', 'huge'] }],
                              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

                              [{ 'color': [] }, { 'background': [] }],
                              [{ 'align': [] }],
                              ['clean'],
                              ['link', 'image']
                            ],

                           imageResize: {
                                displayStyles: {
                                  backgroundColor: 'black',
                                  border: 'none',
                                  color: 'white'
                                },
                                modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
                                          }   

                }},
                 .......

but keep getting the Error:

window.Quill is undefined

Anyone got a idea how I can get it to work in Vue.js and Laravel?

[ycjcl868]

+1

[harrysbaraini]

@eikem, I think it's all about scopes. You reassign window.Quill to Quill, which may be not declared on the scope. Try:

window.Quill = require('quill');

or

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

[eikem]

@harrysbaraini I have tried it both. I have put it directly in my component but no luck so I tried to add it into the app.js but again no luck.

require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import VueRouter from 'vue-router';
window.Vue.use(VueRouter);
//import example from './components/Example.vue';
window.axios = require('axios');
import Quill from 'quill';
window.Quill  = Quill;
import App from './App.vue';

import CreatePost from './components/posts/CreatePost.vue';

const routes = [
                {
                    path: '/admin/news/create-post', 
                    component: CreatePost, 
                    name: 'CreatePost'
                },  
];

const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

[harrysbaraini]

@eikem, you don't need the import Vue from 'vue', because you import it on the previous line.

Try adding it to your webpack.mix.js:

mix.autoload({
    quill: ['window.Quill']
})

Tried it now here and it worked.

[eikem]

My webpack.mix.js now looks like below, but still the same Error Message. I did run npm run watch so I would assume that the changes are in effect. Do I have to do any change in the bootstrap.js file from Laravel 5.6?

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.autoload({
    quill: ['window.Quill']
});

 mix.autoload({
   jquery: ['$', 'window.jQuery']
});

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css').sourceMaps().setPublicPath('public');

[harrysbaraini]

Merge the two mix.autoload you have, like this:

mix.autoload({
    quill: ['window.Quill'],
    jquery: ['$', 'window.jQuery']
})

[eikem]

Done that, but no change. window.Quill is undefined

Just added the new webpack in my webpack.mix.js The Error changed now to target is undefined

 mix.autoload({
    quill: ['window.Quill'],
    jquery: ['$', 'window.jQuery']
});

const webpack = require('webpack');

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

[harrysbaraini]

You shouldn't add 'window.Quill' to ProvidePlugin as you are already defining it in the autoload function... It does the job here.

[eikem]

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

[cristiancpl]

Any solution for this ?

[dasm30]

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

You just saved my day