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