"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:-)