No bare import.meta.env expression workaround on the client-side

[brillout]

Follow up of:

• Environment variables TypeScript support #1726 (comment)

@MrNaif2018 Why aren't you following the recommendation of using import.meta.env.SOME_ENV instead of non-statically-analyzable syntax like const { env } = import.meta; env.SOME_ENV? See https://vike.dev/env.

[MrNaif2018]

I find using t3 env convenient as I get the zod validation and typescript support. So using those variables directly makes it not as convenient as defining schema in one place and then accessing it via env.SOME_ENV anywhere in the code via
import {env} from "@/env"
We finally managed to finish some part of our frontend with vike, so the code is open:
https://github.com/bitcart/bitcart-frontend/blob/master/apps/landing/src/env.ts

So in client I list all env vars I need on client, shared is mostly used for some constants, and there is no server (for now), as those apps are static landing sites
https://github.com/bitcart/bitcart-frontend/blob/230711b83df078ee1976f25fe88edb8b086cb10d/apps/landing/vite.config.ts#L23

Matomo specifically is enabled or disabled here:
https://github.com/bitcart/bitcart-frontend/blob/230711b83df078ee1976f25fe88edb8b086cb10d/apps/landing/src/common/constants.ts#L10

(I did fix the import.meta.env usage here, but didn't find a way to fix our t3 env usage)

And I could pass it in runtime env manually, but then I think it defeats the point of using this object anyway

But if there are better ways I would like to explore them too as well

[brillout]

How about interface ImportMetaEnv as centralization while using utility functions like getMatomoActions() that do the parsing? So you'd call getMatomoActions() at many places and use import.meta.env.BITCART_MATOMO_ACTIONS only once.

It think that's the most JS idiomatic way to do it, and I don't see a drawback with that approach? (Minus the lack of automatic runtime validation.)

[MrNaif2018]

I ended up doing something like so for now:

import { createEnv } from "@t3-oss/env-core"
import { z } from "zod"

const clientSchema = {
  BITCART_MATOMO_URL: z.string().default(""),
}

const sharedSchema = {
  BRAND_UMBRELLA_NAME: z.string().default("Bitcart"),
}

export type EnvKeys = keyof typeof clientSchema | keyof typeof sharedSchema

export const env = createEnv({
  client: clientSchema,
  shared: sharedSchema,
  clientPrefix: "BITCART_",
  runtimeEnv:
    typeof window === "undefined"
      ? process.env
      : {
          BITCART_MATOMO_URL: import.meta.env.BITCART_MATOMO_URL,
          ...
          BRAND_UMBRELLA_NAME: import.meta.env.BRAND_UMBRELLA_NAME,
          ...
        },
  emptyStringAsUndefined: true,
})

and in vite-env.d.ts:

/// <reference types="vite/client" />

import type { EnvKeys } from "./env"

declare global {
  interface ImportMetaEnv extends Record<EnvKeys, string | undefined> {}
}

Although I am not entirely sure I did the right thing with types, seems to work in vscode, although vite docs tell:

Imports will break type augmentation

If the ImportMetaEnv augmentation does not work, make sure you do not have any import statements in vite-env.d.ts. See the [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/2/modules.html#how-javascript-modules-are-defined) for more information.

What would be nice to add though, is ability to customize the public env prefix (vite's envPrefix+define for any env vars outside of it).
Like in vite.config.ts I have:

export default defineConfig({
  envPrefix: "BITCART_",
  define: {
    "import.meta.env.PRODUCTION_BASE_URL": JSON.stringify(process.env.PRODUCTION_BASE_URL),
    "import.meta.env.PROJECT_CANONICAL_NAME": JSON.stringify(process.env.PROJECT_CANONICAL_NAME),
  },
  ...

this would allow me to remove the conditional check on typeof window, and always use import.meta.env instead of process.env on server for example

[brillout]

ability to customize the public env prefix [...] allow me to remove the conditional check on typeof window

Why? Can't you change the clientPrefix parameter of createEnv()?

FYI I updated the plan:

• Environment variables TypeScript support #1726 (comment)

[MrNaif2018]

I mean this prefix:

vike/packages/vike/src/node/vite/plugins/pluginReplaceConstantsEnvVars.ts

Line 18 in 66cfd20

const PUBLIC_ENV_PREFIX = 'PUBLIC_ENV__'

The one in createEnv doesn't do much except for validation.
I am not entirely sure though, but it didn't work for me when I used import.meta.env directly pasing runtime env
It told me an error, reading
BITCART_STORE is undefined or something like so

but maybe it is because I use the generated env twice, once right in vite.config.ts to set some values, and second time during the actual app 🤔 I will try more

[brillout]

Actually, regardless of your use case, I think you're right and Vike should allow more customization. I've added +env.dangerouslyPassToClient to the plan.