Access env.development variable in webpack

Hello!

I thought I had it working, but in the end, it was because I had included the .env.development file in my repo :derp

What I can’t get my head around is how do I access the wranglers .env.development variable in my React component through proces.env (if there is another way, I am cool with that). What do I need is to expose it (is it even possible?). Server related issues are not yet a subject I feel comfortable with.

Here my example wrangler.toml:

type = "webpack"
name = ""
account_id = "id"
workers_dev = true

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

[env.production]
  name = "website"
  site_password = "some-password"

what do I need to do from here: When the site gets deployed to a worker
in my React component I need to do smth like this:

const { site_password } = process.env

const PasswordModal = ({ onChange }) => {
  const [input, setInput] = useState('')

  const updateInput = ({ target: { value } }) => {
    setInput(value)
  }

  useLayoutEffect(() => {
    const storedState = JSON.parse(localStorage.getItem('password-correct'))
    const isInputValidPassword = input === SITE_PASSWORD

    onChange(storedState || isInputValidPassword)
  }, [input])

  return (
    <div>
      <Default />
      <ModalContainer>
        <PasswordModalContent>
          <Input type="text" onChange={updateInput} value={input} />
        </PasswordModalContent>
      </ModalContainer>
    </div>
  )
}

Do you think there is a way to accomplish that?