The problem:
I’m using NextJS and Sanity headless CMS.
I want to protect variables such as the project ID.
In my .env file I have the following
<code>SANITY_STUDIO_DATASET=production
SANITY_STUDIO_PROJECT_ID=*********
</code>
<code>SANITY_STUDIO_DATASET=production
SANITY_STUDIO_PROJECT_ID=*********
</code>
SANITY_STUDIO_DATASET=production
SANITY_STUDIO_PROJECT_ID=*********
When opening the Studio though I get the following message:
<code>Error: Configuration must contain `projectId`
> 85 | export const sanityClient = createClient(sanityConfig);
| ^
</code>
<code>Error: Configuration must contain `projectId`
> 85 | export const sanityClient = createClient(sanityConfig);
| ^
</code>
Error: Configuration must contain `projectId`
> 85 | export const sanityClient = createClient(sanityConfig);
| ^
Note: this works as it should if I use something like NEXT_PUBLIC_PROJECT_ID (which we don’t want to do as it exposes it)
My Sanity config:
<code>export const sanityConfig = {
dataset: process.env.SANITY_STUDIO_DATASET || 'production',
projectId: process.env.SANITY_STUDIO_PROJECT_ID as string,
apiVersion: '2022-03-07',
useCdn: true,
};
</code>
<code>export const sanityConfig = {
dataset: process.env.SANITY_STUDIO_DATASET || 'production',
projectId: process.env.SANITY_STUDIO_PROJECT_ID as string,
apiVersion: '2022-03-07',
useCdn: true,
};
</code>
export const sanityConfig = {
dataset: process.env.SANITY_STUDIO_DATASET || 'production',
projectId: process.env.SANITY_STUDIO_PROJECT_ID as string,
apiVersion: '2022-03-07',
useCdn: true,
};
Any ideas what’s going on or something to try?
This is how I like to run Sanity Studio.
Alongside .env file I have env.js file that looks like this:
<code>export const studioApiVersion = process.env.SANITY_STUDIO_API_VERSION
export const studioProjectID = process.env.SANITY_STUDIO_PROJECT_ID
export const studioDataset = process.env.SANITY_STUDIO_DATASET
...
</code>
<code>export const studioApiVersion = process.env.SANITY_STUDIO_API_VERSION
export const studioProjectID = process.env.SANITY_STUDIO_PROJECT_ID
export const studioDataset = process.env.SANITY_STUDIO_DATASET
...
</code>
export const studioApiVersion = process.env.SANITY_STUDIO_API_VERSION
export const studioProjectID = process.env.SANITY_STUDIO_PROJECT_ID
export const studioDataset = process.env.SANITY_STUDIO_DATASET
...
When I want to use an env variable I import it:
<code>import { studioProjectID, studioDataset } from './env'
</code>
<code>import { studioProjectID, studioDataset } from './env'
</code>
import { studioProjectID, studioDataset } from './env'
It works locally, deployed on the Sanity Studio domain, and on Cloudflare Pages, which I like to use.
1