Uncaught Error: Configuration must contain `projectId`( when using environment variable )

Question

1. Only when using an environment variable for projectId inside sanityClient, it can't find it even though is inside the .env file

• My goal is to connect backend data from Sanity to my frontend in reactjs.

• expected to see the content published in sanity.io(Like this) but instead got a blank white page.

in terminal everything is successful and green but when inspecting the blank page this error pops out

config.js:42 Uncaught Error: Configuration must contain `projectId`
    at exports.initConfig (config.js:42:1)
    at SanityClient.config (sanityClient.js:85:1)
    at new SanityClient (sanityClient.js:53:1)
    at SanityClient (sanityClient.js:50:1)
    at Module../src/client.js (client.js:4:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/container/About/About.jsx (index.js:1:1)
    at Module.options.factory (react refresh:6:1)

2. Works when I hardcode the projectId but is not a good idea for security

   projectId: 'MyprojectID'

• Tried to understand and resolve it through sanity env documentation with no results. could also be because I'm using the client.js while they are using sanity.json for connecting of the backend to the frontend.
• tried to code like this ${process.env.REACT_APP_SANITY_PROJECT_ID} the components like navabar and inages came instead of blank page but not the data/content from sanity

and got this error

Access to XMLHttpRequest at 'https://undefined.apicdn.sanity.io/v2022-02-01/data/query/production?query=*%5B_type%20%3D%3D%20%22abouts%22%5D' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• tried also to change directory of the .env file with no results

3. This the code in client.js

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

and About.jsx

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

import { images } from '../../constants';
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">
        I know that <span> Good Design </span> <br /> means{' '}
        <span> Good Business</span>
      </h2>
      <div className="app__profiles">
        {abouts.map((about, index) => (
          <motion.div
            key={about.title + index}
            whileInView={{ opacity: 1 }}
            whileHover={{ scale: 1.1 }}
            transition={{ duration: 0.5, type: 'tween' }}
            className="app__profiles-items"
          >
            <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;

Answer 1

• CORS ERROR

add cors policy to sanity project for the port that you are making request from. Go to your project, click on API tab and add correct domain and port and allow credentials and save it:

• projectId Error

Make sure env setting set correctly.

console.log("check token", process.env.REACT_APP_SANITY_PROJECT_ID)

if env prints out, then make sure you passed the correct one. If this is not the issue, we also use projectId in sanity.json inside the "/studio".

"api": {
    "projectId": "ProjectIdHere",
    "dataset": "production"
  },