{"id":26169,"library":"react-web-config","title":"react-web-config","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/tanhauhau/react-web-config","tags":["javascript","react","native","config","react-native-config","react-native-web","web","env","dot-env"],"install":[{"cmd":"npm install react-web-config","lang":"bash","label":"npm"},{"cmd":"yarn add react-web-config","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-web-config","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to use the ReactWebConfig plugin in webpack.config.js","package":"webpack","optional":true}],"imports":[{"note":"The plugin is at the subpath lib/ReactWebConfig; direct require from the package root may fail.","wrong":"const { ReactWebConfig } = require('react-web-config');","symbol":"ReactWebConfig","correct":"import { ReactWebConfig } from 'react-web-config/lib/ReactWebConfig';"},{"note":"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.","wrong":"import Config from 'react-web-config';","symbol":"default (Config object)","correct":"import Config from 'react-native-config';"},{"note":"After alias, the module exports a plain object. Accessing properties directly is fine.","wrong":"const config = require('react-web-config'); const config.API_URL;","symbol":"Config.API_URL","correct":"Config = require('react-native-config'); config.API_URL;"}],"quickstart":{"code":"// First, ensure you have a .env file in your project root with variables like:\n// API_URL=https://myapi.com\n\n// In webpack.config.js, add:\nconst webpack = require('webpack');\nconst path = require('path');\nconst { ReactWebConfig } = require('react-web-config/lib/ReactWebConfig');\n\nconst envFilePath = path.resolve(__dirname, '.env');\n\nmodule.exports = {\n  plugins: [\n    ReactWebConfig(envFilePath)\n  ],\n  resolve: {\n    alias: {\n      'react-native-config': 'react-web-config',\n      'react-native': 'react-native-web'\n    }\n  }\n};\n\n// In your app code:\nimport Config from 'react-native-config';\nconst API_URL = Config.API_URL; // 'https://myapi.com'","lang":"javascript","description":"Shows how to set up react-web-config with webpack alias and plugin to read .env variables."},"warnings":[{"fix":"Ensure .env file exists in the root directory as specified by envFilePath.","message":"The plugin expects synchronous file reading; if .env is missing, errors may be cryptic.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Restart the dev server after modifying .env file.","message":"Variables are not available until after the plugin runs; dynamic changes to .env require rebuild.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use dotenv-webpack if you need those features, but it may conflict.","message":"The library does not handle variable expansion or .env.local overrides like dotenv.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure resolve.alias includes 'react-native-config': 'react-web-config'.","cause":"Missing alias configuration in webpack resolve or alias points to wrong package.","error":"Module not found: Error: Can't resolve 'react-native-config' in '/path/to/project'"},{"fix":"Use { ReactWebConfig } from 'react-web-config/lib/ReactWebConfig'.","cause":"Incorrect import of ReactWebConfig from react-web-config.","error":"TypeError: ReactWebConfig is not a function"},{"fix":"Add ReactWebConfig(envFilePath) to plugins array and verify .env exists.","cause":"Missing ReactWebConfig plugin in webpack plugins, or .env file missing/wrong path.","error":"Undefined is not an object (evaluating 'Config.API_URL')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}