Please help me, I want to build my project, but this is the error that comes out: node_modules\quill\dist\quill.js (7661:11) @ document ⨯ ReferenceError: document is not defined

[KhasanshinRamis]

Please help me, I want to build my project, but this is the error that comes out:

node_modules\quill\dist\quill.js (7661:11) @ document
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (C:\Users\Ramis\Desktop\React+Next.js\vip-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\Ramis\Desktop\React+Next.js\vip-app\.next\server\webpack-runtime.js:33:43)
    at eval (./src/components/ui/textEditor.tsx:9:69)
    at (ssr)/./src/components/ui/textEditor.tsx (C:\Users\Ramis\Desktop\React+Next.js\vip-app\.next\server\app\(protected)\write\page.js:778:1)      
    at __webpack_require__ (C:\Users\Ramis\Desktop\React+Next.js\vip-app\.next\server\webpack-runtime.js:33:43)
    at eval (write/page.tsx:25:84)
    at (ssr)/./src/app/(protected)/write/page.tsx (C:\Users\Ramis\Desktop\React+Next.js\vip-app\.next\server\app\(protected)\write\page.js:536:1)    
    at __webpack_require__ (C:\Users\Ramis\Desktop\React+Next.js\vip-app\.next\server\webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)

My Components:

'use client';

import { Button } from '@/components/ui/button';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.bubble.css';
import { Input } from '@/components/ui/input';
import { Form, FormControl, FormItem, FormLabel, FormMessage, FormField } from '@/components/ui/form';
import { FormError } from '@/components/formError';
import { FormSuccess } from '@/components/formSuccess';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { FaFileImage } from "react-icons/fa";
import { zodResolver } from '@hookform/resolvers/zod';
import { NewPostSchema } from '@/schemas';
import {
	getStorage,
	ref,
	uploadBytesResumable,
	getDownloadURL,
} from "firebase/storage";
import * as z from 'zod';
import { useEffect, useState } from 'react';
import postService from '@/services/postService';
import { app } from '@/config/firebase';



export default function WritePage() {
	const queryClient = useQueryClient();



	const [media, setMedia] = useState<string>('');
	const [file, setFile] = useState<Blob | Uint8Array | ArrayBuffer>();
	const [disabledFromMedia, setDisabledFromMedia] = useState<boolean>(false);

	const [success, setSuccess] = useState<string | undefined>('');
	const [errorMessage, setErrorMessage] = useState<string | undefined>('');

	useEffect(() => {
		const storage = getStorage(app);
		const upload = () => {
			if (file) {

				const name = new Date().getTime().toString();
				const storageRef = ref(storage, name);

				const uploadTask = uploadBytesResumable(storageRef, file);

				uploadTask.on(
					"state_changed",
					(snapshot) => {
						const progress =
							(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
						console.log("Upload is " + progress + "% done");
						switch (snapshot.state) {
							case "paused":
								console.log("Upload is paused");
								break;
							case "running":
								console.log("Upload is running");
								break;
						}
					},
					(error) => { console.log(error.message) },
					() => {
						getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
							setMedia(downloadURL);
							setDisabledFromMedia(true);
							console.log('File available at', downloadURL);
						});
					}
				);
			}
		};

		file && upload();
	}, [file]);

	const form = useForm<z.infer<typeof NewPostSchema>>({
		resolver: zodResolver(NewPostSchema)
	});

	const mutation = useMutation({
		mutationKey: ['new-post'],
		mutationFn: (values: z.infer<typeof NewPostSchema>) => postService.create(values),
		onSuccess: (data: any) => {
			console.log('Success!', data);
			console.log(data.success);
			setSuccess('Новая запись создана!');
			queryClient.invalidateQueries({ queryKey: ['new-post'] });
		},
		onError: (error: any) => {
			console.log(error.message);
			setErrorMessage(error.response.data.error);
			queryClient.invalidateQueries({ queryKey: ['new-post'] });
		}
	});

	const slugify = (str: string) => str.toLowerCase().trim().replace(/\W_/g, "").replace(/\s/g, "-").replace(/^-+|-+$/g, "").replace(/а/g, "a").replace(/б/g, "b").replace(/в/g, "v").replace(/г/g, "g").replace(/д/g, "d").replace(/е/g, "e").replace(/ё/g, "yo").replace(/ж/g, "zh").replace(/з/g, "z").replace(/и/g, "i").replace(/й/g, "y").replace(/к/g, "k").replace(/л/g, "l").replace(/м/g, "m").replace(/н/g, "n").replace(/о/g, "o").replace(/п/g, "p").replace(/р/g, "r").replace(/с/g, "s").replace(/т/g, "t").replace(/у/g, "u").replace(/ф/g, "f").replace(/х/g, "kh").replace(/ц/g, "ts").replace(/ч/g, "ch").replace(/ш/g, "sh").replace(/щ/g, "shch").replace(/ъ/g, "").replace(/ы/g, "y").replace(/ь/g, "").replace(/э/g, "e").replace(/ю/g, "yu").replace(/я/g, "ya").slice(0, 30);


	const onSubmit = (values: z.infer<typeof NewPostSchema>) => {
		console.log(media);
		const updatedValues = {
			img: media,
			slug: slugify(values.title),
			...values
		};
		console.log('image mutation', updatedValues.image);
		mutation.mutate(
			updatedValues
		);
	};


	console.log("media: ", media);
	console.log("file: ", file);

	return (
		<div className='min-h-screen'>
			<Form {...form}>
				<form
					className='grid grid-rows-[64px_36px_32px_1fr_36px] gap-y-8 px-24 sm:px-4 py-6 h-full'
					onSubmit={form.handleSubmit(onSubmit)}
				>
					<FormField
						control={form.control}
						name='title'
						render={({ field }) => (
							<FormItem>
								<FormControl>
									<Input
										{...field}
										placeholder='Заголовок'
										className='text-3xl md:text-xl pl-0 py-8 text-white placeholder:text-white focus:border-none focus:outline-none border-none bg-transparent outline-none shadow-none'
										disabled={mutation.isPending}
									/>
								</FormControl>
								<FormMessage />
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name='category'
						render={({ field }) => (
							<FormItem>
								<Select
									disabled={mutation.isPending}
									onValueChange={field.onChange}
								>
									<FormControl>
										<SelectTrigger>
											<SelectValue
												placeholder='Выберите категорию'

											/>
										</SelectTrigger>
									</FormControl>
									<SelectContent>
										<SelectItem value='style'>
											Стиль
										</SelectItem>
										<SelectItem value='fashion'>
											Мода
										</SelectItem>
										<SelectItem value='food'>
											Еда
										</SelectItem>
										<SelectItem value='culture'>
											Культура
										</SelectItem>
										<SelectItem value='travel'>
											Путешествие
										</SelectItem>
										<SelectItem value='coding'>
											Программирование
										</SelectItem>
									</SelectContent>
								</Select>
								<FormMessage />
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name='image'
						render={({ field }) => (
							<FormItem>
								<FormLabel
									className='grid justify-center items-center bg-indigo-900 w-[32px] h-[32px] rounded-[50%]'
									htmlFor="image"
								>
									<FaFileImage width={16} height={16} color='#F5EFEF' />
								</FormLabel>
								<FormControl>
									<Input
										{...field}
										type="file"
										id='image'
										disabled={mutation.isPending}
										onChange={(event) => {
											if (event.target.files && event.target.files.length > 0) {
												setFile(event.target.files[0]);
											}
										}}
										style={{ display: 'none' }}
									/>
								</FormControl>
								<FormMessage />
							</FormItem>
						)}
					/>

					<FormField
						control={form.control}
						name='description'
						render={({ field }) => (
							<FormItem>
								<FormControl>
									<ReactQuill
										{...field}
										theme='bubble'
										placeholder='Расскажи свою историю...'
										className='[&>div>div>p]:text-base [&>div>div>p]:text-white [&>div>div>p]:placeholder:text-white placeholder:[&>div>div>p]:text-2xl md:placeholder:[&>div>div>p]:text-lg [&>div>div>h1]:text-white  [&>div>div>h1]:text-text-3xl md:placeholder:[&>div>div>h1]:text-xl [&>div>div>h2]:text-white [&>div>div>h2]:text-xl [&>div>div>ol>li]:text-base [&>div>div>ol>li]:text-white'
									/>
								</FormControl>
								<FormMessage />
							</FormItem>
						)}
					/>


					<FormError message={errorMessage} />
					<FormSuccess message={success} />
					<Button
						type='submit'
						className='grid items-end'
						disabled={mutation.isPending && disabledFromMedia}
					>
						Создать новую запись
					</Button>
				</form>
			</Form>
		</div>
	);

}

[JardelCheung]

U can use dynamic in next/dynamic to resolve this issue.

exa:

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

return(
<ReactQuill/>
)