dynamic import returns {$$typeof:...,render:f...} instead of the exported class

Question

i am using nextjs and trying to import the module Quill into my project using this code

const Quill = dynamic(import("quill") , {
    ssr:false,
})

but when i log Quill this is result {$$typeof:...,render:f...} instead of the Quill class

and this is the vanilla-js module and i am trying to make it compatible with nextjs at start i used the react-quill module but faced problems with getting more control over the editor

Answer 1

so this is my solution i uninstalled this module and installed react-quill

but i imported it in a way that the editor can be used and the component be rendered

at first in the components directory i created two files

-ReactQuill
-ReactQuillWrapper

i wrote my component normally like a client side rendered react component and here is the code

import ReactQuill from "react-quill";
import { useRef , useCallback } from "react";

function ReactQuillEditor({Ref , formats , theme , modules , placeHolder}) {

    return (
        <ReactQuill ref={Ref}  theme={theme} modules={modules} placeholder={placeHolder} ></ReactQuill>
    )
}

export default ReactQuillEditor

then i exported this with a wrapper to load it dynamically in the client side

https://nextjs.org/docs/advanced-features/dynamic-import

using this code

import dynamic from "next/dynamic";


const ReactQuill = dynamic(import("./ReactQuill"), {    
    ssr: false,
    })

export default ReactQuill

and finally in my page

import {useState , useRef, useEffect , useCallback} from "react"
import ReactQuill from '../components/ReactQuillWrapper'

import 'react-quill/dist/quill.snow.css'

export default function Blog() {

        let ReactQuillRef = useCallback(editor => {
            editor?.editor?.format('direction', 'rtl');
            editor?.editor?.format('align', 'right');
        })
        
const module = {toolbar:[

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown

    ['bold', 'italic', 'underline', 'strike' , 'link'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'align': [] }],
    
    ['image'],

    ['clean']                                         // remove formatting button
],}

return (
<>
<div></div>
<ReactQuill Ref={ReactQuillRef} modules={module} placeHolder={"هرچی دوست داری بنویس ..."} ></ReactQuill>
</> 
)
}