[🐛 Bug]: Error rendering Quill

[diegovb-sys]

Describe the bug
A bug has been added with the reshape of the bath resolved button. The ReactQuill is loaded on the server side but it requires a document. Therefore, to avoid the server render it's mandatory to move the render to the local env.

Screenshots

[dosubot]

The error happens because ReactQuill depends on the browser's document object, which isn't available during server-side rendering (SSR). This causes the "document is not defined" crash when ReactQuill is loaded on the server, such as with Turbopack or Next.js SSR.

To fix this, you should ensure ReactQuill is only rendered on the client. The recommended approach is to use a dynamic import with SSR disabled. For example, with Next.js:

import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });

Then use <ReactQuill /> as usual in your component. This ensures ReactQuill only loads in the browser, preventing SSR errors. This pattern is already used in the codebase for other browser-only libraries and is the standard solution for this type of issue (example).

If you are not using Next.js, you can also conditionally render ReactQuill only after confirming the code is running in the browser (e.g., checking typeof window !== "undefined"), but dynamic import is the cleanest solution in most React SSR setups.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}