# Setting up @croct/plug-react in a Vite project, env vars not picked up

Asked by ravi_s on 2025-05-28. Tags: react, vite, setup.

hi all, scaffolded a fresh vite + react spa and wrapped teh app like this:

```tsx
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

### Accepted answer from hannah.dev (2025-05-28)

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`:

```
# .env
VITE_CROCT_APP_ID=00000000-0000-0000-0000-000000000000
```

```tsx
<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".

#### Reply from ravi_s (2025-05-29)

that was it, the VITE_ prefix. integration page went green this morning,
thanks so much!