[Feature Request] use react-quil,Cannot read property 'imports' of undefined

[zzj0401]

webpack config

  chainWebpack: (config, { env, webpack }) => {
    new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    }),
    config.module
        .rule('quill-image-resize')
        .test(/\.js$/)
        .exclude
        .add(/node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/)
        .end()
        .use('loader')
        .loader('babel-loader')
  }

code

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

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

 const modules = {
    imageResize: {   //添加
      displayStyles: {   //添加
        backgroundColor: 'black',
        border: 'none',
        color: 'white'
      },
      modules: ['Resize', 'DisplaySize', 'Toolbar'] 
    },
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
        [{ script: 'sub' }, { script: 'super' }],
        [{ direction: 'rtl' }],

        [{ 'size': ['10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '32px', '48px'] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }],
        [{ font: [] }],
        [{ align: [] }],
        ['link', 'image', 'video'],
        ['clean'],
      ],
      handlers: {
        image: imageHandler,
      },
    },
    imageUploader: {
      upload: (file: any) => {
        handleUpload(file, (urlData: any) => {
          dropImageRef.current = `${DomainNameOfImg}${urlData}`;
          quillEditor = quillRef.current.getEditor();
          const range = quillEditor.getSelection();
          quillEditor.insertEmbed(range.index, 'image', dropImageRef.current);
          currentContextRef.current = quillEditor.scrollingContainer.innerHTML;
        });
        return dropImageRef.current;
      },
    },
  };

   <ReactQuill
    ref={quillRef}
    value={currentContextRef.current || ''}
    onChange={handleTextChange}
    modules={modules}
    formats={formats}
    style={{ height: '51vh', width: '100%', borderRadius: '12px' }}
   />

[LbhFront-end]

All the way i try arrording to other issues,And there is no solution.need Help!!!

[ikibkilam]

Please help. I have the same problem. Using react.

[danwellman]

Same error using ngx-quill and this plugin in an Angular app

[hoangan310]

vue.config.js

chainWebpack: config => {
  config.plugin('provide').use(
      require('webpack').ProvidePlugin,
      [
        {
          'window.Quill': 'quill'
        }
      ]
    )
  }

Component

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

[danwellman]

FWIW I fixed this with ngx-quill by installing the BlotFormatter plugin (which also supports image resizing)

[whispergong]

using quill-image-resize-module-react can fix it when you use react-quill