'Remix.run deployment on Vercel: process not defined error

I have deployed a remix application on Vercel. Further, I have defined some environment variables in Vercel and want to perform some checks and use env variables in my app:

  if (process.env.NODE_ENV === 'production') {
    setPaths({
      path: process.env.prod_path,
    })
  }

It gives me error, process is not defined. I even tried adding process && in the if statement, it did not help.

Second, I am unable to even set the env variables locally. I followed remix docs but it gives me undefined every time when I console.log as mentioned in the docs.

Any guide/pointer towards using environmental variables in remix would be really helpful.

Solution 1:^[1]

I was able to solve this problem. I was using loader/useLoaderData to access server side environment variables. The problem was that I was trying to call these at component level. Apparently, we can only call them at the route level.

Solution 2:^[2]

I'm not sure, but the name of the function (setXXX makes me think this is the setter of a hook), makes me think you are trying to use process.env in the browser, but process.env is only available in server-side code, if you want to use env variables in your react app you can use this guide to send the variables from the server side to you react app. If this code is server side code, maybe it's worth making a reproduction in stackblitz so we can have a better look at it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Saqib
Solution 2	Kenneth Van den Berghe

'Remix.run deployment on Vercel: process not defined error

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]