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

Question

只有在 sanityClient 中使用 projectId 的环境变量时，即使在 .env 文件中也找不到它

我的目标是将后端数据从 Sanity 连接到我在 reactjs 中的前端。
希望看到 sanity.io(Like this) 中发布的内容，但得到的却是一张空白的白页。

在终端中，一切都是成功的并且是绿色的，但是当检查空白页面时，这个错误会弹出

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)

当我对 projectId 进行硬编码时可以工作，但对于安全性来说不是一个好主意

项目编号：'MyprojectID'

试图通过sanity env documentation了解并解决它，但没有结果。也可能是因为我正在使用 client.js 而他们正在使用 sanity.json 将后端连接到前端。
尝试编写这样的代码${process.env.REACT_APP_SANITY_PROJECT_ID} 像 navabar 和 inages 这样的组件出现了，而不是空白页面，但不是 data/content 来自 sanity

遇到了这个错误

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.

还尝试更改 .env 文件的目录但没有结果

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

和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

我注意到您的 Access to XMLHttpRequest 错误中存在 CORS 错误。

您很可能必须在理智范围内设置一个 API 令牌 API。

登录Sanity.io
转到您的项目
转到 API/Cors 为您的 url 设置访问权限（通常是 http://localhost:3333）

Answer 2

CORS 错误

将 cors 策略添加到您发出请求的端口的健全项目。转到您的项目，单击 API 选项卡并添加正确的域和端口并允许凭据并保存：

projectId 错误

确保环境设置正确。

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

如果 env 打印出来，请确保你通过了正确的。如果这不是问题，我们还在“/studio”中的sanity.json中使用projectId。

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

Answer 3

这可能有不同的原因。

理智 CORS 定义

你必须在令牌定义中选择编辑器
或者您将 .env.example 而不是 .env 文件放入您的 React 应用程序

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

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

javascript

environment-variables

node.js

reactjs

sanity