react quill TypeError: moduleClass is not a constructor

I’m trying to use react-quill in my nextJS project but am getting this error :

 1 of 1 unhandled error

Unhandled Runtime Error
TypeError: moduleClass is not a constructor

Call Stack
SnowTheme.addModule
node_modulesquilldistquill.js (6130:0)
SnowTheme.addModule
node_modulesquilldistquill.js (6774:0)
eval
node_modulesquilldistquill.js (6122:0)
Array.forEach
<anonymous>
SnowTheme.init
node_modulesquilldistquill.js (6120:0)
new Quill
node_modulesquilldistquill.js (1163:0)
ReactQuill.createEditor
node_modulesreact-quilllibindex.js (223:0)
ReactQuill.instantiateEditor
node_modulesreact-quilllibindex.js (187:0)
ReactQuill.componentDidMount
node_modulesreact-quilllibindex.js (152:0)
commitLifeCycles
node_modulesreact-domcjsreact-dom.development.js (20663:0)
commitLayoutEffects
node_modulesreact-domcjsreact-dom.development.js (23426:0)
HTMLUnknownElement.callCallback
node_modulesreact-domcjsreact-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
node_modulesreact-domcjsreact-dom.development.js (3994:0)
invokeGuardedCallback
node_modulesreact-domcjsreact-dom.development.js (4056:0)
commitRootImpl
node_modulesreact-domcjsreact-dom.development.js (23151:0)
unstable_runWithPriority
node_modulesschedulercjsscheduler.development.js (468:0)
runWithPriority$1
node_modulesreact-domcjsreact-dom.development.js (11276:0)
commitRoot
node_modulesreact-domcjsreact-dom.development.js (22990:0)
performSyncWorkOnRoot
node_modulesreact-domcjsreact-dom.development.js (22329:0)
eval
node_modulesreact-domcjsreact-dom.development.js (11327:0)
unstable_runWithPriority
node_modulesschedulercjsscheduler.development.js (468:0)
runWithPriority$1
node_modulesreact-domcjsreact-dom.development.js (11276:0)
flushSyncCallbackQueueImpl
node_modulesreact-domcjsreact-dom.development.js (11322:0)
flushSyncCallbackQueue
node_modulesreact-domcjsreact-dom.development.js (11309:0)
scheduleUpdateOnFiber
node_modulesreact-domcjsreact-dom.development.js (21893:0)
dispatchAction
node_modulesreact-domcjsreact-dom.development.js (16139:0)
checkForUpdates
node_modulesuse-subscriptioncjsuse-subscription.development.js (85:0)
eval
node_modulesnextdistsharedlibloadable.js (183:44)
Set.forEach
<anonymous>
LoadableSubscription._update
node_modulesnextdistsharedlibloadable.js (183:24)
eval
node_modulesnextdistsharedlibloadable.js (164:17)

and here is the code shows how imported It and how I rendered it :

import React, { useState, useEffect, useCallback } from 'react';
import 'react-quill/dist/quill.snow.css';
import { Box, TextField, Button, Typography, Input } from '@mui/material';
import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { getFirestore, collection, addDoc } from 'firebase/firestore';
import dynamic from 'next/dynamic';

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false, loading: () => <p>Loading...</p> });
const Quill = dynamic(() => import('react-quill'), { ssr: false, loading: () => <p>Loading...</p> });
const ImageUploader = dynamic(() => import('quill-image-uploader'), { ssr: false, loading: () => <p>Loading...</p> });

const CreatePost = () => {
  const [titles, setTitles] = useState({
    title_ar: '',
    title_en: '',
    title_fr: '',
    title_tr: '',
  });
  const [body, setBody] = useState('');
  const [mainImage, setMainImage] = useState(null);
  const [uploading, setUploading] = useState(false);

  const storage = getStorage();
  const db = getFirestore();

  useEffect(() => {
    if (Quill && Quill.register) {
      Quill.register('modules/imageUploader', ImageUploader);
    }
  }, []);

  const handleTitleChange = useCallback((e) => {
    const { name, value } = e.target;
    setTitles((prevTitles) => ({ ...prevTitles, [name]: value }));
  }, []);

  const handleEditorChange = useCallback((content) => {
    setBody(content);
  }, []);

  const handleMainImageChange = (e) => {
    setMainImage(e.target.files[0]);
  };

  const uploadImage = async (image) => {
    if (!image) {
      throw new Error('No image provided');
    }
    
    const storageRef = ref(storage, `images/${image.name}`);
    await uploadBytes(storageRef, image);
    return getDownloadURL(storageRef);
  };

  const uploadInBodyImage = async (image) => {
    if (!image) {
      return Promise.reject(new Error('No image provided'));
    }

    const storageRef = ref(storage, `images/${image.name}`);
    return uploadBytes(storageRef, image).then(() => {
      return getDownloadURL(storageRef).then((url) => {
        return url;
      });
    }).catch((error) => {
      console.error('Error uploading image or getting URL:', error);
      throw error;
    });
  };

  const modules = {
    toolbar: [
      [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      ['bold', 'italic', 'underline'],
      ['link', 'image'],
      ['clean']
    ],
    imageUploader: {
      upload: async (file) => {
        try {
          const url = await uploadInBodyImage(file);
          return url;
        } catch (error) {
          console.error('Image upload failed:', error);
          throw error;
        }
      },
    },
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setUploading(true);

    try {
      let mainImageUrl = '';
      if (mainImage) {
        mainImageUrl = await uploadImage(mainImage);
      }

      await addDoc(collection(db, 'Article'), {
        ...titles,
        body,
        mainImageUrl,
        createdAt: new Date(),
      });

      alert('Article created successfully!');
      setTitles({
        title_ar: '',
        title_en: '',
        title_fr: '',
        title_tr: '',
      });
      setBody('');
      setMainImage(null);
    } catch (error) {
      console.error('Error creating article:', error);
      alert('Failed to create article.');
    } finally {
      setUploading(false);
    }
  };

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h5" gutterBottom>Create a New Article</Typography>
      <form onSubmit={handleSubmit}>
        <Box mb={2}>
          <TextField
            fullWidth
            label="Title (Arabic)"
            name="title_ar"
            value={titles.title_ar}
            onChange={handleTitleChange}
            variant="outlined"
          />
        </Box>
        <Box mb={2}>
          <TextField
            fullWidth
            label="Title (English)"
            name="title_en"
            value={titles.title_en}
            onChange={handleTitleChange}
            variant="outlined"
          />
        </Box>
        <Box mb={2}>
          <TextField
            fullWidth
            label="Title (French)"
            name="title_fr"
            value={titles.title_fr}
            onChange={handleTitleChange}
            variant="outlined"
          />
        </Box>
        <Box mb={2}>
          <TextField
            fullWidth
            label="Title (Turkish)"
            name="title_tr"
            value={titles.title_tr}
            onChange={handleTitleChange}
            variant="outlined"
          />
        </Box>
        <Box mb={2}>
          <Typography variant="h6" gutterBottom>Body</Typography>
          <ReactQuill
            value={body}
            onChange={handleEditorChange}
            modules={modules}
            style={{ height: '400px' }}
          />
        </Box>
        <Box mb={2}>
          <Input
            type="file"
            accept="image/*"
            onChange={handleMainImageChange}
            fullWidth
          />
        </Box>
        <Button type="submit" variant="contained" color="primary" disabled={uploading}>
          {uploading ? 'Uploading...' : 'Create Article'}
        </Button>
      </form>
    </Box>
  );
};

export default CreatePost;