cloudinary admin API v1.27 error cloudinary.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'split') at Object.<anonymous> (cloudinary.js:1:1)
Hi everyone,
I am using the Cloudinary Admin API (v1.27) for my React app created using expo (managed workflow)
I am not sure why my browser shows this error.
I am using the es6 style imports
import { v2 as cloudinary } from "cloudinary";import { useEffect, useState } from "react";
// Create and configure your Cloudinary instance.
export const useCloudinary = () => {const[isCancelled,setIsCancelled]=useState(false);// dotenv.config({ path: "src/.env" });const[images,setImages]=useState([]);
cloudinary.config({cloud_name:process.env.CLOUD_NAME,api_key:process.env.CLOUD_API_KEY,api_secret:process.env.CLOUD_API_SECRET,secure:true});
Not sure what I need to do here. Can someone help, please?
cloudinary.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
at Object.<anonymous> (Cloudinary.js:1:1)
at ./node_modules/cloudinary/cloudinary.js (cloudinary.js:8:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at Module.<anonymous> (firebase.collections.ts:8:1)
at ./src/hooks/useCloudinary.ts (useCloudinary.ts:39:1)
at __webpack_require__ (bootstrap:789:1)
at fn (bootstrap:100:1)
at ./src/screens/ImageGalleryFeed.tsx (HomeScr
-
My package.json
{"name":"","version":"1.0.0","main":"node_modules/expo/AppEntry.js","homepage":"","scripts":{"start":"expo start","android":"expo start --android","ios":"expo start --ios","web":"expo start --web","eject":"expo eject","deploy":"gh-pages -d web-build","predeploy":"expo build:web"},"dependencies":{"@eva-design/eva":"^2.1.1","@expo-google-fonts/allan":"^0.2.2","@expo-google-fonts/bangers":"^0.2.2","@expo-google-fonts/inter":"^0.2.2","@expo/webpack-config":"~0.16.21","@react-native-community/slider":"4.2.1","@react-navigation/drawer":"^6.4.3","@react-navigation/material-top-tabs":"^6.2.2","@react-navigation/native":"^6.0.11","@react-navigation/stack":"^6.2.2","@ui-kitten/components":"^5.1.2","@ui-kitten/eva-icons":"^5.1.2","babel-plugin-inline-dotenv":"^1.7.0","bad-words":"^3.0.4","cloudinary":"^1.27.1","expo":"~45.0.0","expo-app-loading":"~2.0.0","expo-av":"~11.2.3","expo-blur":"~11.1.0","expo-font":"~10.1.0","expo-linear-gradient":"~11.3.0","expo-status-bar":"~1.3.0","firebase":"^8.5.0","react":"17.0.2","react-dom":"17.0.2","react-lottie":"^1.2.3","react-native":"0.68.2","react-native-safe-area-context":"4.2.4","react-native-screens":"~3.11.1","react-native-svg":"12.3.0","react-native-web":"0.17.7","react-toast-notifications":"^2.5.1"},"devDependencies":{"@babel/core":"^7.12.9","@types/bad-words":"^3.0.1","@types/react":"~17.0.21","@types/react-lottie":"^1.2.6","@types/react-native":"~0.66.13","gh-pages":"^4.0.0","typescript":"~4.3.5"},"private":true} -
Hey Loic,
Here's the code
import { Button, Layout } from "@ui-kitten/components";import React, { useEffect, useRef, useState } from "react";import { FlatList, StyleSheet, View } from "react-native";import { myTheme } from "../../custom-theme";import { ModalCard } from "../components/ModalCard";import { IPicSum } from "../firebase/dataInterfaces";import { useCloudinary } from "../hooks/useCloudinary";import { useFetch } from "../hooks/useFetch";import MessageCard from "./MessageCard";
const URL = "https://picsum.photos/v2/list?page=1&limit=100";
export default function ImageGalleryFeed() {constoffset=12;const{data,isPending}:{data?:IPicSum[];isPending:boolean}=useFetch(URL,"GET");const{images:newData}=useCloudinary();
const[images,setImages]=useState<IPicSum[]>([]);constflRef=useRef<FlatList<IPicSum>>(null);const[visible,setVisible]=useState(false);const[imageUrl,setImageUrl]=useState("");const[begin,setBegin]=useState(0);const[end,setEnd]=useState(begin+offset);
useEffect(()=>{if(data&&!isPending){setImages(data);}},[data]);
// React.useEffect(() => {// console.log("Test ", newData);// }, [newData]);
consthandleDismiss=(val:boolean)=>{setVisible(val);};
consthandlePress=(url:string)=>{setImageUrl(url);setVisible(true);};
consthandlePrevious=()=>{if(begin>0){flRef.current?.scrollToIndex({animated:true,index:0});setBegin((prev)=>prev-offset);setEnd((prev)=>prev-offset);}};
consthandleNext=()=>{//@ts-ignoreif(end<data?.length){flRef.current?.scrollToIndex({animated:true,index:0});setBegin((prev)=>prev+offset);setEnd((prev)=>prev+offset);}};
return(<Layoutlevel={"1"}style={styles.layout}><FlatListshowsVerticalScrollIndicator={false}numColumns={3}ref={flRef}data={images.slice(begin,end)}keyExtractor={(item)=>item.id}renderItem={({item,index})=>(<MessageCarddata={item}onPress={()=>handlePress(item.download_url)}type="image"/>)}/>{visible&&(<ModalCardvisible={visible}onDismiss={handleDismiss}value={imageUrl}type={"image"}/>)}<Viewstyle={styles.navBtns}>{begin>0&&(<Buttonstyle={{marginHorizontal:10}}onPress={handlePrevious}>{"Prev"}</Button>)}{end<images.length&&<ButtononPress={handleNext}>{"Next"}</Button>}</View></Layout>);}
const styles = StyleSheet.create({layout:{alignItems:"center",justifyContent:"center",flex:1},container:{paddingTop:20},imgFooter:{textAlign:"center",backgroundColor:myTheme["color-primary-200"],fontFamily:"Allan_400Regular",fontSize:24},image:{width:200,height:200},imgCard:{margin:5,flex:1,backgroundColor:myTheme["color-primary-400"]},navBtns:{flexDirection:"row",marginVertical:20}}); -
Hello Saurabh,
Taking a look at this request, I see that you're trying to utilize the Cloudinary Admin API? ( https://cloudinary.com/documentation/admin_api )
The Admin API needs to be run from a backend SDK and doesn't have any exposed methods from the React SDK. What is it you are trying to achieve here? We will be able to offer insight into how to achieve this via the React SDK if we understand your exact use-case.
Post is closed for comments.
Comments
4 comments