When I try to add in any mention of import.meta.env I get the a fatal error.

const backendUrl = import.meta.env.VITE_BACKEND_URL;

TypeError: Cannot read properties of undefined (reading 'VITE_BACKEND_URL').

I can see the env without any issues inside the vite.config.ts when I log it, but it won't go any further. This is my vite.config.ts:

import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig, loadEnv } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import { cjsInterop } from 'vite-plugin-cjs-interop';
import path from 'path';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

const __dirname = path.resolve();

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname, 'VITE_');
  const isDevelopment = mode === 'development';

  return {
    plugins: [
      remix({
        appDirectory: 'app',
        buildDirectory: 'build',
      }),
      tsconfigPaths(),
      cjsInterop({
        dependencies: ['react-color'],
      }),
      nodePolyfills()
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './app'),
      },
    },
    server: {
      host: env.VITE_HOST || 'localhost',
      port: parseInt(env.VITE_PORT || '5173'),
      ...(isDevelopment && {
        watch: {
          usePolling: true,
        },
      }),
    },
    build: {
      outDir: 'dist',
    },
    publicDir: 'public',
    optimizeDeps: {
      entries: ['./app/entry.client.tsx', './app/root.tsx', './app/routes/**/*'],
    },
  };
});

What can I try next to resolve this?

When I try to add in any mention of import.meta.env I get the a fatal error.

const backendUrl = import.meta.env.VITE_BACKEND_URL;

TypeError: Cannot read properties of undefined (reading 'VITE_BACKEND_URL').

I can see the env without any issues inside the vite.config.ts when I log it, but it won't go any further. This is my vite.config.ts:

import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig, loadEnv } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import { cjsInterop } from 'vite-plugin-cjs-interop';
import path from 'path';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

const __dirname = path.resolve();

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname, 'VITE_');
  const isDevelopment = mode === 'development';

  return {
    plugins: [
      remix({
        appDirectory: 'app',
        buildDirectory: 'build',
      }),
      tsconfigPaths(),
      cjsInterop({
        dependencies: ['react-color'],
      }),
      nodePolyfills()
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './app'),
      },
    },
    server: {
      host: env.VITE_HOST || 'localhost',
      port: parseInt(env.VITE_PORT || '5173'),
      ...(isDevelopment && {
        watch: {
          usePolling: true,
        },
      }),
    },
    build: {
      outDir: 'dist',
    },
    publicDir: 'public',
    optimizeDeps: {
      entries: ['./app/entry.client.tsx', './app/root.tsx', './app/routes/**/*'],
    },
  };
});

What can I try next to resolve this?

• typescript
• environment-variables
• vite
• remix.run

• You can check out the answer in this link, see if it helps stackoverflow/questions/78381012/… – Funmilayo Talabi Commented Nov 19, 2024 at 14:03

1 Answer 1

you need to load the .env like this

  const env = loadEnv(process.env.NODE_ENV, process.cwd(), "");
  return {
    plugins: [react(), legacy()],
    define: {
      __APP_ENV__: env,
      "process.env": env
    },
  };