How to inject environment variables into webpack?

I am sorry to disturb you all. (bows deeply)
Victoria can you point me to some materials on how to inject those wrangler variables into my webpack?
Can’t get my head around this problem.

Environment variables (and secrets environment variables) are now a first-party feature of Workers and Wrangler.

But how can I consume those variables in my react app?

Let’s say I have a config file looking like this:

type = "webpack"
name = "worker-name"
account_id = "some-id"
workers_dev = true

[site]
  bucket = "./public"
  entry-point = "./workers-site"

[env.production]
  name = "website"
  myVar = "test"

and in workers-site/index.js I want to pass it down to my React app.

Question 1: How do I access the myVar in the worker’s index.js file, non of what I already tried seems to work
Question 2: Once I have that variable how do I expose it to React runtime, or React context?

Env vars are exposed to the worker as global variables. if you have the env var SECRET_TOKEN, you access it just the same in your script. If you’re using typescript, you should have a definition file (eg. types.d.ts) with your global env vars in it:

declare global {
    const SECRET_TOKEN: string
}

But if you’re not using typescript, you don’t need to do any preparation and can access it like any other global variable.

Once a text variable is uploaded via wrangler or in the UI, the string is exposed on the global namespace as type String.

If you’re taking about obtaining a variable in the browser, you can either pass it via a prop or via an extra API request to your worker where the API just returns the value of the worker; there’s no built-in functionality for obtaining env vars via Workers Sites.