How To Fix the import.meta.env Error in a Vite + Jest Setup

If you’ve worked with Vite for building a React (or other) application and used Jest for testing, you might have encountered an error like:

The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

This typically shows up when you use import.meta.env in your code, which is how Vite injects environment variables. The underlying issue is that TypeScript (or your Jest config) is not set to one of the module options that allows the import.meta property.

In this post, we’ll walk through how we fixed this issue by adjusting our Vite configuration so that we can use process.env instead of import.meta.env. We’ll also cover how to keep environment variables flexible without manually defining each one.

The Problem

We had a Vite + React + TypeScript project that used environment variables in the code:

const API_URL = import.meta.env.VITE_API_URL;
const API_KEY = import.meta.env.VITE_API_KEY;

However, when we ran our Jest tests, the compiler threw an error:

error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

We tried setting "module": "esnext" in our tsconfig.jest.json, but we still faced conflicts in the build process. We decided to take a different approach: stop using import.meta.env in our code and switch to process.env.

The Solution

1. Use loadEnv and define in vite.config.ts Instead of referencing import.meta.env directly, we can load environment variables via Vite’s loadEnv function, then expose them to our code as process.env.VARIABLE_NAME.

Here’s how we did it in vite.config.ts:

// vite.config.ts
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig(({ mode }) => {
  // Load environment variables that start with VITE_
  const env = loadEnv(mode, process.cwd());

  // Map the VITE_* variables to keys without the prefix.
  const processEnv = Object.keys(env)
    .filter((key) => key.startsWith("VITE_"))
    .reduce((acc, key) => {
      // Remove the "VITE_" prefix and expose the variable
      const newKey = key.replace(/^VITE_/, "");
      acc[`process.env.${newKey}`] = JSON.stringify(env[key]);
      return acc;
    }, {} as Record<string, string>);

  return {
    plugins: [react()],
    define: processEnv,
  };
});

1. Switch Code to Use process.env Next, in your application code (e.g., moviesAPI.ts), replace import.meta.env.VITE_API_URL with process.env.VITE_API_URL:

const API_URL = process.env.API_URL;
const API_KEY = process.env.API_KEY;

This way, all env variables you can import with process.env. without the VITE tag infront and others will be available during test execution. By switching to process.env and letting Vite handle the injection of environment variables, we avoid the tricky scenario where Jest complains about import.meta.env. It also gives us finer control over which variables we expose to the client, since we can selectively include or exclude them in our vite.config.ts.

Thanks for reading! If this helped you fix your environment variable issues with Vite and Jest, feel free to drop a comment or share your experience. Happy coding!

About the Author

I'm Zubair Hossain, a full stack software developer with a strong background in both frontend and backend development. I specialize in microservice architecture and AI integration, and I'm passionate about learning new things and solving complex problems. When I'm not coding, I enjoy exploring innovative technologies and sharing insights with the community.