You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Next, follow the migration instructions below that are relevant to you.
20
+
Like any major release, it contains a few breaking changes. We expect that they won't affect every users, but we provide them in detail below. We recommend to scan over these sections to see if something affects you. If we missed something, please file a new issue.
21
21
22
-
## Use dynamic `import()` instead of `require.ensure()`
22
+
## Breaking Change: IE 9, IE 10, and IE 11 are no longer supported by default (but you can opt in!)
23
+
24
+
We have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below.
25
+
26
+
First, install `react-app-polyfill`:
27
+
28
+
```bash
29
+
$ npm install react-app-polyfill --save
30
+
$ # or
31
+
$ yarn add react-app-polyfill
32
+
```
33
+
34
+
Next, place one of the following lines at the very top of `src/index.js`:
35
+
36
+
```js
37
+
import'react-app-polyfill/ie9'; // For IE 9-11 support
38
+
import'react-app-polyfill/ie11'; // For IE 11 support
39
+
```
40
+
41
+
You can read more about [these polyfills here](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill).
42
+
43
+
## Breaking Change: Dynamic `import()` of a CommonJS module now has a `.default` property
44
+
45
+
[Webpack 4 changed the behavior of `import()`](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) to be closer in line with the specification.
46
+
47
+
Previously, importing a CommonJS module did not require you specify the default export. In most cases, this is now required.
48
+
If you see errors in your application about `... is not a function`, you likely need to update your dynamic import, e.g.:
## Breaking Change: `require.ensure()` is superseded by dynamic `import()`
23
57
24
58
We previously allowed code splitting with a webpack-specific directive, `require.ensure()`. It is now disabled in favor of `import()`. To switch to `import()`, follow the examples below:
## The default Jest environment was changed to `jsdom`
89
+
## Breaking Change: The default Jest environment was changed to `jsdom`
56
90
57
91
Look at the `test` entry in the `scripts` section of your `package.json`.
58
92
Here's a table how to change it from "before" and "after", depending on what you have there:
@@ -62,17 +96,10 @@ Here's a table how to change it from "before" and "after", depending on what you
62
96
|`react-scripts test --env=jsdom`|`react-scripts test`|
63
97
|`react-scripts test`|`react-scripts test --env=node`|
64
98
65
-
## `.mjs` file extension support was removed
66
99
67
-
Change the extension of any files in your project using `.mjs`to just `.js`.
100
+
## Breaking Change: Move advanced proxy configuration to `src/setupProxy.js`
68
101
69
-
It was removed because of inconsistent support from underlying tools. We will add it back after it stops being experimental, and Jest gets built-in support for it.
70
-
71
-
## Move advanced proxy configuration to `src/setupProxy.js`
72
-
73
-
This change is only required if you used the _advanced_ proxy configuration in v1.
74
-
75
-
To check if action is required, look for the `proxy` key in `package.json`. Then, follow the table below.
102
+
To check if action is required, look for the `proxy` key in `package.json` and follow this table:
76
103
77
104
1. I couldn't find a `proxy` key in `package.json`
78
105
- No action is required!
@@ -81,9 +108,9 @@ To check if action is required, look for the `proxy` key in `package.json`. Then
81
108
3. The value of `proxy` is an object
82
109
- Follow the migration instructions below.
83
110
84
-
If your `proxy` is an object, that means you are using the advanced proxy configuration.
111
+
**It's worth highlighting: if your `proxy`field is a `string`, e.g. `http://localhost:5000`, or you don't have it, skip this section. This feature is still supported and has the same behavior.**
85
112
86
-
**Again, if your `proxy`field is a `string`, e.g. `http://localhost:5000`, you do not need to do anything. This feature is still supported and has the same behavior.**
113
+
If your `proxy` is an object, that means you are using the advanced proxy configuration. It has become fully customizable so we removed the limited support for the object-style configuration. Here's how to recreate it.
87
114
88
115
First, install `http-proxy-middleware` using npm or Yarn:
You can also use completely custom logic there now! This wasn't possible before.
131
158
132
-
## Internet Explorer is no longer supported by default (but you can opt in!)
133
-
134
-
We have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below.
159
+
## Breaking Change: `.mjs` file extension support was removed
135
160
136
-
First, install `react-app-polyfill`:
137
-
138
-
```bash
139
-
$ npm install react-app-polyfill --save
140
-
$ # or
141
-
$ yarn add react-app-polyfill
142
-
```
143
-
144
-
Next, place one of the following lines at the very top of `src/index.js`:
145
-
146
-
```js
147
-
import'react-app-polyfill/ie9'; // For IE 9-11 support
148
-
import'react-app-polyfill/ie11'; // For IE 11 support
149
-
```
150
-
151
-
You can read more about [these polyfills here](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill).
152
-
153
-
## The behavior of a CommonJS `import()` has changed
154
-
155
-
[Webpack 4 changed the behavior of `import()`](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) to be closer in line with the specification.
161
+
Change the extension of any files in your project using `.mjs` to just `.js`.
156
162
157
-
Previously, importing a CommonJS module did not require you specify the default export. In most cases, this is now required.
158
-
If you see errors in your application about `... is not a function`, you likely need to update your dynamic import, e.g.:
163
+
It was removed because of inconsistent support from underlying tools. We will add it back after it stops being experimental, and Jest gets built-in support for it.
0 commit comments