I'm doing a portfolio website using React with Sanity and counter an error that make the page goes blank. This happen when I tried to fetch data from Sanity. But the console doesn't show that was the cause, instead showing 'Uncaught TypeError: Object(...) is not a function' and 'Uncaught ReferenceError: process is not defined'.
Connect to sanity (.env file used)
import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';
export const client = sanityClient({
projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
dataset: 'production',
apiVersion: '2024-03-01',
useCdn: true,
token: process.env.REACT_APP_SANITY_TOKEN,
});
const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);
Fetching data
import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion/dist/framer-motion';
import './About.scss';
import { urlFor, client } from '../../client';
const About = () => {
const [abouts, setAbouts] = useState([]);
useEffect(() => {
const query = '*[_type == "abouts"]';
client.fetch(query).then((data) => {
setAbouts(data);
});
}, []);
return (
<>
<h2 className='head-text'>
Tanah untuk <span>Dijual</span>
</h2>
<div className='app__profiles'>
{abouts.map((about, index) => (
<motion.div
whileInView={{ opacity: 1 }}
whileHover={{ scale: 1.1 }}
transition={{ duration: 0.5, type: 'tween' }}
className='app__profile-item'
key={about.title + index}
>
<img src={urlFor(about.imgUrl)} alt={about.title} />
<h2 className='bold-text' style={{ marginTop: 20 }}>
{about.title}
</h2>
<h2 className='p-text' style={{ marginTop: 10 }}>
{about.description}
</h2>
</motion.div>
))}
</div>
</>
);
};
export default About;
Does it related with my sanity version?