Getting error: "Module not found: ESM packages (node-fetch) need to be imported. Use 'import' to reference the package instead."

Question

I'm getting an error while building my Next.js project: 'Module not found: ESM packages (node-fetch) need to be imported.' It seems that node-fetch is imported incorrectly in the file getExternalFile.js. The error spreads across files in the payload and @payloadcms/next-payload modules, ending up in me.ts.

How can I resolve this error and properly import node-fetch as an ES module?

Here is my code for "./nodemodules/payload/dist/uploads/getExternalFile.js:61:108":

const getExternalFile = async ({ data, req })=>{
    const { filename, url } = data;
    if (typeof url === 'string') {
        let fileURL = url;
        if (!url.startsWith('http')) {
            const baseUrl = req.get('origin') || ${req.protocol}://${req.get('host')};
            fileURL = ${baseUrl}${url};
        }
        const { default: fetch } = await Promise.resolve().then(()=>/*#_PURE*/ _interop_require_wildcard(require("node-fetch")));
        const res = await fetch(fileURL, {
            credentials: 'include',
            headers: {
                ...req.headers
            },
            method: 'GET'
        });
        if (!res.ok) throw new _errors.APIError(Failed to fetch file from ${fileURL}, res.status);
        const data = await res.buffer();
        return {
            name: filename,
            data,
            mimetype: res.headers.get('content-type')  undefined,
            size: Number(res.headers.get('content-length'))  0
        };
    }
    throw new _errors.APIError('Invalid file url', 400);
};

enter image description here

How can I fix this error? My project was working fine with the above setting and I have not updated anything.