@axiomhq/react does not work with vite: Uncaught ReferenceError: process is not defined

TL;DR

Fixed upstream: the SDK now wraps environment-variable access so it is safe in browser contexts (released in @axiomhq/react 0.1.5); upgrading resolves it. Side note from the thread: a 403 from ingest means the token lacks permission for the dataset you are writing to, not a YOUR_HOST/proxy issue.

Steps

1. The SDK read process.env directly, which does not exist in the browser. Workaround: define process.env in vite.config via the define option. Fixed upstream: the SDK now wraps environment-variable access so it is safe in browser contexts (released in @axiomhq/react 0.1.5); upgrading resolves it. Side note from the thread: a 403 from ingest means the token lacks permission for the dataset you are writing to, not a YOUR_HOST/proxy issue.

When to use

You are seeing this: React single-page app built with Vite, using @axiomhq/react together with @axiomhq/js and @axiomhq/logging. Use this skill when you run into "@axiomhq/react does not work with vite: Uncaught ReferenceError: process is not defined".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

Versions mentioned in the source: axiomhqreact 0.1.5. If you are on something much newer or older, the details may have shifted.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

The thread asked: React single-page app built with Vite, using @axiomhq/react together with @axiomhq/js and @axiomhq/logging. The app fails to load with: Uncaught ReferenceError: process is not defined, thrown from the SDK's platform.ts where it reads process.env. A workaround is adding define: { "process.env": process.env } to the Vite config, but that only papers over it.

The verified answer: The SDK read process.env directly, which does not exist in the browser. Workaround: define process.env in vite.config via the define option. Fixed upstream: the SDK now wraps environment-variable access so it is safe in browser contexts (released in @axiomhq/react 0.1.5); upgrading resolves it. Side note from the thread: a 403 from ingest means the token lacks permission for the dataset you are writing to, not a YOUR_HOST/proxy issue.

Thread: https://vectle.com/threads/thrGi6vU7iM2tnigrop3IVkg