类型错误：无法读取未定义的属性（读取“节点”）

Question

我有一个使用他们的 SDK 进行 Cloudinary 上传的实用功能。我正在使用 NEXT JS 14 和服务器操作，但遇到错误

TypeError: Cannot read properties of undefined (reading 'node')

当我导入我的实用函数时，我会收到错误，否则不会。这是我的进口

import uploadToCloudinary from "@/service/uploadToCloudinary"; // works if I comment it out
import { constants } from "@/config";
import { supabase } from "@/lib";
import { isCategoryUnique, isLoggedIn } from "@/middlewares";

uploadToCloudinary.js

const cloudinary = require("cloudinary");

// Configure Cloudinary with your account details
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

// eslint-disable-next-line import/no-anonymous-default-export
export default async (file, folder) => {
  try {
    const { secure_url, public_id } = await cloudinary?.v2?.uploader?.upload(
      file,
      {
        folder,
        upload_preset: process.env.CLOUDINARY_PRESET,
      }
    );

    return {
      success: true,
      data: { secure_url, public_id },
    };
  } catch (error) {
    console.error("Error uploading file to Cloudinary:", error);
    return {
      success: false,
      data: "Internal Server Error",
    };
  }
};

Answer 1

发生该错误的原因可能是 cloudinary 库正在尝试访问 Node.js 环境，但带有服务器操作的 Next.js 14 在称为 Edge Runtime 的不同环境中运行。

Edge Runtime 是 Vercel 提供的无服务器环境，用于运行服务器操作。 它被设计为轻量级且高效，但它无法访问某些 Node.js API 和依赖它们的库。

要解决此问题，您需要只需创建具有相同逻辑的端点，或者您使用与 Edge Runtime 兼容的 cloudinary 库版本。

解决方案1（具有相同逻辑的端点）：

import uploadToCloudinary from "@/service/uploadToCloudinary";

export const config = {
  api: {
    bodyParser: {
      sizeLimit: "10mb",
    },
  },
};

export default async function handler(req, res) {
  if (req.method === "POST") {
    try {
      const file = req.body;
      const folder = "your-folder-name"; // Set the desired folder name for uploaded files

      const { success, data } = await uploadToCloudinary(file, folder);

      if (success) {
        res.status(200).json(data);
      } else {
        res.status(500).json({ error: data });
      }
    } catch (error) {
      console.error("Error uploading file:", error);
      res.status(500).json({ error: "Internal Server Error" });
    }
  } else {
    res.status(405).json({ error: "Method Not Allowed" });
  }
}

解决方案2（与Edge Runtime兼容的Cloudinary库）：

import { Cloudinary } from "@cloudinary/url-gen";
import { upload } from "@cloudinary/react";

// Configure Cloudinary with your account details
const cloudinary = new Cloudinary({
  cloud: {
    cloudName: process.env.CLOUDINARY_CLOUD_NAME,
  },
  url: {
    secure: true,
  },
});

// eslint-disable-next-line import/no-anonymous-default-export
export default async (file, folder) => {
  try {
    const uploadResult = await upload(file, {
      folder,
      upload_preset: process.env.CLOUDINARY_PRESET,
      cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    });

    return {
      success: true,
      data: {
        secure_url: uploadResult.secure_url,
        public_id: uploadResult.public_id,
      },
    };
  } catch (error) {
    console.error("Error uploading file to Cloudinary:", error);
    return {
      success: false,
      data: "Internal Server Error",
    };
  }
};

** 该代码实现了预期的结果，但在最佳实践和代码清晰度方面可能还有改进的空间。由于我是用 AI 生成的，所以我仍在努力优化它*