I am now using a framework (vite) that injects environment variables into import.meta.env.
I was previously able to create a file env.d.ts to provide types to process.env
declare global {
namespace NodeJS {
interface ProcessEnv {
GITHUB_AUTH_TOKEN: string;
NODE_ENV: 'development' | 'production';
PORT?: string;
PWD: string;
}
}
}
I've tried the following but does not work.
declare global {
namespace NodeJS {
interface ImportMeta {
GITHUB_AUTH_TOKEN: string;
NODE_ENV: 'development' | 'production';
PORT?: string;
PWD: string;
}
}
}
I had similar problems and solved it by
tsconfig.json
{
...
"compilerOptions": {
...
"target": "ESNext",
"types": ["vite/client"]
}
}
Have vite installed as a dev dependency.
According to the documentation here https://vitejs.dev/guide/env-and-mode.html#intellisense you can do the following:
// env.d.ts
interface ImportMetaEnv extends Readonly<Record<string, string>> {
readonly VITE_APP_TITLE: string
// more env variables...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
If you are using SvelteKit v1.0.0-next.120 and Vite 2.4.0, env must be a property of ImportMeta in global.d.ts. Here's an example:
interface ImportMeta {
env: {
VITE_DATABASE_URL?: string
VITE_WEB_URL?: string
VITE_BRAINTREE_GATEWAY?: string
VITE_BRAINTREE_DESCRIPTOR?: string
VITE_RECAPTCHA_SECRET_KEY?: string
VITE_EMAIL_FROM?: string
VITE_EMAIL_ADMINS?: string
VITE_SEND_IN_BLUE_KEY?: string
VITE_SEND_IN_BLUE_URL?: string
VITE_RECAPTCHA_SITE_KEY?: string
}
}
It's documented here: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#support-for-importmeta
So you're almost there:
interface ImportMeta {
env: {
GITHUB_AUTH_TOKEN: string;
NODE_ENV: 'development' | 'production';
PORT?: string;
PWD: string;
};
}
But be aware that in vite all environment variables have to be prefixed with VITE_ so neither of those environment variables are available in the application.
I got it to work by using the following -
interface ImportMetaEnv {
VITE_PORT?: string;
VITE_AUTH_TOKEN?: string;
}