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);```

@MrunmaiDahare Easy fix actual in your .env file take off the “;” at the end of your projectID and token. — Jlooker97, Mar 10 '22 at 09:24
And if your images aren’t showing properly after that let me know it’s also a simple fix in your console — Jlooker97, Mar 10 '22 at 09:25
Also! @ export const client = sanityClient. Change client to sanityClient and then change the SanityClient to just client — Jlooker97, Mar 10 '22 at 09:28
Actually I am facing this "Uncaught Error: Configuration must contain `projectId`" followed by other config errors, in my console, I was not having ";" in my .env file already. — Mrunmai Dahare, Mar 10 '22 at 09:51

score 1 · Answer 1 · answered Nov 13 '22 at 17:05

1

I'm pretty sure that while doing this setup, you created .env file under src folder and not under frontend_react. Move it to frontend_react folder and that should fix your problem.

answered Nov 13 '22 at 17:05

Shashwat Shukla

21
1

score 0 · Answer 2 · answered Mar 27 '22 at 19:03

0

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

answered Mar 27 '22 at 19:03

ashimi doyin

1

You shouldn't hardcode configuration values. Instead set the environment variable `REACT_APP_SANITY_PROJECT_ID`. – D-S Mar 28 '22 at 03:40

score 0 · Answer 3 · edited May 03 '22 at 17:40

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

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

3 Answers3