document is not defined

[alfirus]

Describe the bug
I'm using code from https://www.blocknotejs.org/docs/quickstart and place it inside my /app/departments/humanresource/memos/add.

When I try to "npm run build", i'll get

`Error occurred prerendering page "/departments/humanresource/memos/add". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined`

To Reproduce
This is my code
`'use client';
import React, { useState } from 'react';
import UserData from '@/components/UserData';
import axios from 'axios';
import '@blocknote/core/fonts/inter.css';
import { useCreateBlockNote } from '@blocknote/react';
import { BlockNoteView } from '@blocknote/mantine';
import '@blocknote/mantine/style.css';

export default function MemoPage() {
const editor = useCreateBlockNote();

const [memoTitle, setMemoTitle] = useState('');
const [html, setHtml] = useState('');

function add_memo() {
	axios
		.post(
			'/api/departments/humanresource/memos',
			{
				MemoTitle: memoTitle,
				MemoContent: html,
			},
			{
				headers: {
					'Content-Type': 'application/json',
				},
			}
		)
		.then((response) => {
			if (response.status === 200) {
				window.location.href = '/departments/humanresource/memos?action=success';
			}
		})
		.catch((error) => {
			console.error(error);
		});
}

return (
	<UserData dep={'65b086a4192c48e28b29621d'}>
		<div className="container-fluid">
			<h1>[ ADD MEMO ]</h1>
			<div className="row">
				<div className="col">
					<div className="card">
						<div className="card-body">
							<form id="addmemoform">
								<div className="mb-3 row">
									<label className="col-sm-2 col-form-label">Title</label>
									<div className="col-sm-10">
										<input type="text" className="form-control" id="MemoTitle" onChange={(e) => setMemoTitle(e.target.value)} />
									</div>
								</div>
								<div className="mb-3 row">
									<div className="col">
										<BlockNoteView editor={editor} />
									</div>
								</div>
								<div className="row">
									<div className="col text-end">
										<button type="button" onClick={add_memo} className="btn btn-primary btn-sm">
											[ Add ]
										</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</UserData>
);

}
`

Misc

• Node version: v20.15.1
• Package manager: npm 10.7.0
• Browser: none
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[YousefED]

Please check https://www.blocknotejs.org/docs/advanced/nextjs :)

[Aycom366]

my nextjs crashes anytime I run npm run build.
my nextjs is 14.2.5 and I'm getting similar error.

Generating static pages (1/14) [= ]ReferenceError: document is not defined