How can I use .env in latest ReactRouter framework

[beingsaumyadeep]

I was playing around with latest RR7 framework, but had issue finding how to use .env vars limited to server side only (protected) from client side. I was using import.meta.env.VITE_xxx_xxx it worked but only problem was it was also been rendered in client side too

[sergiodxa]

The .env is automatically picked up at dev time so you can use process.env in server-side code, these variables are defined at runtime.

Client-side code can access import.meta.env.VITE_XXX variables too which are replaced with the env variable at build time.

Note that .env is only used on development, after build when starting the production server is up to you how to set runtime env variables for the server-side code, you can use --env-file flag, define them in your deployment platform, use dotenv package, etc.

[beingsaumyadeep]

I tried that too but when I doing process.env.XX_XX then am getting undefined in console:

Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

I even also installed @types/node to ignore the warning, but doesnt work. Btw, am using Cloudflare's worker template along ReactRouter v7. I couldn't find any relavent documentation for env for that specific.

Also tried installing dotenv package as well, no luck ;(

[sergiodxa]

That changes things, process.env is not a thing in Cloudflare

You need to import env from cloudflare:workers in that case.

[beingsaumyadeep]

This is on my local

[beingsaumyadeep]

Thanks @sergiodxa 🙏, was able to resolve by importing env import { env } from "cloudflare:workers";