21

I am using vitejs to compile my react app statically, however after build .env imports become undefined which is not the case on development stage.

reading the docs I've found out that these variables are replace by their corresponding values, but upon looking at the source/compiled code in the dev tools after serving it shows an empty object with the env name/key

enter image description here

i might have a wrong configuration in vite.config.ts so here it is.

//vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { getAliases } from 'vite-aliases';

const aliases = getAliases({
  path: 'src',
  prefix: '@',
});

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME
  // import.meta.env.VITE_PORT available here with: process.env.VITE_PORT

  const plugins = mode === 'development' ? [reactRefresh()] : [];
  return defineConfig({
    plugins,
    publicDir: 'src/assets',
    resolve: {
      alias: aliases,
    },
    build: {
      chunkSizeWarningLimit: 1500,
    },
  });
};

And also the code where I'm referencing these env var

//config.ts
export const config = () => {
  const url = import.meta.env.VITE_SERVER_URL;
  const api = import.meta.env.VITE_API_ENDPOINT;
  const auth = import.meta.env.VITE_AUTH_ENDPOINT;

  const isProd = import.meta.env.MODE === 'production';
  const isDev = import.meta.env.MODE === 'development';

  console.log(url, api, auth);
  return {
    api: (endpoint: string) => `${url}${api}${endpoint}`,
    auth: (endpoint: string) => `${url}${auth}${endpoint}`,
    test: (endpoint: string) => `${url}test${endpoint}`,
    isProd,
    isDev,
  };
};
vexingCoder
  • 438
  • 1
  • 6
  • 9
  • 6
    Did you figure this out? I have followed the docs and hit the same problem, import.meta.env is always empty, dev or production. I have an `.env.local` it has key/value in the format `VITE_KEY=VALUE` and I access them with `import.meta.env.VITE_KEY` – fungus1487 Jun 28 '21 at 12:08
  • I kinda forgot how i did it but you can look at my config. https://pastebin.com/04FGwEgw – vexingCoder Jul 30 '21 at 09:07
  • @vexingCoder thanks for the pastebin link, 99% solved my issues (which matched @fungus1487). After adapting your good code, I had a bug reported in the browser.console and opened the related vite code link. It showed the viteEnv value enclosed by parentheses - (). I added stringify around the value and wambam bug resolved ! `viteEnv[`import.meta.env.${key}`] = JSON.stringify(process.env[key])` – pmg7670 Aug 15 '22 at 12:18

2 Answers2

27

I just realized what the ViteJS documentation says and I'll leave it in case someone also suffers from this.

enter image description here

Gerson Malca Bazan
  • 411
  • 5
  • 7
  • This fixed my problem! I had switched from building with React (e.g. `react-scripts build`) to Vite. I also had to change my REACT_APP_* environment variables to VITE_*. I also had to change `process.env.` to `import.meta.env.` (see https://blog.ramadevsign.com/how-to-use-environment-variables-in-vite-react-template-example) and add the `"types": ["vite/client"]` into the `compilerOptions` of tsconfig.json file (https://github.com/vitejs/vite/issues/3524#issuecomment-848641926) – Michael Osofsky May 10 '22 at 06:20
5

You don't have to use VITE_. You can use any prefix you like as long as you define it in the envPrefix option on the vite config.

kpturner
  • 103
  • 1
  • 6
  • You can also use [define](https://vitejs.dev/config/#environment-variables) which is useful if you want to use the same variable elsewhere and a common prefix isn't suitable. – a2k42 Oct 21 '22 at 00:27