why does adding sanity to my react frontend blank the whole localhost:3000 out?

Question

I have my code set up like this with two folders one backend_sanity and the other frontend_react and i can not get the sanity to link to my react front end without blanking the entire webpage on localhost:3000. I have tried re coding everything three times now and it still doesnt work? I have followed the tutorial to a T and it just wont work.

import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

import { urlFor, client } from '../../client';

import { images } from '../../constants'

import './About.scss';



const About = () => {
    const [abouts, setAbouts] = useState([]);

    useEffect(() => {
        const query = '*[_type == "abouts"]';

        client.fetch(query)
            .then((data) => setAbouts(data));
    }, []);
    
    return (
        <> 
            <h2 className="head-text">I Know That <span>Good Development</span> <br /> Means <span>Good Business</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>
                        <p className="p-text" style={{ marginTop: 10 }}>{ about.description }</p>
                    </motion.div>
                ))}
            </div>
        </>
    );
};

export default About;```



```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: '2022-02-01',
    useCdn: true,
    token: process.env.REACT_APP_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);```

Answer 1

i found a fix, instead of using projectId: process.env.REACT_APP_SANITY_PROJECT_ID, use the actual project id in place of that and it will render

Answer 2

I manually fixed this issue by changing about.jsx [About Component] and about.js [Inside Schema]

About.jsx : Component

.app__about {
    flex: 1;
    width: 100%;
    flex-direction: column;
  }
  
  .app__profiles {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 2rem;
  }
  
  .app__profile-item {
    width: 190px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin: 2rem;
  
    img {
      width: 100%;
      height: 170px;
      border-radius: 15px;
      object-fit: cover;
    }
  
    @media screen and (min-width: 2000px) {
      width: 370px;
      margin: 2rem 4rem;
  
      img {
        height: 320px;
      }
    }
  }

About.js : Schema

export default{
    name: 'abouts',
    title: 'Abouts',
    type: 'document',
    fields:[
        {
            name: 'title',
            title: 'Title',
            type: 'string'
        },
        {
            name: 'description',
            title: 'Description',
            type: 'string'
        },
        {
            name: 'imgUrl',
            title: 'ImgUrl',
            type: 'image',
            options: {
                hotspot: true,
            },
        },
        {
            name: 'imgurl',
            title: 'Write image name',
            type: 'string'
        }
    ]
}

Actually, it's a temporary fix, let's wait for sanity to fix urlFor function.

Like this and give name to the acc. to images.js