Remix fails with 'document is not defined'

[ACregan]

I am trying to use this in a remix app however, even if I use it wrapped in a ClientOnly component its still returns document is not defined. Is there something I have missed? Any help or guidance would be appreciated.

import RichTextEditor from "quill-react-commercial";
import "quill-react-commercial/lib/index.css";
import { ClientOnly } from "remix-utils/client-only";

const QuillCommercial = () => {
  if (typeof document === "undefined") {
    return null;
  }
  return (
    <ClientOnly fallback={<p>LOADING</p>}>
      {() => (
        <RichTextEditor
          modules={{ table: {}, codeHighlight: true, imageResize: true }}
        />
      )}
    </ClientOnly>
  );
};

export default QuillCommercial;

[ACregan]

I worked aroud this by wrapping the component above in the remix utils component:

https://github.com/sergiodxa/remix-utils

(instead of doing it within the component)

            <ClientOnly fallback={<p>LOADING</p>}>
              {() => (
                <QuillCommercial
                  {...props}
                />
              )}
            </ClientOnly>