Nextjs ReferenceError: self is not defined

[opeodedeyi]

Everything works well till i deploy the app and the code is building on Vercel or Netlify and then i get the ReferenceError: self is not defined

below is my import code and what is compressed

'use client';

import "./forminput.css";
import { useState, useRef } from 'react';
import { readAndCompressImage } from 'browser-image-resizer';


const SingleImageUploadInput = ({ children }) => {
    const readImage = async (file) => {
        const config = {
            quality: 0.7,
            maxWidth: 1920,
            maxHeight: 1080,
            mimeType: 'image/webp',
            debug: true,
        };
        
        try {
            const resizedImageFile = await readAndCompressImage(file, config);
            const reader = new FileReader();
            
            return new Promise((resolve, reject) => {
                reader.onloadend = () => {
                    resolve(reader.result);
                };
                reader.onerror = reject;
                reader.readAsDataURL(resizedImageFile);
                let resizedImgSize = resizedImageFile.size;
                setImageSize(convertFileSize(resizedImgSize));
            });
        } catch (error) {
            console.log('Failed to resize the image:', error);
        }
    };