Move polyfill control to user land

Author: andriijas

packages/react-scripts/config/polyfills.js

@@ -56,8 +56,6 @@ module.exports = {
   // This means they will be the "root" imports that are included in JS bundle.
   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
   entry: [
-    // We ship a few polyfills by default:
-    require.resolve('./polyfills'),
     // Include an alternative client for WebpackDevServer. A client's job is to
     // connect to WebpackDevServer by a socket and get notified about changes.
     // When you save a file, the client will either apply hot updates (in case

packages/react-scripts/config/webpack.config.dev.js

@@ -79,8 +79,8 @@ module.exports = {
   // We generate sourcemaps in production. This is slow but gives good results.
   // You can exclude the *.map files from the build during deployment.
   devtool: shouldUseSourceMap ? 'source-map' : false,
-  // In production, we only want to load the polyfills and the app code.
-  entry: [require.resolve('./polyfills'), paths.appIndexJs],
+  // In production, we only want to load the app code.
+  entry: paths.appIndexJs,
   output: {
     // The build folder.
     path: paths.appBuild,

packages/react-scripts/config/webpack.config.prod.js

@@ -25,7 +25,6 @@ module.exports = (resolve, rootDir, srcRoots) => {
   // in Jest configs. We need help from somebody with Windows to determine this.
   const config = {
     collectCoverageFrom: ['src/**/*.{js,jsx,mjs}'],
-    setupFiles: [resolve('config/polyfills.js')],
     setupTestFrameworkScriptFile: setupTestsFile,
     testMatch: [
       '**/__tests__/**/*.{js,jsx,mjs}',

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+// Include the default polyfills to enable modern javascript features
+// in legacy browsers. Learn more: http://bit.ly/2Bt1Yjk
+import './polyfills';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';

packages/react-scripts/template/src/index.js

@@ -0,0 +1,34 @@
+/**
+ *  Polyfills enable javascript features in web browsers that do not support
+ *  the feature. Learn more: https://en.wikipedia.org/wiki/Polyfill_(programming)
+ *
+ * Depending on which browsers you are targeting with your app you may want
+ * to adjust which polyfills you are using.
+ *
+ * If you need other polyfills such as babel-polyfill or babel-runtime
+ * you can add it to this file.
+ *
+ */
+
+// Enables Promise, support in legacy browsers such as IE11 and below
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
+if (typeof Promise === 'undefined') {
+  // Rejection tracking prevents a common issue where React gets into an
+  // inconsistent state due to an error, but it gets swallowed by a Promise,
+  // and the user has no idea what causes React's erratic future behavior.
+  require('promise/lib/rejection-tracking').enable();
+  window.Promise = require('promise/lib/es6-extensions.js');
+}
+
+// Enables fetch() polyfill for making API calls support in
+// legacy browsers such as IE11 and below
+// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+require('whatwg-fetch');
+
+// Object.assign() is commonly used with React.
+// It will use the native implementation if it's present and isn't buggy.
+// It's not supported in legacy browsers such as IE11 and below.
+// In some cases you can remove it even if you are targeting IE by using
+// Spread opertor syntax instead.
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
+Object.assign = require('object-assign');