title: Uncaught Error: Configuration must contain `projectId`( when using environment variable )
body: <ol>
  <li>Only when using an environment variable for projectId inside sanityClient, it can't find it even though is inside the .env file</li>
  </ol>
  <ul>
  <li><p>My goal is to connect backend data from Sanity to my frontend in reactjs.</p>
  </li>
  <li><p>expected to see the content published in sanity.io(<a href="https://youtu.be/3HNyXCPDQ7Q?t=6746" rel="nofollow noreferrer">Like this</a>) but instead got a blank white page.</p>
  </li>
  </ul>
  <p>in terminal everything is successful and green but when inspecting the blank page this error pops out</p>
  <pre><code>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)
  
  </code></pre>
  <ol start="2">
  <li><p>Works when I hardcode the projectId but is not a good idea for security</p>
  <p>projectId: 'MyprojectID'</p>
  </li>
  </ol>
  <ul>
  <li>Tried to understand and resolve it through <a href="https://www.sanity.io/docs/studio-environment-variables" rel="nofollow noreferrer">sanity env documentation</a> 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.</li>
  <li>tried to code like this <code>${process.env.REACT_APP_SANITY_PROJECT_ID}</code> the components like navabar and inages came instead of blank page but not the data/content from sanity</li>
  </ul>
  <p>and got this error</p>
  <pre><code>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.
  </code></pre>
  <ul>
  <li>tried also to change directory of the .env file with no results</li>
  </ul>
  <ol start="3">
  <li>This the code in client.js</li>
  </ol>
  <pre><code>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 =&gt; builder.image(source);
  
  </code></pre>
  <p>and About.jsx</p>
  <pre><code>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 = () =&gt; {
    const [abouts, setAbouts] = useState([]);
  
    useEffect(() =&gt; {
      const query = '*[_type == &quot;abouts&quot;]';
      client.fetch(query).then(data =&gt; setAbouts(data));
    }, []);
    return (
      &lt;&gt;
        &lt;h2 className=&quot;head-text&quot;&gt;
          I know that &lt;span&gt; Good Design &lt;/span&gt; &lt;br /&gt; means{' '}
          &lt;span&gt; Good Business&lt;/span&gt;
        &lt;/h2&gt;
        &lt;div className=&quot;app__profiles&quot;&gt;
          {abouts.map((about, index) =&gt; (
            &lt;motion.div
              key={about.title + index}
              whileInView={{ opacity: 1 }}
              whileHover={{ scale: 1.1 }}
              transition={{ duration: 0.5, type: 'tween' }}
              className=&quot;app__profiles-items&quot;
            &gt;
              &lt;img src={urlFor(about.imgUrl)} alt={about.title} /&gt;
              &lt;h2 className=&quot;bold-text&quot; style={{ marginTop: 20 }}&gt;
                {about.title}
              &lt;/h2&gt;
              &lt;p className=&quot;p-text&quot; style={{ marginTop: 10 }}&gt;
                {about.description}
              &lt;/p&gt;
            &lt;/motion.div&gt;
          ))}
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default About;
  
  </code></pre>