From a10b3727996a894de492224bbbd5a00912f05800 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Cederstr=C3=B6m?= Date: Fri, 26 Jan 2018 11:05:42 +0100 Subject: [PATCH 1/2] Move polyfill control to user land --- packages/react-scripts/config/polyfills.js | 30 ---------------- .../config/webpack.config.dev.js | 2 -- .../config/webpack.config.prod.js | 4 +-- .../scripts/utils/createJestConfig.js | 1 - packages/react-scripts/template/src/index.js | 3 ++ .../react-scripts/template/src/polyfills.js | 34 +++++++++++++++++++ 6 files changed, 39 insertions(+), 35 deletions(-) delete mode 100644 packages/react-scripts/config/polyfills.js create mode 100644 packages/react-scripts/template/src/polyfills.js diff --git a/packages/react-scripts/config/polyfills.js b/packages/react-scripts/config/polyfills.js deleted file mode 100644 index 8d97fb4ac39..00000000000 --- a/packages/react-scripts/config/polyfills.js +++ /dev/null @@ -1,30 +0,0 @@ -// @remove-on-eject-begin -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -// @remove-on-eject-end -'use strict'; - -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'); -} - -// fetch() polyfill for making API calls. -require('whatwg-fetch'); - -// Object.assign() is commonly used with React. -// It will use the native implementation if it's present and isn't buggy. -Object.assign = require('object-assign'); - -// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet. -// We don't polyfill it in the browser--this is user's responsibility. -if (process.env.NODE_ENV === 'test') { - require('raf').polyfill(global); -} diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 398b8bf53b7..754703752ce 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.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 diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index d631fc32a3b..742f60d7d70 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.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, diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index 593d17090a7..0ab019adb00 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.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}', diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js index 0c5e75da1cd..f02e30e78d4 100644 --- a/packages/react-scripts/template/src/index.js +++ b/packages/react-scripts/template/src/index.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'; diff --git a/packages/react-scripts/template/src/polyfills.js b/packages/react-scripts/template/src/polyfills.js new file mode 100644 index 00000000000..e0f81665dfd --- /dev/null +++ b/packages/react-scripts/template/src/polyfills.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'); From 63c3e5610949f12b42473c500a0ea1d3c0e38772 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Cederstr=C3=B6m?= Date: Wed, 31 Jan 2018 08:08:58 +0100 Subject: [PATCH 2/2] move polyfill import to place --- packages/react-scripts/template/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js index f02e30e78d4..6b550788160 100644 --- a/packages/react-scripts/template/src/index.js +++ b/packages/react-scripts/template/src/index.js @@ -1,8 +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 React from 'react'; +import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker';