Setting up @croct/plug-react in a Vite project, env vars not picked up
hi all, scaffolded a fresh vite + react spa and wrapped teh app like this:
import {CroctProvider} from '@croct/plug-react';
<CroctProvider appId={process.env.CROCT_APP_ID}> <App /></CroctProvider>but the provider complains the app id is missing. the variable is definitely in my .env file. is there something special the croct provider needs in vite? thanks a lot for any help
1 answer
Nothing Croct-specific going on, this is Vite's env handling. Vite does not expose process.env to browser code at all. Env vars must be prefixed with VITE_ and read through import.meta.env:
# .envVITE_CROCT_APP_ID=00000000-0000-0000-0000-000000000000<CroctProvider appId={import.meta.env.VITE_CROCT_APP_ID}> <App /></CroctProvider>The provider itself is simple: appId is a plain string prop, so any env mechanism works as long as the value actually reaches it. Your current code passes undefined, hence the complaint.
Two extras worth knowing: npx croct@latest init can scaffold the whole setup for you, and once it is wired up you can confirm everything works from the dashboard Integration page, which turns green with "Received traffic in the past 24 hours".
that was it, the VITE_ prefix. integration page went green this morning, thanks so much!