I have a problem react-quill with typescript nextjs it said document is not defined

Ticket due diligence

• [ /] I have verified that the issue persists under ReactQuill v2.0.0-beta.2

ReactQuill version

• [ /] v2.0.0-beta.2 { "name": "@minimal/material-kit-react", "author": "Minimal", "licence": "UNLICENSED", "version": "2.1.0", "private": true, "scripts": { "dev": "next dev -p 8222", "build": "next build", "start": "next start" }, "dependencies": { "@auth0/auth0-spa-js": "^1.15.0", "@emotion/cache": "^11.4.0", "@emotion/react": "^11.4.0", "@emotion/styled": "^11.3.0", "@iconify/icons-eva": "^1.1.0", "@iconify/icons-ic": "^1.1.4", "@iconify/react": "^1.1.4", "@material-ui/core": "^5.0.0-alpha.34", "@material-ui/icons": "^5.0.0-alpha.34", "@material-ui/lab": "^5.0.0-alpha.34", "@material-ui/styles": "^5.0.0-alpha.33", "@prisma/client": "^2.24.1", "@reduxjs/toolkit": "^1.5.1", "bcryptjs": "^2.4.3", "change-case": "^4.1.2", "date-fns": "^2.21.3", "draft-js": "^0.11.7", "faker": "^5.5.3", "formik": "^2.2.9", "framer-motion": "^4.1.17", "highlight.js": "^11.0.1", "jsonwebtoken": "^8.5.1", "jss": "^10.6.0", "jss-rtl": "^0.3.0", "lodash": "^4.17.21", "next": "^10.2.2", "notistack": "^1.0.9", "nprogress": "^0.2.0", "numeral": "^2.0.6", "react": "17.0.2", "react-dom": "17.0.2", "react-draft-wysiwyg": "^1.14.7", "react-dropzone": "^11.3.2", "react-helmet-async": "^1.0.9", "react-intersection-observer": "^8.32.0", "react-markdown": "^6.0.2", "react-quill": "^2.0.0-beta.2", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scroll": "^1.8.2", "redux": "^4.1.0", "redux-persist": "^6.0.0", "rehype-highlight": "^4.1.0", "rehype-raw": "^5.1.0", "simplebar": "^5.3.3", "simplebar-react": "^2.3.3", "stylis": "^4.0.10", "stylis-plugin-rtl": "^2.1.0", "yup": "^0.32.9" }, "devDependencies": { "@types/bcryptjs": "^2.4.2", "@types/faker": "^5.5.5", "@types/jsonwebtoken": "^8.5.1", "@types/lodash": "^4.14.170", "@types/nprogress": "^0.2.0", "@types/numeral": "^2.0.1", "@types/react": "^17.0.6", "@types/react-dom": "^17.0.6", "@types/react-draft-wysiwyg": "^1.13.2", "@types/react-redux": "^7.1.16", "@types/react-router-dom": "^5.1.7", "@types/react-scroll": "^1.8.2", "prisma": "^2.24.1", "typescript": "^4.2.4" } }

[pelevin-d-y]

In my case I used dynamic imports

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })

[flaming-codes]

@EliasTouil Please try moving all your editor-code into a separate module that gets loaded as the view, e.g. Create.tsx, as you’ve already done, but with all imports in the common way. Then in your page use the dynamic import for this new module, e.g. Create.