"ReferenceError: process is not defined" After Deploying Checkout UI Extension

Extensions
1

Hi there!

In my Checkout.tsx, I have the following line:

const fetchUrl: string = ${process.env.APP_URL}/api/my_endpoint;

This works fine when previewing on my local/dev store by running
shopify app dev, but I get the following error on the deployed version:

ReferenceError: process is not defined

I’ve been trying to find a solution but haven’t had any luck. Could someone kindly offer some advice? Thank you in advance!

1 Like
2

Have you found a solution yet?

3

I’m now getting this error even in the dev environment, after upgrading to the dev dashboard, when trying to use localhost.

4

Same issue here. I tried checking typeof on process - it’s not treating it like a regular variable - it’s just hard crashing if process is in there at all.

5

I think something changed with how the replacement works. It used to work to do things like typeof process, but now it doesn’t.

You have to type the string exactly like process.env.APP_URL and that will get converted to your localhost URL when you build the extensions. I think you just have to use a try catch for production.

6

Nice! That worked for me! Not sure why I didn’t consider that. It’s such a strange pattern they’ve implemented - hard to reason about.

1 Like
7

Hi!

My apologies for the delayed response.

During shopify app dev, Node.js is running, so process.env is available, and the CLI automatically injects the local app URL.

However, after deployment, the Checkout UI Extension no longer runs in a Node.js environment, so process.env does not exist.

For now, I’m manually switching the app URL like this :frowning:

//const APP_URL = "https://my-app-name.fly.dev";  // Production
const APP_URL: string = `${process.env.APP_URL}`; // Development

const fetchUrl: string = `${APP_URL}/api/payment-terms`;

This is not an ideal solution. If anyone knows a better way to automatically switch the app URL based on the environment, I’d really appreciate it if you could share it :slightly_smiling_face:

Thanks!

8

Wrap it in a try catch so it uses the app URL variable if it’s set, otherwise use the hardcoded URL.

1 Like
9

Thank you DavidT. That worked for me, too:-)

10

I experienced this problem.

Try / catch with a fallback work, but I want to comment on process.env not existing.

According to this thread shopify app deploy uses shopify.app.YOURNAME.toml and .env.YOURNAME where YOURNAME is some config name. I did not have such a file. When I created an env file that matched my toml file name file I saw:

Using shopify.app.YOURNAME.toml for default values:

Change to:

Using .env.YOURNAME for default values:

In the deploy process.

Just putting it out therre.

EDIT: Source code confirms it: Vars like process.env.X will be substituted by esbuild define, but matching config needs to be found.

11

@S_W to avoid the manual switching, the cleanest pattern we’ve used is defining the URL once in your .env and .env.production files and letting esbuild handle the substitution at build time:

// .env (dev)
APP_URL=http://localhost:3000

// .env.production
APP_URL=https://my-app-name.fly.dev

Then in your extension:

const fetchUrl = `${process.env.APP_URL}/api/my_endpoint`;

As dac514 pointed out, the key is making sure your .env filename matches your toml config name. Once that’s in place process.env.APP_URL gets replaced at deploy time and you never need to touch the code between environments.

1 Like