Cannot read properties of undefined (reading 'imports')

[grekpg]

import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

import ImageUploader from "quill-image-uploader";

import 'quill-image-uploader/dist/quill.imageUploader.min.css';
Quill.register("modules/imageUploader", ImageUploader);


import MagicUrl from 'quill-magic-url'
Quill.register('modules/magicUrl', MagicUrl)

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

import {Mention, MentionBlot} from "quill-mention";
Quill.register({ "blots/mention": MentionBlot, "modules/mention": Mention });

// import * as Emoji from "quill-emoji";
// Quill.register("modules/emoji", Emoji);
// import "quill-emoji/dist/quill-emoji.css";

import * as QuillTableUI from 'quill-table-ui'

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

give me

image-resize.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'imports') at webpack_require (bootstrap:19:1) at ../../vendor/itbcode/itbcodepack/editor-quill/src/controller/quill-controller.js (meatask.js:1003:81)

if i comment

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

works fine

[unicode6674]

I found the problem. It could be the version， if your quill version < V2.0.0, (my version is v1.3.7) , use [email protected] is work

[qdfudimo]

new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js' }) 加入这行代码

[grekpg]

Could someone please provide an example of:

A package.json configuration . A Quill initialization example with the proper setup with modules ?. This would be very helpful to understand the proper integration.

Thank you in advance!

[FZ-Iskandar]

@grekpg

Until they provide a better option, I have switched to: https://www.npmjs.com/package/quill-resize-image

This is how to import:

import { ImageDrop } from 'quill-image-drop-module';
import QuillResizeImage from 'quill-resize-image';

Quill.register('modules/imageDrop', ImageDrop);
Quill.register("modules/resize", QuillResizeImage);

Hope it helps you too or anyone else interested