Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move polyfill control to user land #3922

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 0 additions & 30 deletions packages/react-scripts/config/polyfills.js

This file was deleted.

2 changes: 0 additions & 2 deletions packages/react-scripts/config/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/react-scripts/config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion packages/react-scripts/scripts/utils/createJestConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}',
Expand Down
3 changes: 3 additions & 0 deletions packages/react-scripts/template/src/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// Include the default polyfills to enable modern javascript features
// in legacy browsers. Learn more: http://bit.ly/2Bt1Yjk
import './polyfills';
Copy link
Contributor

@viankakrisna viankakrisna Jan 31, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this import should be placed before React, so the user doesn't have to move it if they want to include Map, Set, and RAF polyfill for React 16, it also matches current behavior.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
Expand Down
34 changes: 34 additions & 0 deletions packages/react-scripts/template/src/polyfills.js
Original file line number Diff line number Diff line change
@@ -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');