feat: Add environment variable validation for development mode

This commit adds a new feature to help developers catch common mistakes with
environment variables during development. The feature automatically scans
source code for process.env.REACT_APP_* references and validates that they
are defined in .env files or the environment.

Key Features:
- Automatically detects all REACT_APP_* environment variable references in
  JavaScript and TypeScript files
- Warns developers when they reference undefined environment variables
- Provides intelligent typo detection with suggestions using Levenshtein
  distance algorithm (e.g., suggests REACT_APP_API_URL for REACT_APP_API_ULR)
- Only runs in development mode (npm start) - does not affect production builds
- Excludes test files from validation since they often use mocked values
- Can be disabled by setting DISABLE_ENV_CHECK=true

Changes Made:
1. Created checkEnvVariables utility in packages/react-dev-utils/
   - Implements fuzzy matching for typo suggestions
   - Scans source files using globby
   - Provides clear, actionable error messages

2. Integrated validation into npm start workflow
   - Added call to checkEnvVariables in packages/react-scripts/scripts/start.js
   - Runs after required file checks but before server startup
   - Non-blocking - always returns true to avoid breaking builds

3. Added comprehensive test suite
   - 11 test cases covering all functionality
   - Tests typo detection, multiple variables, TypeScript support, etc.
   - All tests passing

4. Updated documentation
   - Added Environment Variable Validation section to adding-custom-environment-variables.md
   - Updated react-dev-utils README.md with usage examples
   - Added feature to package.json files list

Benefits:
- Reduces debugging time by catching environment variable mistakes early
- Improves developer experience with helpful error messages and suggestions
- Prevents production bugs caused by undefined environment variables
- Maintains backward compatibility - optional and non-breaking

This enhancement aligns with Create React App's philosophy of providing a
great developer experience with helpful error messages and automatic
problem detection.

Author: meet1785

docusaurus/docs/adding-custom-environment-variables.md

@@ -66,6 +66,38 @@ if (process.env.NODE_ENV !== 'production') {
 
 When you compile the app with `npm run build`, the minification step will strip out this condition, and the resulting bundle will be smaller.
 
+## Environment Variable Validation
+
+> Note: this feature is available with `[email protected]` and higher.
+
+When you run `npm start` in development mode, Create React App will automatically scan your source code for references to `process.env.REACT_APP_*` variables and check if they are defined in your `.env` files or environment. If you reference an environment variable that isn't defined, you'll see a helpful warning message:
+
+```
+Warning: The following environment variables are referenced in your code but not defined:
+
+  REACT_APP_API_URL
+    Did you mean REACT_APP_API_URI?
+
+To fix this, add the missing variables to your .env file or set them in your environment.
+For example, add this line to your .env file:
+
+  REACT_APP_API_URL=your_value_here
+
+Learn more: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
+
+To disable this check, set DISABLE_ENV_CHECK=true in your environment.
+```
+
+This validation helps catch common mistakes such as:
+
+- **Typos in variable names** - The validator will suggest similar variable names if it detects a potential typo
+- **Forgotten `.env` entries** - Get immediate feedback when you reference a variable that hasn't been defined yet
+- **Case sensitivity issues** - Environment variable names are case-sensitive, and the validator helps identify mismatches
+
+The validation only runs during development (`npm start`) and won't affect your production builds. Test files (files ending in `.test.js`, `.test.jsx`, `.test.ts`, `.test.tsx`, or files in `__tests__` directories) are excluded from validation since they often use mocked environment variables.
+
+You can disable this validation by setting `DISABLE_ENV_CHECK=true` in your environment or `.env` file.
+
 ## Referencing Environment Variables in the HTML
 
 > Note: this feature is available with `[email protected]` and higher.

package-lock.json

@@ -0,0 +1 @@
+true

packages/create-react-app/given-deprecation-warning

@@ -131,6 +131,28 @@ if (
 }
 ```
 
+#### `checkEnvVariables(appSrc: string, isInteractive: boolean): boolean`
+
+Scans source code for `process.env.REACT_APP_*` references and validates that they are defined.<br>
+Prints helpful warnings for undefined variables, including suggestions for typos.<br>
+Only runs in development mode. Returns `true` to indicate non-blocking validation.
+
+```js
+var path = require('path');
+var checkEnvVariables = require('react-dev-utils/checkEnvVariables');
+
+// Check environment variables before starting dev server
+checkEnvVariables(path.resolve('src'), true);
+```
+
+Features:
+
+- Detects all `REACT_APP_*` environment variable references in `.js`, `.jsx`, `.ts`, and `.tsx` files
+- Warns about undefined variables with helpful error messages
+- Suggests corrections for potential typos using fuzzy matching
+- Excludes test files from validation
+- Can be disabled by setting `DISABLE_ENV_CHECK=true`
+
 #### `clearConsole(): void`
 
 Clears the console, hopefully in a cross-platform way.