Registry / web-framework / react-web-config

react-web-config

library1.0.0jsnpmunverified

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.

web-framework

npm install react-web-config

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-WEB-CONFIG

react-web-config

web-frameworkjavascriptv1.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

ReactWebConfig

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

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

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

default (Config object)

✓ import Config from 'react-native-config';

✗ import Config from 'react-web-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

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

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

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

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'

Debug

Known issues

gotchaThe 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.

affects: >=1.0.0

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

fix

Restart the dev server after modifying .env file.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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

fix

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

TypeError: ReactWebConfig is not a function

Incorrect import of ReactWebConfig from react-web-config.

fix

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

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

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

fix

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

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

webpackoptionalRequired to use the ReactWebConfig plugin in webpack.config.js

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/tanhauhau/react-web-config ↗

packagehttps://www.npmjs.com/package/react-web-config ↗