Error When Viewing Deployed Studio Project

[MarioGiancini]

Expected Behavior:

When I deploy the sanity project to the hosted Studio version, I should be able to access and use it at the set subdomain, i.e. your-project.sanity.studio.

Actual Behavior:

The Studio crashes with error:

Uncaught error: process is not defined 
ReferenceError: process is not defined

Error references file /static/sanity.3279a857.js:4558:3169

The studio does not crash locally or from blog domain /studio.

Steps To Reproduce:

1. Follow the steps to Configure locally and deploy from the README
2. Ensure the values for the .env are referencing your Sanity project
3. Deploy your project to Sanity via npx @sanity/cli@dev-preview deploy
   • This command must be used instead of sanity deploy with the current v3
   • Reference: https://github.com/sanity-io/sanity/discussions/3350#discussioncomment-2964672
4. Log in to your Sanity.io account, select the deployed project and set a subdomain if one isn't already set
5. Visit the configured subdomain for the studio
6. Observe error: Uncaught error: process is not defined

Context

This template seems to be only configured for the self-hosted Studio at http://localhost:3000/studio or your domain /studio path.

The sanity.config.ts file uses the node process object to access the env file. Since the Studio is a static client-side application, process is not available there and is therefore undefined.

Sanity's v2 - v3 migration guide gives a work around for this by setting the appropriate values in your env file that will be bundled and exposed within import.meta.env. Theses variables must start with SANITY_STUDIO_ in the name.

Possible Solution:

We can accommodate both by conditionally using process.env.NEXT_PUBLIC_SANITY_PROJECT_ID or import.meta.env.SANITY_STUDIO_PROJECT_ID depending on if process.env is defined.

This is a little tricky since we'll have to first check if window is not 'undefined' (referencing something like this), so on the client-side version we can set a process attribute that would allow us to check for it in the config file without causing errors.

Within TypeScript will have to reference some interfaces for import.meta as well, within a env.d.ts file.

I've got this working on my personal site.

[MarioGiancini]

Further Context

So I originally encountered this issue from a version of the this template when it was in this state back in October: https://github.com/sanity-io/nextjs-blog-cms-sanity-v3/blob/dc7f9ce66e729712a58cbedb7f3fcc1a7be17d49/sanity.config.ts

Now it looks like the projectId, dataset, title for defineConfig() all are imported from a new file:

import { apiVersion, dataset, previewSecretId, projectId } from 'lib/sanity.api'

Now, when trying to reproduce, I get my error at step 3 when trying to deploy (can't deploy to sanity):

Error: [vite]: Rollup failed to resolve import "lib/sanity.api" from "sanity.config.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (file://~/Sites/nextjs-blog-cms-sanity-v3-test/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:45832:19)
    at onwarn (file://~/Sites/nextjs-blog-cms-sanity-v3-test/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:45603:13)
    at Object.onwarn (file://~/Sites/nextjs-blog-cms-sanity-v3-test/node_modules/rollup/dist/es/shared/rollup.js:23263:13)
    at ModuleLoader.handleResolveId (file://~/Sites/nextjs-blog-cms-sanity-v3-test/node_modules/rollup/dist/es/shared/rollup.js:22158:26)
    at file://~/Sites/nextjs-blog-cms-sanity-v3-test/node_modules/rollup/dist/es/shared/rollup.js:22119:26

[magicspon]

I'm seeing this aswell. Sanity runs when using import.meta.env... but then nextjs fails as it's expecting process.env

[MarioGiancini]

@magicspon my solution from this discussion may help: https://github.com/sanity-io/sanity/discussions/3926#discussioncomment-4404795

However, note that I added this in to the template before the addition of lib/sanity.api, which makes it more complicated with the [vite]: Rollup import error mentioned above.

[ellismarte]

whats the fix for this?

[Nichtkunst]

yes please

[Imsharad]

any fix here?