CldUploadWidget Infinite Loading Spinner in NextJS

Question

I am trying to use CldUploadWidget of the next-cloudinary package in nextjs13 using the app router. I've created a ImageUpload component that displays the selected or retrieved image from cloudinary and an upload button using CldUploadWidget. But when I try to open the upload widget, it just display an infinite loading spinner.

Below is my ImageUpload component code:

"use client"

import { useEffect, useState } from "react";
import { Button } from "../ui/button";
import { ImagePlus, Trash } from "lucide-react";
import Image from "next/image";
import { CldUploadWidget } from "next-cloudinary";

const ImageUpload = ({
    disabled,
    onChange,
    onRemove,
    value
}) => {
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
        setIsMounted(true);
    }, []);

    // const handleUpload = (result) => {
    //     onChange(result.info.secure_url);
    // }

    const handleUpload = (result) => {
        if (result.info.secure_url) {
            // Successful upload
            console.log("Upload successful. Secure URL:", result.info.secure_url);
        } else {
            // Handle the error
            console.error("Upload failed. Error message:", result.info.error.message);
        }
    };

    // If it is not mounted in server side return null
    if (!isMounted) {
        return null;
    }

    return (
        <div className="flex flex-col items-center justify-center gap-4">
            <div key={value} className="relative border-4 w-[300px] h-[300px] rounded-md overflow-hidden">
                {value && (
                    <div className="absolute z-10 top-2 right-2">
                        <Button type="button" onClick={() => onRemove(value)} variant="destructive" size="icon">
                            <Trash className="w-4 h-4" />
                        </Button>
                    </div>
                )}
                <Image
                    fill
                    className="object-cover"
                    alt="Image"
                    src={value ? value : '/images/avatar/avatar.jpg'}
                />
            </div>
            <CldUploadWidget
                options={{ maxFiles: 1, singleUploadAutoClose: true, sources: ["local"] }}
                onUpload={handleUpload}
                uploadPreset={process.env.CLOUDINARY_CLOUD_PRESET}
            >
                {({ open }) => {
                    const onClick = (e) => {
                        e.preventDefault();
                        open();
                    }

                    return (
                        <Button type="button" disabled={disabled} variant="secondary" onClick={onClick}>
                            <ImagePlus
                                className="w-4 h-4 mr-2"
                            />
                            Upload an image
                        </Button>
                    )
                }}
            </CldUploadWidget>
        </div>
    )
}

export default ImageUpload;

Here is my next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: [
            'res.cloudinary.com',
            'avatars.githubusercontent.com',
            'lh3.googleusercontent.com'
        ]
    }
}

module.exports = nextConfig

I've tried placing the preset key directly in the Upload Widget and still not working

Answer 1

I was actually just dealing with this myself. Like a buffoon, I had not yet placed the NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<YOUR_CLOUD_NAME>" in my .env file. Might this also fix your issue?