title: How to access ReactQuill Ref when using dynamic import in NextJS?
body: <p>I'm running into a funny problem. I'm using NextJS for its server-side rendering capabilities and am using ReactQuill as my rich-text editor. To get around ReactQuill's tie to the DOM, I'm dynamically importing it. However, that presents another problem which is that when I try to attach a ref to the ReactQuill component, it's treated as a loadable component instead of the ReactQuill component. I need the ref in order to customize how images are handled when uploaded into the rich-text editor. Right now, the ref returns current:null instead of the function I can use .getEditor() on to customize image handling.</p>
  
  <p>Anybody have any thoughts on how I can address this? I tried ref-forwarding, but it's still applying refs to a loadable component, instead of the React-Quill one. Here's a snapshot of my code.</p>
  
  <pre><code>const ReactQuill = dynamic(import('react-quill'), { ssr: false, loading: () =&gt; &lt;p&gt;Loading ...&lt;/p&gt; }
  );
  
  const ForwardedRefComponent = React.forwardRef((props, ref) =&gt; {return (
      &lt;ReactQuill {...props} forwardedRef={(el) =&gt; {ref = el;}} /&gt;
  )})
  
  class Create extends Component {
      constructor() {
          super();
          this.reactQuillRef = React.createRef();
      }
  
      imageHandler = () =&gt; {
           console.log(this.reactQuillRef); //this returns current:null, can't use getEditor() on it.
      }
      render() {
      const modules = {
        toolbar: {
            container:  [[{ 'header': [ 2, 3, false] }],
              ['bold', 'italic', 'underline', 'strike'],
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              [{ 'script': 'sub'}, { 'script': 'super' }],
              ['link', 'image'],
              [{ 'indent': '-1'}, { 'indent': '+1' }],    
              [{ 'align': [] }],
              ['blockquote', 'code-block'],],
            handlers: {
               'image': this.imageHandler
            }
          }
       };
           return(
               &lt;ForwardedRefComponent 
                  value={this.state.text}
                  onChange={this.handleChange}
                  modules={modules}
                  ref={this.reactQuillRef}/&gt; //this.reactQuillRef is returning current:null instead of the ReactQuill function for me to use .getEditor() on
           )
      }
  }
  
  const mapStateToProps = state =&gt; ({
      tutorial: state.tutorial,
  });
  
  export default connect(
      mapStateToProps, {createTutorial}
  )(Create);
  </code></pre>