0
# React App Polyfill
1

2
React App Polyfill provides essential browser polyfills specifically designed for React applications built with Create React App. The package enables modern JavaScript features to work in legacy browsers like Internet Explorer 9 and 11, offering targeted polyfill modules that automatically set up compatibility layers when imported.
3

4
## Package Information
5

6
- **Package Name**: react-app-polyfill  
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install react-app-polyfill`
10

11
## Core Imports
12

13
All modules are imported as side-effects that automatically configure polyfills:
14

15
```javascript
16
// For Internet Explorer 9 support
17
import 'react-app-polyfill/ie9';
18

19
// For Internet Explorer 11 support  
20
import 'react-app-polyfill/ie11';
21

22
// For stable language features (modern browsers)
23
import 'react-app-polyfill/stable';
24

25
// For testing environments (jsdom/Node.js)
26
import 'react-app-polyfill/jsdom';
27
```
28

29
CommonJS imports:
30

31
```javascript
32
require('react-app-polyfill/ie9');
33
require('react-app-polyfill/ie11');
34
require('react-app-polyfill/stable');
35
require('react-app-polyfill/jsdom');
36
```
37

38
## Basic Usage
39

40
React App Polyfill modules must be imported as the **first lines** in your application's entry point:
41

42
```javascript
43
// These must be the first lines in src/index.js
44
import 'react-app-polyfill/ie11';
45
import 'react-app-polyfill/stable';
46

47
import React from 'react';
48
import ReactDOM from 'react-dom';
49
import App from './App';
50

51
ReactDOM.render(<App />, document.getElementById('root'));
52
```
53

54
For Internet Explorer 9 support:
55

56
```javascript
57
// These must be the first lines in src/index.js  
58
import 'react-app-polyfill/ie9';
59
import 'react-app-polyfill/stable';
60

61
// ... rest of your application code
62
```
63

64
## Architecture
65

66
React App Polyfill is built around side-effect modules that automatically configure browser polyfills:
67

68
- **Environment Detection**: Uses feature detection to conditionally apply polyfills only when needed
69
- **Layered Support**: IE9 module includes IE11 polyfills, providing incremental compatibility
70
- **Dependency-Based**: Leverages proven polyfill libraries (core-js, whatwg-fetch, promise, etc.)
71
- **Testing-Friendly**: Separate jsdom module provides minimal polyfills for test environments
72

73
## Capabilities
74

75
### Internet Explorer 9 Support
76

77
Comprehensive polyfills for Internet Explorer 9 compatibility, including all IE11 features plus additional IE9-specific polyfills.
78

79
```javascript { .api }
80
import 'react-app-polyfill/ie9';
81
```
82

83
**Polyfills Provided:**
84
- All features from IE11 module
85
- Map support (ES6 Maps via core-js/features/map)
86
- Set support (ES6 Sets via core-js/features/set)  
87
- RequestAnimationFrame support (via raf.polyfill())
88

89
### Internet Explorer 11 Support
90

91
Essential polyfills for Internet Explorer 11 compatibility with modern JavaScript features.
92

93
```javascript { .api }
94
import 'react-app-polyfill/ie11';
95
```
96

97
**Polyfills Provided:**
98
- Promise support with rejection tracking (via promise/lib/es6-extensions.js)
99
- window.fetch API (browser environments only, via whatwg-fetch)
100
- Object.assign method (via object-assign)
101
- Symbol primitive type (via core-js/features/symbol)
102
- Array.from method (via core-js/features/array/from)
103

104
### Stable Language Features
105

106
Comprehensive polyfills for stable JavaScript language features. When used with Create React App, automatically configured based on your project's browserslist to include only necessary polyfills for target browsers.
107

108
```javascript { .api }
109
import 'react-app-polyfill/stable';
110
```
111

112
**Polyfills Provided:**
113
- All stable JavaScript features (via core-js/stable)
114
- Regenerator runtime for async/await support (via regenerator-runtime/runtime)
115

116
### Testing Environment Support
117

118
Minimal polyfills specifically designed for testing environments like jsdom and Node.js.
119

120
```javascript { .api }
121
import 'react-app-polyfill/jsdom';
122
```
123

124
**Polyfills Provided:**
125
- window.fetch API (browser environments only, via whatwg-fetch)
126

127
## Usage Patterns
128

129
### Single Browser Target
130

131
For targeting a single browser compatibility level:
132

133
```javascript
134
// IE9 support only
135
import 'react-app-polyfill/ie9';
136

137
// IE11 support only  
138
import 'react-app-polyfill/ie11';
139

140
// Modern browsers with stable features
141
import 'react-app-polyfill/stable';
142
```
143

144
### Combined Usage
145

146
For comprehensive browser support with both legacy and modern features:
147

148
```javascript
149
// IE9 + stable features
150
import 'react-app-polyfill/ie9';
151
import 'react-app-polyfill/stable';
152

153
// IE11 + stable features
154
import 'react-app-polyfill/ie11'; 
155
import 'react-app-polyfill/stable';
156
```
157

158
### Testing Setup
159

160
For test environments using jsdom:
161

162
```javascript
163
// In test setup files
164
import 'react-app-polyfill/jsdom';
165
```
166

167
## Environment Detection
168

169
React App Polyfill uses intelligent environment detection to apply polyfills only when appropriate:
170

171
- **Browser Detection**: `typeof window !== 'undefined'` prevents server-side polyfill loading
172
- **Feature Detection**: `typeof Promise === 'undefined'` conditionally applies Promise polyfill
173
- **Native Preservation**: Uses native implementations when available and not buggy (e.g., Object.assign)
174

175
## Error Handling
176

177
The package includes rejection tracking for Promises to prevent common React state inconsistencies:
178

179
- Promise rejection tracking is automatically enabled when Promise polyfill is loaded
180
- Helps identify errors that would otherwise be swallowed by Promise chains
181
- Improves debugging experience in legacy browser environments