react-web-config

1.0.0 verified Fri May 01 auth: no javascript

A drop-in replacement for react-native-config that makes environment variables from a .env file accessible in React Native Web projects. Version 1.0.0 is stable, with no recent updates. It works by aliasing react-native-config to react-web-config and injecting variables via a webpack plugin. Unlike alternatives that require separate config files or build-time substitution, it mirrors the react-native-config API exactly, making migration seamless. It has minimal dependencies and is intended for projects already using react-native-config with react-native-web.

Common errors

error Module not found: Error: Can't resolve 'react-native-config' in '/path/to/project' ↓

cause Missing alias configuration in webpack resolve or alias points to wrong package.

fix

Ensure resolve.alias includes 'react-native-config': 'react-web-config'.

error TypeError: ReactWebConfig is not a function ↓

cause Incorrect import of ReactWebConfig from react-web-config.

fix

Use { ReactWebConfig } from 'react-web-config/lib/ReactWebConfig'.

error Undefined is not an object (evaluating 'Config.API_URL') ↓

cause Missing ReactWebConfig plugin in webpack plugins, or .env file missing/wrong path.

fix

Add ReactWebConfig(envFilePath) to plugins array and verify .env exists.

Warnings

gotcha The plugin expects synchronous file reading; if .env is missing, errors may be cryptic. ↓

fix Ensure .env file exists in the root directory as specified by envFilePath.

gotcha Variables are not available until after the plugin runs; dynamic changes to .env require rebuild. ↓

fix Restart the dev server after modifying .env file.

gotcha The library does not handle variable expansion or .env.local overrides like dotenv. ↓

fix Use dotenv-webpack if you need those features, but it may conflict.

Install

npm install react-web-config

yarn add react-web-config

pnpm add react-web-config

Imports

ReactWebConfig

wrong

const { ReactWebConfig } = require('react-web-config');

correct

import { ReactWebConfig } from 'react-web-config/lib/ReactWebConfig';

The plugin is at the subpath lib/ReactWebConfig; direct require from the package root may fail.

default (Config object)
wrong
```
import Config from 'react-web-config';
```
correct
```
import Config from 'react-native-config';
```
The library is designed to be used via the alias 'react-native-config': 'react-web-config' in webpack resolve. Direct import from 'react-web-config' may not work as expected.

Config.API_URL

wrong

const config = require('react-web-config'); const config.API_URL;

correct

Config = require('react-native-config'); config.API_URL;

After alias, the module exports a plain object. Accessing properties directly is fine.

Quickstart

Shows how to set up react-web-config with webpack alias and plugin to read .env variables.

// First, ensure you have a .env file in your project root with variables like:
// API_URL=https://myapi.com

// In webpack.config.js, add:
const webpack = require('webpack');
const path = require('path');
const { ReactWebConfig } = require('react-web-config/lib/ReactWebConfig');

const envFilePath = path.resolve(__dirname, '.env');

module.exports = {
  plugins: [
    ReactWebConfig(envFilePath)
  ],
  resolve: {
    alias: {
      'react-native-config': 'react-web-config',
      'react-native': 'react-native-web'
    }
  }
};

// In your app code:
import Config from 'react-native-config';
const API_URL = Config.API_URL; // 'https://myapi.com'