我尝试使用应用路由器在nextjs 13中使用next-cloudinary包的CldUploadWidget。这个想法是上传一个图像并检索public_id和url，但在设置后，当我点击打开覆盖的按钮时，它打开了，但我只看到一个无限旋转的加载微调器。我在浏览器（Chrome latest）上看到的唯一错误/问题是下面的图像：
error on chrome
我也在Safari上进行了测试，得到了相同的输出。
下面是我的代码：

"use client";
import Image from "next/image";
import React, { ChangeEvent, useState } from "react";
import styles from "./ImageUpload.module.css";
import { CldUploadWidget } from "next-cloudinary";
import { UploadApiResponse } from "cloudinary";

const ImageUpload = () => {
  const [selectedImage, setSelectedImage] = useState<File | null>(null);
  const sigApiRoute = `${process.env.NEXT_PUBLIC_API_BASE_URL}/uploads/signature`;

  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files && event.target.files[0];
    if (file) {
      // console.log("File: ", file);
      setSelectedImage(file);
    }
  };

  const onUpload = (response: UploadApiResponse) => {
    console.log(response);
  };

  //   signatureEndpoint={sigApiRoute}
  return (
    <CldUploadWidget uploadPreset="<Upload Preset>">
      {({ open }) => {
        function handleOnClick(
          e: React.MouseEvent<HTMLButtonElement, MouseEvent>
        ) {
          e.preventDefault();
          open();
        }
        return (
          <button className="button" onClick={handleOnClick}>
            Upload an Image
          </button>
        );
      }}
    </CldUploadWidget>
  );
};

export default ImageUpload;

这是输出：enter image description here