Registry / devops / react-inject-env

react-inject-env

library2.1.0jsnpmunverified

react-inject-env is a specialized build-time utility for React applications that enables the injection of environment variables *after* the static files have been built. This addresses a common challenge in React development where `process.env` variables are typically bundled into the application at build time, preventing a single build artifact from being used across multiple deployment environments without rebuilding. The current stable version is 2.1.0. The library works by generating a `env.js` file (or custom name) in your build output, which then exposes variables via `window.env` at runtime. Key differentiators include its ability to modify environment variables without rebuilding the application, synchronous access to these variables (unlike some asynchronous loading solutions), and straightforward integration into CI/CD pipelines and Docker workflows. It supports `.env` files and command-line arguments for variable definition, with command-line variables taking precedence. This approach significantly simplifies multi-environment deployments.

devops

npm install react-inject-env

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-INJECT-ENV

react-inject-env

devopsjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

env

✓ import { env } from './env'

✗ const env = require('./env');

The `env` variable is exported from a user-created `env.js` or `env.ts` file. This file then combines `process.env` (for build-time access) with `window.env` (for runtime injected variables).

Window.env

✓ declare global { interface Window { env: any } }

For TypeScript projects, extend the global `Window` interface to properly type the `window.env` object, which is where react-inject-env places the runtime environment variables.

script tag inclusion

✓ <script src='/env.js'></script>

The generated environment variables file (`env.js` by default) must be included as a script tag in your `index.html` to load the variables into the `window` object before your React app initializes.

This quickstart demonstrates how to configure a React application to use `react-inject-env`. It includes modifying `index.html`, creating a `env.ts` file, updating an `App` component to consume the `env` object, and then shows the terminal commands to install, build, and inject variables post-build.

<script src='/env.js'></script> // src/env.ts (create this file) declare global { interface Window { env: { REACT_APP_COLOR: string; REACT_APP_MAIN_TEXT: string; [key: string]: string; // Allow other environment variables }; } } export const env: Window['env'] = { ...process.env, ...window.env }; // src/App.tsx (use the imported 'env' object) import { env } from './env'; export const App = () => { const backgroundColor = env.REACT_APP_COLOR || '#ffffff'; const mainText = env.REACT_APP_MAIN_TEXT || 'Default App Text'; return ( <div style={{ backgroundColor, padding: '20px', textAlign: 'center' }}> <h1>{mainText}</h1> <p>Environment variables loaded via react-inject-env.</p> <p>Current background color: {backgroundColor}</p> </div> ); }; // --- Terminal Commands --- // 1. Install react-inject-env as a dev dependency // npm install react-inject-env --save-dev // 2. Build your React application (e.g., using Create React App) // npm run build // 3. Inject environment variables into the 'build' folder // REACT_APP_COLOR='#ffe0b2' REACT_APP_MAIN_TEXT='Hello from the Injector!' npx react-inject-env set // 4. (Optional) Run a local server to test (requires http-server) // npx http-server build

react-inject-env --version

Debug

Known issues

breakingUsage patterns for `react-inject-env` changed significantly between v1.0 and v2.x. Users migrating from v1 will need to update their `index.html` to include `<script src='/env.js'></script>` and create a custom `env.js` or `env.ts` file to expose environment variables, replacing direct `process.env` usage within their components.

fix

Refer to the v2.x documentation for updated setup instructions, specifically the steps for modifying `index.html` and creating an `env.js`/`env.ts` file. Replace all `process.env.YOUR_VAR` with `env.YOUR_VAR` in your application code.

affects: >=2.0

gotchaIf `react-inject-env` is not run after building your static files, or if the `<script src='/env.js'></script>` is not included in `index.html`, your application will not receive the injected environment variables, potentially leading to `undefined` values or fallback behaviors.

fix

Ensure `npx react-inject-env set` is executed as part of your deployment script *after* `npm run build`. Verify that `public/index.html` contains the script tag pointing to your environment file (e.g., `/env.js`).

affects: >=1.0

gotchaEnvironment variables passed directly through the command line (e.g., `VAR=value npx react-inject-env set`) will take precedence over variables defined in a `.env` file when `react-inject-env` is executed.

fix

Be aware of the precedence order. For consistent behavior, define critical variables either solely in `.env` files or solely via command-line arguments in your CI/CD, avoiding conflicts where possible.

affects: >=1.0

gotchaBy default, `react-inject-env` places variables under `window.env`. If your application or another library already uses `window.env`, a conflict may occur.

fix

Use the `-v` or `--var` option with `npx react-inject-env set` to specify a different global variable name, e.g., `npx react-inject-env set --var myAppEnv` and update your `env.js`/`env.ts` file accordingly (e.g., `export const env = { ...process.env, ...window.myAppEnv }`).

affects: >=1.0

Errors

Common errors & fixes

ReferenceError: env is not defined

The `env` object was not imported, or the `env.js`/`env.ts` file was not created/configured correctly, or the script tag for `env.js` is missing in `index.html`.

fix

Ensure `import { env } from './env'` is present in your component files. Verify `src/env.js` or `src/env.ts` exists and is correctly structured. Check `public/index.html` for `<script src='/env.js'></script>`.

Error: Cannot find module 'react-inject-env'

`react-inject-env` was not installed or is not accessible in the current execution environment.

fix

Run `npm install react-inject-env --save-dev` or `yarn add react-inject-env --dev`. If running in Docker, ensure `npm install` runs after `COPY . /app` to install dependencies.

TypeError: Cannot read properties of undefined (reading 'REACT_APP_VAR')

This typically indicates `window.env` is `undefined` when your application tries to access it, meaning `env.js` was not loaded or `react-inject-env set` was not run.

fix

Confirm `npx react-inject-env set` was executed after building and before serving. Ensure the `script` tag for `env.js` is present in `index.html` and points to the correct path relative to your served static files.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/codegowhere/react-inject-env ↗

packagehttps://www.npmjs.com/package/react-inject-env ↗