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

[Focusz]

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 })

[raphaelvsantos]

I'd point to the same solution from pelevin: https://dev.to/a7u/reactquill-with-nextjs-478b

[noobnoobdc137]

Try

import { SPLayout } from '@layout';
import dynamic from 'next/dynamic';
import { FC, ReactElement } from 'react';

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

const Create: FC = (): ReactElement => {
	return (
		<SPLayout>
			<ReactQuill
				value={'test'}
				onChange={e => {
					console.log(e);
				}}
			/>
		</SPLayout>
	);
};

export default Create;

[EliasTouil]

Hey guys, do you know how to access Quill (ReactQuill.Quill) whilst using a dynamic import? I want to create a blot.

[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.

[kaushalsachan]

I have written a solution see https://stackoverflow.com/a/77369928/2924492