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"
  },

Answer 2

I noticed a CORS error in your Access to XMLHttpRequest error.

You most likely have to setup an API token within your sanity API.

1. Login to Sanity.io
2. Go to your project
3. Go to API/Cors Orgin and setup access for your url (often http://localhost:3333)

Answer 3

There may be different reasons for this.

Sanity CORS definition

• you have to choose editor in token definition
• or you put .env.example instead of .env file in your React application

Answer 4

I had the same issue, maybe your .env is not in your root folder like it wasn't in mine, it was sitting inside of src folder, as soon I have moved to root folder it worked. Hopefully this helps