I don't know if this is too specific to be asked in a Stack Overflow, but I've gone through a few year old tutorial on how to build a Codepen-like app with React (NextJS) and MongoDB.

At first I tried to just hand-pick features I actually need for what I am about to do with this app, but then I got stuck in an error message that follows:

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'updatedRecord')

Which refers to my save function (index.js):

const save = async () => {
        setSaving(true);
        const requestOptions = {
            method: !id ? "PUT" : "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                html: htmlValue,
                css: cssValue,
                js: jsValue,
                id: id,
            }),
        };
        const response = await fetch(`../api/pens/${id}`, requestOptions);
        const {
            data: { updatedRecord, newRecordId },
        } = await response.json();

        setSaving(false);
        if (!updatedRecord) {
            await router.push(`?id=${newRecordId}`);
        }
    };

This error gets triggered every time I try to save a new pen (by pressing the save button, which calls the save function presented above), and from what I've been able to gather up is that there is probably something that's no longer supported by the newer versions of React/NextJs/MongoDB/NodeJs - just can't figure out what it is.

Here is the version of his (who wrote the tutorial) code in it's entirety. I've pretty much tried everything from cloning the entire project to my own and yet can't get it to work, so I'm in a bit of a pinch here.